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
小偷PHP+Html+缓存
Nov 25 PHP
PHP 编程安全性小结
Jan 08 PHP
url decode problem 解决方法
Dec 26 PHP
浅析PHP的ASCII码转换类
Jul 05 PHP
php 类中的常量、静态属性、非静态属性的区别
Apr 09 PHP
Windows下php+mysql5.7配置教程
May 16 PHP
PHP实现登录注册之BootStrap表单功能
Sep 03 PHP
PHP 应用容器化以及部署方法
Feb 12 PHP
PHP 二维array转换json的实例讲解
Aug 21 PHP
PHP 获取客户端 IP 地址的方法实例代码
Nov 11 PHP
PHP CURL使用详解
Mar 21 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
ThinkPHP 3.2 版本升级了哪些内容
2015/03/05 PHP
BOOM vs RR BO3 第二场2.13
2021/03/10 DOTA
JavaScript定时器详解及实例
2013/08/01 Javascript
javascript实现简单查找与替换的方法
2015/07/22 Javascript
Node.js中使用jQuery的做法
2016/08/17 Javascript
JS实现一次性弹窗的方法【刷新后不弹出】
2016/12/26 Javascript
jQuery实现简易的输入框字数计数功能示例
2017/01/16 Javascript
js控制按钮,防止频繁点击响应的实例
2017/02/15 Javascript
vuejs开发组件分享之H5图片上传、压缩及拍照旋转的问题处理
2017/03/06 Javascript
基于JavaScript 性能优化技巧心得(分享)
2017/12/11 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
JS脚本实现定时到网站上签到/签退功能
2020/04/22 Javascript
Vue 禁用浏览器的前进后退操作
2020/09/04 Javascript
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
python对指定目录下文件进行批量重命名的方法
2015/04/18 Python
详解python使用递归、尾递归、循环三种方式实现斐波那契数列
2018/01/16 Python
使用pandas read_table读取csv文件的方法
2018/07/04 Python
python PyQt5/Pyside2 按钮右击菜单实例代码
2019/08/17 Python
对Python 中矩阵或者数组相减的法则详解
2019/08/26 Python
python爬虫爬取笔趣网小说网站过程图解
2019/11/18 Python
详解如何在pyqt中通过OpenCV实现对窗口的透视变换
2020/09/20 Python
世界上最好的精品店:Shoptiques
2018/02/05 全球购物
Wedgwood英国官方网站:英式精致骨瓷餐具、礼品与生活精品,源于1759年
2019/09/02 全球购物
MUGLER官方网站:蒂埃里·穆勒香水
2019/11/26 全球购物
请写出 BOOL flag 与"零值"比较的 if 语句
2016/02/29 面试题
成品库仓管员岗位职责
2014/04/06 职场文书
《有趣的发现》教学反思
2014/04/15 职场文书
感恩父母的演讲稿
2014/05/06 职场文书
财务整改报告范文
2014/11/05 职场文书
幼儿园三八妇女节活动总结
2015/02/06 职场文书
婚庆司仪开场白
2015/05/29 职场文书
nginx常用命令放入shell脚本详解
2021/03/31 Servers
Python 使用dict实现switch的操作
2021/04/07 Python
golang 语言中错误处理机制
2021/08/30 Golang
JavaScript中时间格式化新思路toLocaleString()
2021/11/07 Javascript
Python Numpy库的超详细教程
2022/04/06 Python