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中break及continue两个流程控制指令区别分析
Apr 18 PHP
PHP Curl多线程原理实例详解
Nov 06 PHP
php循环创建目录示例分享(php创建多级目录)
Mar 04 PHP
调试PHP程序的多种方法介绍
Nov 06 PHP
thinkphp3.2.2实现生成多张缩略图的方法
Dec 19 PHP
php无序树实现方法
Jul 28 PHP
php轻松实现文件上传功能
Mar 03 PHP
php实现带读写分离功能的MySQL类完整实例
Jul 28 PHP
php 时间time与日期date之间的使用详解及区别
Nov 07 PHP
php获取文章内容第一张图片的方法示例
Jul 03 PHP
详解thinkphp的Auth类认证
May 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将数据导入到Foxmail
2006/10/09 PHP
PHP4与PHP3中一个不兼容问题的解决方法
2006/10/09 PHP
laravel migrate初学常见错误的解决方法
2017/10/11 PHP
thinkphp5框架API token身份验证功能示例
2019/05/21 PHP
[HTML/CSS/Javascript]WWTJS
2007/09/25 Javascript
Google Map Api和GOOGLE Search Api整合实现代码
2009/07/18 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
jQuery背景插件backstretch使用指南
2015/04/21 Javascript
Jquery跨域获得Json的简单实例
2016/05/18 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
轻松理解JavaScript之AJAX
2017/03/15 Javascript
bootstrap是什么_动力节点Java学院整理
2017/07/14 Javascript
Javascript实现找不同色块的游戏
2017/07/17 Javascript
浅谈webpack4.x 入门(一篇足矣)
2018/09/05 Javascript
vue实现微信分享功能
2018/11/28 Javascript
python中as用法实例分析
2015/04/30 Python
Python可变参数用法实例分析
2017/04/02 Python
Django实现快速分页的方法实例
2017/10/22 Python
python实现excel读写数据
2021/03/02 Python
pandas.loc 选取指定列进行操作的实例
2018/05/18 Python
python lxml中etree的简单应用
2019/05/10 Python
opencv python Canny边缘提取实现过程解析
2020/02/03 Python
基于Python pyecharts实现多种图例代码解析
2020/08/10 Python
python利用appium实现手机APP自动化的示例
2021/01/26 Python
python实现杨辉三角的几种方法代码实例
2021/03/02 Python
Html5上传图片 移动端、PC端通用代码
2016/06/08 HTML / CSS
美国专营婴幼儿用品的购物网站:buybuy BABY
2017/01/01 全球购物
世界上最具创新性的增强型知名运动品牌:Proviz
2018/04/03 全球购物
德国健康生活方式网上商店:Landkaufhaus Mayer
2019/03/12 全球购物
中医专业职业生涯规划书范文
2014/01/04 职场文书
圣诞节活动策划方案
2014/06/09 职场文书
2014年信息中心工作总结
2014/12/17 职场文书
公司介绍信范文
2015/01/31 职场文书
重阳节简报
2015/07/20 职场文书
乡镇团代会开幕词
2016/03/04 职场文书
浅析Python中的随机采样和概率分布
2021/12/06 Python