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基础知识:类与对象(1)
Dec 13 PHP
php 页面执行时间计算代码
Dec 04 PHP
php实现的仿阿里巴巴实现同类产品翻页
Dec 11 PHP
采用PHP函数memory_get_usage获取PHP内存清耗量的方法
Dec 06 PHP
php分页函数示例代码分享
Feb 24 PHP
PHP之sprintf函数用法详解
Nov 12 PHP
PHP获取毫秒级时间戳的方法
Apr 15 PHP
PHP实现根据银行卡号判断银行
Apr 29 PHP
PHP在线书签系统分享
Jan 04 PHP
PHP自带方法验证邮箱、URL、IP是否合法的函数
Dec 08 PHP
Yii 2.0在Grid中格式化时间方法示例
Jun 06 PHP
PHP APP微信提现接口代码
Sep 30 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中header和session_start前不能有输出原因分析
2013/01/11 PHP
微信公众号实现会员卡领取功能
2017/06/08 PHP
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
JavaScript prototype对象的属性说明
2010/03/13 Javascript
Javascript 面向对象编程(一) 封装
2011/08/28 Javascript
文本框根据输入内容自适应高度的代码
2011/10/24 Javascript
Js四则运算函数代码
2012/07/21 Javascript
Jquery实现带动画效果的经典二级导航菜单
2013/03/22 Javascript
js 与 php 通过json数据进行通讯示例
2014/03/26 Javascript
nodejs 实现模拟form表单上传文件
2014/07/14 NodeJs
node.js中Socket.IO的进阶使用技巧
2014/11/04 Javascript
基于jQuey实现鼠标滑过变色(整行变色)
2015/12/07 Javascript
jQuery图片前后对比插件beforeAfter用法示例【附demo源码下载】
2016/09/20 Javascript
快速实现JS图片懒加载(可视区域加载)示例代码
2017/01/04 Javascript
ajax 提交数据到后台jsp页面及页面跳转问题
2017/01/19 Javascript
html5 canvas 详细使用教程
2017/01/20 Javascript
20170918 前端开发周报之JS前端开发必看
2017/09/18 Javascript
Node做中转服务器转发接口
2017/10/18 Javascript
VUE解决微信签名及SPA微信invalid signature问题(完美处理)
2019/03/29 Javascript
利用原生JavaScript实现造日历轮子实例代码
2019/05/08 Javascript
bootstrap table列和表头对不齐的解决方法
2019/07/19 Javascript
jQuery实现倒计时功能完整示例
2020/06/01 jQuery
Django1.3添加app提示模块不存在的解决方法
2014/08/26 Python
python 读写txt文件 json文件的实现方法
2016/10/22 Python
利用Python yagmail三行代码实现发送邮件
2018/05/11 Python
python简单操作excle的方法
2018/09/12 Python
python中使用zip函数出现错误的原因
2018/09/28 Python
python启动应用程序和终止应用程序的方法
2019/06/28 Python
python爬虫调度器用法及实例代码
2020/11/30 Python
思想品德自我鉴定
2013/10/12 职场文书
县政府领导班子“四风”方面突出问题整改措施
2014/09/23 职场文书
办理收楼委托书范本
2014/10/09 职场文书
先进个人材料怎么写
2014/12/30 职场文书
《揠苗助长》教学反思
2016/02/20 职场文书
2016年学校安全教育月活动总结
2016/04/06 职场文书
Python中with上下文管理协议的作用及用法
2022/03/18 Python