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中的一个中文字符串截取函数
Feb 14 PHP
15种PHP Encoder的比较
Apr 17 PHP
PHP 网络开发详解之远程文件包含漏洞
Apr 25 PHP
PHP 文件上传全攻略
Apr 28 PHP
php 获取本机外网/公网IP的代码
May 09 PHP
php下保存远程图片到本地的办法
Aug 08 PHP
基于preg_match_all采集后数据处理的一点心得笔记(编码转换和正则匹配)
Jan 31 PHP
PHP检测用户语言的方法
Jun 15 PHP
php生成PDF格式文件并且加密
Jun 22 PHP
thinkPHP事务操作简单案例分析
Oct 17 PHP
自定义Laravel (monolog)日志位置,并增加请求ID的实现
Oct 17 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
全国FM电台频率大全 - 24 贵州省
2020/03/11 无线电
PHP zip扩展Linux下安装过程分享
2014/05/05 PHP
YII Framework框架教程之使用YIIC快速创建YII应用详解
2016/03/15 PHP
Smarty高级应用之缓存操作技巧分析
2016/05/14 PHP
PHP微信公众号自动发送红包API
2016/06/01 PHP
php单链表实现代码分享
2016/07/04 PHP
PHP7.1方括号数组符号多值复制及指定键值赋值用法分析
2016/09/26 PHP
PHP获取当前日期及本周一是几月几号的方法
2017/03/28 PHP
PHP数组式访问接口ArrayAccess用法分析
2017/12/28 PHP
php+mysql开发中的经验与常识小结
2019/03/25 PHP
js获得鼠标的坐标值的方法
2013/03/13 Javascript
页面载入结束自动调用js函数示例
2013/09/23 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
js实现按钮加背景图片常用方法
2014/11/01 Javascript
javascript实现图片上传前台页面
2015/08/18 Javascript
利用JS生成博文目录及CSS定制博客
2016/02/10 Javascript
快速入门Vue
2016/12/19 Javascript
jQuery取得元素标签名称小结(附代码)
2017/08/16 jQuery
利用Angular2 + Ionic3开发IOS应用实例教程
2018/01/15 Javascript
详解jQuery获取特殊属性的值以及设置内容
2018/11/14 jQuery
解决Vue-cli3没有vue.config.js文件夹及配置vue项目域名的问题
2020/12/04 Vue.js
Python遍历目录中的所有文件的方法
2016/07/08 Python
有关Python的22个编程技巧
2018/08/29 Python
在django中自定义字段Field详解
2019/12/03 Python
pandas分组聚合详解
2020/04/10 Python
pycharm如何设置官方中文(如何汉化)
2020/12/29 Python
详解matplotlib绘图样式(style)初探
2021/02/03 Python
初中英语教学反思
2014/01/25 职场文书
亲子读书活动方案
2014/02/22 职场文书
最美乡村医生事迹材料
2014/06/02 职场文书
企业挂职心得体会
2014/09/10 职场文书
2014年驾驶员工作总结
2014/11/18 职场文书
股东出资协议书
2016/03/21 职场文书
你喜欢篮球吗?Python实现篮球游戏
2021/06/11 Python
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
2021/06/26 Python
Python使用psutil库对系统数据进行采集监控的方法
2021/08/23 Python