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

9404803

php+mysql对话框 可以用于网页实时反馈
 可以折叠打开或者隐藏
数据库
 SQL Code

• CREATE TABLE IF NOT EXISTS `shout_box` (  
  
•   `id` int(11) NOT NULL AUTO_INCREMENT,  
  
•   `user` varchar(60) NOT NULL,  
  
•   `message` varchar(100) NOT NULL,  
  
•   `date_time` timestamp NOT NULL DEFAULT CURRENT_TIMESTAMP,  
  
•   `ip_address` varchar(40) NOT NULL,  
  
•   PRIMARY KEY (`id`)  
  
• ) ENGINE=InnoDB DEFAULT CHARSET=latin1 AUTO_INCREMENT=1 ;  
  

 
 


演示
　　
 
XML/HTML Code

• <div class="shout_box">  
  
• <div class="header">php+mysql对话框 <div class="close_btn"> </div></div>  
  
•   <div class="toggle_chat">  
  
•   <div class="message_box">  
  
•     </div>  
  
•     <div class="user_info">  
  
•     <input name="shout_username" id="shout_username" type="text" placeholder="Your Name" maxlength="15" />  
  
•    <input name="shout_message" id="shout_message" type="text" placeholder="Type Message Hit Enter" maxlength="100" />   
  
•     </div>  
  
•     </div>  
  

 
JavaScript Code

• <script type="text/javascript">  
  
• $(document).ready(function() {  
  
•   
  
•     // load messages every 1000 milliseconds from server.  
  
•     load_data = {'fetch':1};  
  
•     window.setInterval(function(){  
  
•      $.post('shout.php', load_data,  function(data) {  
  
•         $('.message_box').html(data);  
  
•         var scrolltoh = $('.message_box')[0].scrollHeight;  
  
•         $('.message_box').scrollTop(scrolltoh);  
  
•      });  
  
•     }, 1000);  
  
•       
  
•     //method to trigger when user hits enter key  
  
•     $("#shout_message").keypress(function(evt) {  
  
•         if(evt.which == 13) {  
  
•                 var iusername = $('#shout_username').val();  
  
•                 var imessage = $('#shout_message').val();  
  
•                 post_data = {'username':iusername, 'message':imessage};  
  
•                   
  
•                 //send data to "shout.php" using jQuery $.post()  
  
•                 $.post('shout.php', post_data, function(data) {  
  
•                       
  
•                     //append data into messagebox with jQuery fade effect!  
  
•                     $(data).hide().appendTo('.message_box').fadeIn();  
  
•       
  
•                     //keep scrolled to bottom of chat!  
  
•                     var scrolltoh = $('.message_box')[0].scrollHeight;  
  
•                     $('.message_box').scrollTop(scrolltoh);  
  
•                       
  
•                     //reset value of message box  
  
•                     $('#shout_message').val('');  
  
•                       
  
•                 }).fail(function(err) {   
  
•                   
  
•                 //alert HTTP server error  
  
•                 alert(err.statusText);   
  
•                 });  
  
•             }  
  
•     });  
  
•       
  
•     //toggle hide/show shout box  
  
•     $(".close_btn").click(function (e) {  
  
•         //get CSS display state of .toggle_chat element  
  
•         var toggleState = $('.toggle_chat').css('display');  
  
•           
  
•         //toggle show/hide chat box  
  
•         $('.toggle_chat').slideToggle();  
  
•           
  
•         //use toggleState var to change close/open icon image  
  
•         if(toggleState == 'block')  
  
•         {  
  
•             $(".header div").attr('class', 'open_btn');  
  
•         }else{  
  
•             $(".header div").attr('class', 'close_btn');  
  
•         }  
  
•            
  
•            
  
•     });  
  
• });  
  
•   
  
• </script>  
  

 shut.php
 
PHP Code

• <?php  
  
• require "../../conn.php";  
  
•   
  
• if($_POST)  
  
• {  
  
•       
  
•       
  
•     //check if its an ajax request, exit if not  
  
•     if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {  
  
•         die();  
  
•     }   
  
•       
  
•     if(isset($_POST["message"]) &&  strlen($_POST["message"])>0)  
  
•     {  
  
•         //sanitize user name and message received from chat box  
  
•         //You can replace username with registerd username, if only registered users are allowed.  
  
•         $username = filter_var(trim($_POST["username"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH);  
  
•         $message = filter_var(trim($_POST["message"]),FILTER_SANITIZE_STRING, FILTER_FLAG_STRIP_LOW | FILTER_FLAG_STRIP_HIGH);  
  
•         $user_ip = $_SERVER['REMOTE_ADDR'];  
  
•           
  
•   
  
•         //insert new message in db  
  
•         if(mysql_query("INSERT INTO shout_box(user, message, ip_address) value('$username','$message','$user_ip')"))  
  
•         {  
  
•             $msg_time = date('h:i A M d',time()); // current time  
  
•             echo '<div class="shout_msg"><time>'.$msg_time.'</time><span class="username">'.$username.'</span><span class="message">'.$message.'</span></div>';  
  
•         }  
  
•           
  
•         // delete all records except last 10, if you don't want to grow your db size!  
  
•         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)");  
  
•     }  
  
•     elseif($_POST["fetch"]==1)  
  
•     {  
  
•         $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");  
  
•         while($row = mysql_fetch_array($results))  
  
•         {  
  
•             $msg_time = date('h:i A M d',strtotime($row["date_time"])); //message posted time 
  
•             echo '<div class="shout_msg"><time>'.$msg_time.'</time><span class="username">'.$row["user"].'</span> <span class="message">'.$row["message"].'</span></div>'; 
  
•         } 
  
•     } 
  
•     else 
  
•     { 
  
•         header('HTTP/1.1 500 Are you kiddin me?');  
  
•         exit();  
  
•     }  
  
• }  
  

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