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生成缩略图的函数代码(修改版)
Jan 18 PHP
php下批量挂马和批量清马代码
Feb 27 PHP
php模拟socket一次连接,多次发送数据的实现代码
Jul 26 PHP
PHP 线程安全与非线程安全版本的区别深入解析
Aug 06 PHP
php导出csv格式数据并将数字转换成文本的思路以及代码分享
Jun 05 PHP
php实现屏蔽掉黑帽SEO的搜索关键字
Apr 15 PHP
postfixadmin忘记密码后的修改密码方法详解
Jul 20 PHP
php无限级分类实现方法分析
Oct 19 PHP
php对xml文件的增删改查操作实现方法分析
May 19 PHP
PHP实现对xml的增删改查操作案例分析
May 19 PHP
[原创]PHP实现SQL语句格式化功能的方法
Jul 28 PHP
PHP5.6读写excel表格文件操作示例
Feb 26 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队列用法实例
2014/11/05 PHP
PHP+MySQL修改记录的方法
2015/01/21 PHP
javascript编程起步(第二课)
2007/02/27 Javascript
通过jQuery打造支持汉字,拼音,英文快速定位查询的超级select插件
2010/06/18 Javascript
jQuery EasyUI API 中文文档 搜索框
2011/09/29 Javascript
js通过八个点 拖动改变div大小的实现方法
2014/03/05 Javascript
限制文本框只能输入数字||只能是数字和小数点||只能是整数和浮点数
2016/05/27 Javascript
使用Require.js封装原生js轮播图的实现代码
2017/06/15 Javascript
JavaScript定义及输出螺旋矩阵的方法详解
2017/12/01 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
ES5 模拟 ES6 的 Symbol 实现私有成员功能示例
2020/05/06 Javascript
微信小程序清空输入框信息与实现屏幕往上滚动的示例代码
2020/06/23 Javascript
浅谈vue 多个变量同时赋相同值互相影响
2020/08/05 Javascript
python共享引用(多个变量引用)示例代码
2013/12/04 Python
Python网络编程详解
2017/10/31 Python
Python返回数组/List长度的实例
2018/06/23 Python
用Python逐行分析文件方法
2019/01/28 Python
python 调用pyautogui 实时获取鼠标的位置、移动鼠标的方法
2019/08/27 Python
Python异常模块traceback用法实例分析
2019/10/22 Python
使用python去除图片白色像素的实例
2019/12/12 Python
Python ini文件常用操作方法解析
2020/04/26 Python
python能否java成为主流语言吗
2020/06/22 Python
Python制作一个仿QQ办公版的图形登录界面
2020/09/22 Python
html5中的input新属性range使用记录
2014/09/05 HTML / CSS
Omio西班牙:全欧洲低价大巴、火车和航班搜索和比价
2017/02/11 全球购物
高山背包:High Sierra
2017/11/23 全球购物
面向对象编程OOP的优点
2013/01/22 面试题
大专生的学习自我评价
2013/12/04 职场文书
法院先进个人事迹材料
2014/05/04 职场文书
保护环境标语
2014/06/09 职场文书
法制宣传标语集锦
2014/06/25 职场文书
社团活动总结怎么写
2014/06/30 职场文书
个人主要事迹材料
2014/08/26 职场文书
用python自动生成日历
2021/04/24 Python