请选择 进入手机版 | 继续访问电脑版

Bacysoft.cn

 找回密码
 邀请注册
查看: 19484|回复: 0

Discuz!X 源码分析之 ajaxpost() 函数

[复制链接]
发表于 2013-7-26 20:47:23 | 显示全部楼层 |阅读模式
本帖最后由 bacy001 于 2013-11-15 15:01 编辑
本帖含有隐含内容,如果您看不到相关代码请移步:http://www.bacysoft.cn/thread-88-1-1.html,成功注册为会员后方可访问完整内容!

函数简介:ajaxpost() 函数是 Discuz!X 系统中很重要的一个函数,是 Discuz!X 系统中 实现 Ajax 功能的重要组成部分,在整个源码中有上百次调用,掌握 ajaxpost 的工作原理和使用方法对于理解Discuz!X系统的 Ajax 机制和针对 Discuz!X系统的二次开发都将大有裨益。下面将以论坛帖子页面的下方的快速回复为例,讲解 ajaxpost 的工作原理。

函数原型:function ajaxpost(formid, showid, waitid, showidclass, submitbtn, recall)
所属文件:common.js

参数说明及示例关键代码:
formid:(必填)ajax 提交的表单 id;即代码1中的“fastpostform”
代码1、调用 ajaxpost 的表单,并不是直接调用,而是通过 fastpostvalidate() 间接调用(forum/viewthread):
  1. <form method="post" autocomplete="off" id="fastpostform" action="forum.php?mod=post&action=reply&fid=2&tid=2&extra=page%3D1&replysubmit=yes&infloat=yes&handlekey=fastpost" onsubmit="return fastpostvalidate(this)">
复制代码
showid:(必填)ajax 返回信息显示区域的 id;即代码2中的“fastpostreturn”
代码2、ajaxpost 返回信息的显示区域(forum/viewthread) :
  1. <span id="fastpostreturn"></span>
复制代码
waitid:ajax 请求过程中显示等待信息区域的 id;默认与showid相同
showidclass:表单提交后返回信息显示区域的样式;
submitbtn:表单提交按钮, ajax 请求发出后将会禁用这个按钮;即代码3中的“fastpostsubmit”
代码3、表单提交按钮(forum/viewthread) :
  1. <button type="submit" name="replysubmit" id="fastpostsubmit" class="pn pnc vm" value="replysubmit" tabindex="5"><strong>发表回复</strong></button>
复制代码
recall:信息返回后执行的代码,即回调函数

调用流程:
1、当用户点击“发表回复”按钮后,将触发表单提交,进而触发代码1中的如下代码:
  1. onsubmit="return fastpostvalidate(this)"
复制代码
2、进入 fastpostvalidate 函数处理流程,该函数首先检查用户输入,比如是否输入标题,标题是否过长,帖子是否过长等等;然后禁用“发表回复”按钮,最后调用 ajaxpost 函数,调用代码如下:
  1. ajaxpost('fastpostform', 'fastpostreturn', 'fastpostreturn', 'onerror', $('fastpostsubmit'));
复制代码
3、进入 ajaxpost 函数处理流程,该函数首先创建一个 div 元素,元素内容为一个 <iframe> 标签,并将其动态的添加到 id 为 “append_parent” 的元素下面!此元素在所有 Discuz 页头模版中均有包含,代码如下:
  1. <div id="append_parent">...</div>
复制代码
4、紧接着为上一步中创建的 <iframe> 标签绑定 load 事件,并指定事件处理函数为,代码如下:
  1. _attachEvent(ajaxframe, 'load', handleResult);
复制代码
5、随后 ajaxpost 将修改原始表单的 target 属性,使其指向新建的 <iframe> ,并主动触发提交表单,同时重新使能第二步中禁用的“发表回复”按钮。代码如下:
  1.         $(formid).action = action.replace(/\&inajax\=1/g, '')+'&inajax=1';
  2.         $(formid).submit();
复制代码
6、当表单正常提交后,相关数据将返回到新建的 <iframe> 中,当 load 完成后,会触发函数“handleResult”;此函数的主要功能为:获取 <iframe> 中的内容,文本内容,将在“showid”中显示,脚本内容将即时执行。我们看到的无刷新添加回复内容正是由返回的函数动态执行的!返回的内容如下:
  1. <root><![CDATA[<script type="text/javascript" reload="1">if(typeof succeedhandle_fastpost=='function') {succeedhandle_fastpost('forum.php?mod=viewthread&tid=2&pid=27&page=1&extra=page%3D1#pid27', '非常感谢,回复发布成功,现在将转入主题页,请稍候……[ 点击这里转入主题列表 ]', {'f]]><![CDATA[id':'2','tid':'2','pid':'27','from':'','sechash':''});}</script>]]></root>
复制代码
可以看到 ajaxpost 并没有使用传统的 XMLHttprequest 对象!而是利用了 iframe 来实现异步存取数据!

了解了这个流程以后,便可以自行使用 ajaxpost 来实现 ajax 功能了!
您需要登录后才可以回帖 登录 | 邀请注册

本版积分规则



阿里云|腾讯云|联系方式|Bacysoft.cn ( 京ICP备08000958号-1 )

GMT+8, 2019-8-24 20:30 , Processed in 0.017864 second(s), 27 queries , Gzip On.

Powered by Discuz! X3.3

© 2001-2017 Comsenz Inc.

快速回复 返回顶部 返回列表