您的位置:晶晶的博客>PHP>浅谈使用jQuery中ajax实现无刷新留言板的功能实现机理

浅谈使用jQuery中ajax实现无刷新留言板的功能实现机理

最近在开发公司网站的留言板,因为没有会员系统的支撑,只能设置留言限制以及无刷新页面隐藏后台处理程序;结果在开发过程中遇到了一系列的问题,但最终还是在我花费大量时间的基础上硬生生的给搞定了。

无刷新页面化实际上靠得就是浏览器内置的xhr对象与服务器进行数据交换,而各个浏览器对xhr对象的支持各异,所以从底层开发代码难免有些兼容性考虑,所以鄙人偷懒的情况下果断使用jQuery的js库来开发该功能。

以下谈谈开发这个留言板过程中的一些心得,依据此次开发使用POST方式提交数据,顺便浅谈一下其实现机理:

jQuery的ajax方法使用如下:

$.ajax({
type: "POST",
url: 'Ajax_message.php',
data: 'name=' + name + '&email=' + email + '&qq=' + qq + '&code=' + code + '&content=' + content + '&do=message',
beforeSend: function() {
jQuery("#layer").empty();
addnotice("留言数据提交中...", "layercontinue");
//
},
success: function(msg) {

}
);

函数说明:在jQuery对象下的ajax方法,其传递数据方法为POST,默认的text方式,连接的服务器脚本未Ajax_message.php,传递的POST数据跟普通HTMl页面传递GET方式数据一致,即data属性,beforeSend、success为状态码,即成功连接服务器之前、之后;还有一个error、dataFilter、complete等均可作为ajax交换数据的一个状态判定,而对于js提示用户方面是非常有用的,就正如setinterval()函数一样;更多的请参考jQuery手册,在线版地址:https://jquery.org.cn/manual/ 离线版下载地址:晶晶博客提供jQuery参考手册 。

具体实现的过程上来说,如下:

1.判定用户输入的数据是否合乎网站留言要求,不符合则不提交数据并提示用户,这个提示过程可以做的漂亮点,可以使用浮动层div来个漂亮的提示;

2.用户数据合格后则执行ajax方法,其中状态码beforeSend可以用以提示用户以及完成浏览器脚本的数据合法性验证,这个状态码以上很明确,在发送数据之前,也就是还未连接服务器脚本之前,这个过程跟网络速度是有关的,如果用户网络拥堵,则可以来个友好的提示,不必让用户觉得浏览器没有反应。

3.服务器返回码进行服务器端用户数据合法性验证,比如code验证码验证,这个使用msg函数就派上用处了,应为在success函数中默认参数为服务器返回字符串注意,此种模式返回类型为字符串!);   比如我的success函数中的msg就是用来作为客户端js脚本的留言状态表示。

4.用户提交的数据经过了服务器端的合法性验证,就必须返回成功标识码,但这个还未完,因为涉及到无刷新,所以还得再次调用ajax方法请求html内容,使用js的append方法载入刚添加的留言l内容到当前html页面的某个位置。ps:如若对用户数据合法性验证要求不严,可以直接读取本地用户输入的数据载入到html页面中,这样可以减轻服务器的一些负担,从个人角度来说,验证数据合法性是一个程序员所必须注重的问题,所以不建议这么做!

至此,使用jQuery中ajax制作留言板的机理阐述完毕,具体的实现方法还得配合PHP来做。当然无关乎服务器脚本的类型,只要能够与浏览器端js交换数据就可以实现,具体实现方法各异。

休一段:

jQuery无刷新留言板实例

 

晶晶在线站长晶晶独家撰写,版权所有,转载请注明来源及作者:晶晶

转载请注明本文标题和链接:《浅谈使用jQuery中ajax实现无刷新留言板的功能实现机理

相关推荐

哟嚯,本文评论功能关闭啦~

  1. #1

    京津冀经济

    7年前 (2017-02-03) 回复
  2. #2

    啊啊啊啊啊啊

    啊啊 9年前 (2015-01-04) 回复
  3. #3

    啊啊啊

    啊啊 10年前 (2014-06-15) 回复
    • @啊啊:啊

      1 6年前 (2018-01-28) 回复