首页>>表单>>php+mysql对话框 可以用于网页实时反馈(2014-02-27)

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 ;  

 

php+mysql对话框 可以用于网页实时反馈
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

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