php+mysql对话框 可以用于网页实时反馈

php+mysql对话框 可以用于网页实时反馈

 可以折叠打开或者隐藏

数据库

 SQL Code

1. CREATE TABLE IF NOT EXISTS `shout_box` (  
2.   `id` int(11) NOT NULL AUTO_INCREMENT,  
3.   `user` varchar(60) NOT NULL,  
4.   `message` varchar(100) NOT NULL,  
5.   `date_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,  
6.   `ip_address` varchar(40) NOT NULL,  
7.   PRIMARY KEY (`id`)  
8. ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;  

 

 

演示

 

 

XML/HTML Code

1. <div class="shout_box">  
2. <div class="header">php+mysql对话框 <div class="close_btn"> </div></div>  
3.   <div class="toggle_chat">  
4.   <div class="message_box">  
5.     </div>  
6.     <div class="user_info">  
7.     <input name="shout_username" id="shout_username" type="text" placeholder="Your Name" maxlength="15" />  
8.    <input name="shout_message" id="shout_message" type="text" placeholder="Type Message Hit Enter" maxlength="100" />   
9.     </div>  
10.     </div>  

 

JavaScript Code

1. <script type="text/javascript">  
2. $(document).ready(function() {  
3.   
4.     // load messages every 1000 milliseconds from server.  
5.     load_data = {'fetch':1};  
6.     window.setInterval(function(){  
7.      $.post('shout.php', load_data,  function(data) {  
8.         $('.message_box').html(data);  
9.         var scrolltoh = $('.message_box')[0].scrollHeight;  
10.         $('.message_box').scrollTop(scrolltoh);  
11.      });  
12.     }, 1000);  
13.       
14.     //method to trigger when user hits enter key  
15.     $("#shout_message").keypress(function(evt) {  
16.         if(evt.which == 13) {  
17.                 var iusername = $('#shout_username').val();  
18.                 var imessage = $('#shout_message').val();  
19.                 post_data = {'username':iusername, 'message':imessage};  
20.                   
21.                 //send data to "shout.php" using jQuery $.post()  
22.                 $.post('shout.php', post_data, function(data) {  
23.                       
24.                     //append data into messagebox with jQuery fade effect!  
25.                     $(data).hide().appendTo('.message_box').fadeIn();  
26.       
27.                     //keep scrolled to bottom of chat!  
28.                     var scrolltoh = $('.message_box')[0].scrollHeight;  
29.                     $('.message_box').scrollTop(scrolltoh);  
30.                       
31.                     //reset value of message box  
32.                     $('#shout_message').val('');  
33.                       
34.                 }).fail(function(err) {   
35.                   
36.                 //alert HTTP server error  
37.                 alert(err.statusText);   
38.                 });  
39.             }  
40.     });  
41.       
42.     //toggle hide/show shout box  
43.     $(".close_btn").click(function (e) {  
44.         //get CSS display state of .toggle_chat element  
45.         var toggleState = $('.toggle_chat').css('display');  
46.           
47.         //toggle show/hide chat box  
48.         $('.toggle_chat').slideToggle();  
49.           
50.         //use toggleState var to change close/open icon image  
51.         if(toggleState == 'block')  
52.         {  
53.             $(".header div").attr('class', 'open_btn');  
54.         }else{  
55.             $(".header div").attr('class', 'close_btn');  
56.         }  
57.            
58.            
59.     });  
60. });  
61.   
62. </script>  

 shut.php

 

PHP Code

1. <?php  
2. require "../../conn.php";  
3.   
4. if($_POST)  
5. {  
6.       
7.       
8.     //check if its an ajax request, exit if not  
9.     if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {  
10.         die();  
11.     }   
12.       
13.     if(isset($_POST["message"]) &&  strlen($_POST["message"])>0)  
14.     {  
15.         //sanitize user name and message received from chat box  
16.         //You can replace username with registerd username, if only registered users are allowed.  
17.         $username = filter_var(trim($_POST["username"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH);  
18.         $message = filter_var(trim($_POST["message"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH);  
19.         $user_ip = $_SERVER['REMOTE_ADDR'];  
20.           
21.   
22.         //insert new message in db  
23.         if(mysql_query("INSERT INTO shout_box(user, message, ip_address) value('$username','$message','$user_ip')"))  
24.         {  
25.             $msg_time = date('h:i A M d',time()); // current time  
26.             echo '<div class="shout_msg"><time>'.$msg_time.'</time><span class="username">'.$username.'</span><span class="message">'.$message.'</span></div>';  
27.         }  
28.           
29.         // delete all records except last 10, if you don't want to grow your db size!  
30.         mysql_query("DELETE FROM shout_box WHERE id NOT IN (SELECT * FROM (SELECT id FROM shout_box ORDER BY id DESC LIMIT 0, 10) as sb)");  
31.     }  
32.     elseif($_POST["fetch"]==1)  
33.     {  
34.         $results = mysql_query("SELECT user, message, date_time FROM (select * from shout_box ORDER BY id DESC LIMIT 10) shout_box ORDER BY shout_box.id ASC");  
35.         while($row = mysql_fetch_array($results))  
36.         {  
37.             $msg_time = date('h:i A M d',strtotime($row["date_time"])); //message posted time 
38.             echo '<div class="shout_msg"><time>'.$msg_time.'</time><span class="username">'.$row["user"].'</span> <span class="message">'.$row["message"].'</span></div>'; 
39.         } 
40.     } 
41.     else 
42.     { 
43.         header('HTTP/1.1 500 Are you kiddin me?');  
44.         exit();  
45.     }  
46. }  

 

原文地址:http://www.freejs.net/article_biaodan_277.html