PHP Ajax实现页面无刷新发表评论


Posted in PHP onJanuary 02, 2007

大家都有在网站发表评论的经历,传统的发表过程无非是:发表->提交页面表单->等待刷新页面,这样在网络比较拥挤的时候,往往需要漫长的等待,今天介绍用PHP+Ajax实现页面无刷新发表评论,希望对初学ajax的PHPer有所帮助。

   那么首先,我们需要一个基本的ajax开发框架,文件ajax.js就包含了这个框架,代码如下:

var http_request=false;
  function send_request(url){//初始化,指定处理函数,发送请求的函数
    http_request=false;
 //开始初始化XMLHttpRequest对象
 if(window.XMLHttpRequest){//Mozilla
浏览器
  http_request=new XMLHttpRequest();
  if(http_request.overrideMimeType){//设置MIME类别
    http_request.overrideMimeType("text/xml");
  }
 }
 else if(window.ActiveXObject){//IE浏览器
  try{
   http_request=new ActiveXObject("Msxml2.XMLHttp");
  }catch(e){
   try{
   http_request=new ActiveXobject("Microsoft.XMLHttp");
   }catch(e){}
  }
    }
 if(!http_request){//异常,创建对象实例失败
  window.alert("创建XMLHttp对象失败!");
  return false;
 }
 http_request.onreadystatechange=processrequest;
 //确定发送请求方式,URL,及是否同步执行下段代码
    http_request.open("GET",url,true);
 http_request.send(null);
  }
  //处理返回信息的函数
   function processrequest(){
   if(http_request.readyState==4){//判断对象状态
     if(http_request.status==200){//信息已成功返回,开始处理信息
   document.getElementById(reobj).innerHTML=http_request.responseText;
  }
  else{//页面不正常
   alert("您所请求的页面不正常!");
  }
   }
  }
   function checkfourm(obj){
    var f=document.fourm;
    var newfourm=f.newfourm.value;
    var username=f.username.value;
    var id=f.id.value;
    if(username==""){
           document.getElementById(obj).innerHTML="<img src=images/false.gif> <font color=red>您必须先登录!</font>";
     return false;
    }
    else if(newfourm==""){
     document.getElementById(obj).innerHTML="<img src=images/false.gif> <font color=red>您还没填写评论内容!</font>";
     return false;
    }
    else{
     document.getElementById(obj).innerHTML="正在发送数据...";
     send_request('sendnewfourm.php?username='+username+'&newfourm='+newfourm+'&id='+id);
     reobj=obj;
    }
   }

   有一点ajax基础的通过注释,应该都可以看懂这段代码,我们可以看出,当我们开始发表评论的时候,在一个特定位置先显示:正在发送数据...。接着调用回调函数处理数据。那么请看服务器端的代码:

<?php
  header('Content-Type:text/html;charset=GB2312');//避免输出中文乱码,linux下不需要
  $username=trim($_GET['username']);
  $newfourm=trim($_GET['newfourm']);
  $id=$_GET['id'];
  $time=date("Y-m-d");

  include('inc/config.inc.php');
  include('inc/dbclass.php');
  $db=new db;//从数据库操作类生成实例
  $db->mysql($dbhost,$dbuser,$dbpassword,$dbname);//调用连接参数
函数
  $db->createcon();//调用创建连接函数

  $addsql="insert into cr_fourm values(0,'$newfourm','$username','$time',$id)";
  $db->query($addsql);
  echo"<img src=images/pass.gif> <font color=red>评论已成功发表!</font>";
  //echo $addsql;
  $db->close();//关闭数据库连接
?>

   由于jsvascript采用UTF8编码,在windows下采用ajax回送服务器的返回信息就会出现乱码,因此在win下应用开头第一句是非常必要的。中间那段两个包含文件是数据库操作类和数据库配置信息,我个人习惯将基本的数据库操作写成一个类,方便调用。到这里相信大家已经基本明白这个程序的工作原理了,在给出页面的HTML代码:

<table width="100%" border="0" cellspacing="0" cellpadding="0">
      <tr>
        <td align="center"><?php echo $rows_p[p_info];?></td>
      </tr>
      <tr>
        <td align="center"><br><br><iframe frameborder="0" scrolling="auto" src="showfourm.php?picid=<?=$id;?>" style=HEIGHT:250px;VISIBILITY:inherit;WIDTH:98%;Z-INDEX:2 ></iframe>
</td>
      </tr>
      <tr>
        <td align="center"><br><br>
  <div align="center" id="result"></div>
  <form name="fourm">
  <table width="100%" border="0" cellspacing="0" cellpadding="0">
          <tr>
            <td height="25"> 快速发表评论<span class="STYLE1">(必须先登陆)用户名:
                <input name="username" type="text" value="<?=$username?>" readonly>
            </span></td>
          </tr>
          <tr>
            <td height="32" align="center" valign="middle"><textarea name="newfourm" class="f" id="newfourm"></textarea></td>
          </tr>
          <tr>
            <td height="32"> <input name="submit" type="button" value="发表评论" onClick="checkfourm('result')">
              <input name="reset" type="reset" id="reset" value="重新填写">
            <input name="id" type="hidden" id="id" value="<?php echo"$id";?>"></td>
          </tr>
        </table>
        </form>
        </td>
      </tr>
    </table>

   这是我网页的一部分,也就是实现这一功能的框架代码,显示评论页面用IFRAME(隐藏帧)调用,待信息发送完之后,只刷新IFRAME那一块就可以看到自己发的评论,从发送到查看,整个过程都不需要刷新整个页面。好了,最后看看效果图吧!^_^

   1.点击“提交”,开始发送数据

PHP Ajax实现页面无刷新发表评论

2. 数据发送成功

PHP Ajax实现页面无刷新发表评论

3. 刷新评论列表

PHP Ajax实现页面无刷新发表评论

 

PHP 相关文章推荐
简单的用PHP编写的导航条程序
Oct 09 PHP
echo(),print(),print_r()之间的区别?
Nov 19 PHP
木翼下载系统中说明的PHP安全配置方法
Jun 16 PHP
PHP中的string类型使用说明
Jul 27 PHP
php 广告调用类代码(支持Flash调用)
Aug 11 PHP
PHP数据过滤的方法
Oct 30 PHP
php导出word文档与excel电子表格的简单示例代码
Mar 08 PHP
php实现保存submit内容之后禁止刷新
Mar 19 PHP
使用URL传输SESSION信息
Jul 14 PHP
CI分页类首页、尾页不显示的解决方法
Mar 28 PHP
人脸识别测颜值、测脸龄、测相似度微信接口
Apr 07 PHP
PHP中的use关键字及文件的加载详解
Nov 28 PHP
PHP+AJAX实现无刷新注册(带用户名实时检测)
Jan 02 #PHP
新手学PHP之数据库操作详解及乱码解决!
Jan 02 #PHP
默默小谈PHP&amp;MYSQL分页原理及实现
Jan 02 #PHP
默默简单的写了一个模板引擎
Jan 02 #PHP
超强分页类2.0发布,支持自定义风格,默认4种显示模式
Jan 02 #PHP
PHP小技巧搜集,每个PHPer都来露一手
Jan 02 #PHP
实例(Smarty+FCKeditor新闻系统)
Jan 02 #PHP
You might like
php array_flip() 删除数组重复元素
2009/01/14 PHP
php多层数组与对象的转换实例代码
2013/08/05 PHP
Linux下安装Memcached服务器和客户端与PHP使用示例
2019/04/15 PHP
JavaScript在IE和Firefox浏览器下的7个差异兼容写法小结
2010/06/18 Javascript
JavaScript获取和设置CheckBox状态的简单方法
2013/07/05 Javascript
jquery 简单应用示例总结
2013/08/09 Javascript
input禁止键盘及中文输入,但可以点击
2014/02/13 Javascript
JavaScript及jquey实现多个数组的合并操作
2014/09/06 Javascript
jQuery实现按钮的点击 全选/反选 单选框/复选框 文本框 表单验证
2015/06/25 Javascript
基于jQuery和CSS3制作响应式水平时间轴附源码下载
2015/12/20 Javascript
jQuery密码强度验证控件使用详解
2017/01/05 Javascript
详解Angular CLI + Electron 开发环境搭建
2017/07/20 Javascript
js实现鼠标拖拽多选功能示例
2017/08/01 Javascript
尝试自己动手用react来写一个分页组件(小结)
2018/02/09 Javascript
Vue核心概念Getter的使用方法
2019/01/18 Javascript
webpack4手动搭建Vue开发环境实现todoList项目的方法
2019/05/16 Javascript
JavaScript 扩展运算符用法实例小结【基于ES6】
2019/06/17 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
Python操作串口的方法
2015/06/17 Python
详解Django中Request对象的相关用法
2015/07/17 Python
分析Python中设计模式之Decorator装饰器模式的要点
2016/03/02 Python
在Python中合并字典模块ChainMap的隐藏坑【推荐】
2019/06/27 Python
python2和python3应该学哪个(python3.6与python3.7的选择)
2019/10/01 Python
Python GUI之tkinter窗口视窗教程大集合(推荐)
2020/10/20 Python
领先的钻石和订婚戒指零售商:Diamonds-USA
2016/12/11 全球购物
荷兰鞋子在线:Nelson Schoenen
2017/12/25 全球购物
如果重写了对象的equals()方法,需要考虑什么
2014/11/02 面试题
国际贸易专业推荐信
2013/11/15 职场文书
幼儿园新学期寄语
2014/01/18 职场文书
中介业务员岗位职责
2014/04/09 职场文书
美术课外活动总结
2014/07/08 职场文书
团队拓展活动方案
2014/08/28 职场文书
英语通知范文
2015/04/22 职场文书
银行保安拾金不昧表扬稿
2015/05/05 职场文书
亮剑观后感300字
2015/06/05 职场文书
webpack介绍使用配置教程详解webpack介绍和使用
2022/06/25 Javascript