当前位置:首页 > 综合实例 > 列表

php+ajax实现无刷新的新闻留言系统

发布:smiling 来源: PHP粉丝网  添加日期:2014-02-10 12:34:52 浏览: 评论:0 

ajax自从有了jquery就非常的简单容易实现了,下面我来介绍一款基于jquery ajax+php mysql的无刷新的新闻留言系统实现过程,希望本文章能给您带来帮助。

最简明易懂的一个ajax无刷新留言系统了,源码中省略了接受数据验证的过程。读者可根据自己的需求进行扩展。

核心源码:

1.配置文件:config.php,代码如下:

  1. <?php 
  2.  //数据库配置信息(用户名,密码,数据库名,表前缀等) 
  3.  $cfg_dbhost = "localhost"
  4.  $cfg_dbuser = "root"
  5.  $cfg_dbpwd = "root"
  6.  $cfg_dbname = "ajaxdemo1"
  7.  $cfg_dbprefix = ""
  8.  $link = mysql_connect($cfg_dbhost,$cfg_dbuser,$cfg_dbpwd); 
  9.  mysql_select_db($cfg_dbname); 
  10.  mysql_query("set names utf8"); 
  11. ?> 

2.处理请求:deal.php,代码如下:

  1. <?php 
  2.  header("Content-type:text/html;charset=utf-8"); 
  3.  include "config.php"
  4.  //post接收数据,只是演示效果,这里就省去验证了 
  5.  $name = $_POST['name']; 
  6.  $content = $_POST['content']; 
  7.  $sql = "insert into test (name,content) values ('{$name}','{$content}');"
  8.  $res = mysql_query($sql,$link); 
  9.  if($res){ 
  10.   echo '{"name": "'.$name.'","content": "'.$content.'","status": "1"}'
  11.  } 
  12. ?> 

3.首页代码:index.php,代码如下:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
  2. <html xmlns="http://www.w3.org/1999/xhtml"
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5. <title>无刷新</title> 
  6. <link href="css/css.css" type="text/css" rel="stylesheet" /> 
  7. <style type="text/css"
  8. body{color:#555;font-size:14px;padding:0;margin:0;} 
  9. #form { background:#dedede; padding:10px 20px; width:300px;} 
  10. #show{ background:#f6f6f6;padding:10px 20px; width:300px;} 
  11. #show p{ margin:6px; font-size:13px; line-height:22px; border-bottom:1px dashed #cdcdcd;} 
  12. </style> 
  13. <script type="text/javascript" src="jquery-1.7.2.min.js"></script> 
  14. <script type="text/javascript"
  15. $(function(){ 
  16.  $("#sub").click(function(){ 
  17.   //只是说明原理,然后这里省去了验证文本框内容的步骤,直接发送ajax请求 
  18.   $.post("deal.php",{name : $("#name").val(), content : $("#content").val()}, function(data){ 
  19.     if(data.status){ 
  20.      var str = "<p><strong>"+data.name+"</strong> 发表了:"+data.content+"</p>"
  21.      $("#show").prepend(str);  //在前面追加 
  22.     }else
  23.      alert("评论失败"); 
  24.     } 
  25.    }, 'json');  
  26.  });     
  27. }); 
  28. </script> 
  29. </head> 
  30. <body> 
  31. <div id="form"
  32.  <form action="deal.php" method="get" id="suggest_form"
  33.   用户名:<input type="text" name="name" id="name" /><br/> 
  34.   内&nbsp;&nbsp;容:<textarea name="content" id="content"></textarea>&nbsp;&nbsp; 
  35.   <input type="button" value="发布" id="sub" /> 
  36.  </form> 
  37. </div> 
  38. <div id="show"
  39. <?php 
  40.  include "config.php"
  41.  $sql = "select * from test;"
  42.  $res = mysql_query($sql,$link); 
  43.  while($row=mysql_fetch_array($res)){ 
  44.   echo "<p><strong>".$row['name']."</strong> 发表了:".$row['content']."</p>"
  45.  } 
  46. ?> 
  47. </div> 
  48. </body> 
  49. </html> 

数据库文件,代码如下:

  1. DROP TABLE IF EXISTS `test`; 
  2. CREATE TABLE `test` ( 
  3.   `id` int(10) unsigned NOT NULL AUTO_INCREMENT, 
  4.   `namevarchar(64) NOT NULL
  5.   `content` text NOT NULL
  6.   PRIMARY KEY (`id`) 
  7. ) ENGINE=MyISAM DEFAULT CHARSET=utf8; 

Tags: php+ajax 实现 新闻 留言系统

分享到: