Discuz!X 源码分析之 ajaxpost() 函数
函数简介: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):
showid:(必填)ajax 返回信息显示区域的 id;即代码2中的“fastpostreturn”
代码2、ajaxpost 返回信息的显示区域(forum/viewthread)
waitid:ajax 请求过程中显示等待信息区域的 id;默认与showid相同
showidclass:表单提交后返回信息显示区域的样式;
submitbtn:表单提交按钮, ajax 请求发出后将会禁用这个按钮;即代码3中的“fastpostsubmit”
代码3、表单提交按钮(forum/viewthread) :
<button type="submit" name="replysubmit" id="fastpostsubmit" class="pn pnc vm" value="replysubmit" tabindex="5"><strong>发表回复</strong></button>
recall:信息返回后执行的代码,即回调函数
调用流程:
1、当用户点击“发表回复”按钮后,将触发表单提交,进而触发代码1中的如下代码:
2、进入 fastpostvalidate 函数处理流程,该函数首先检查用户输入,比如是否输入标题,标题是否过长,帖子是否过长等等;然后禁用“发表回复”按钮,最后调用 ajaxpost 函数,调用代码如下:
3、进入 ajaxpost 函数处理流程,该函数首先创建一个 div 元素,元素内容为一个 <iframe> 标签,并将其动态的添加到 id 为 “append_parent” 的元素下面!此元素在所有 Discuz 页头模版中均有包含,代码如下:
4、紧接着为上一步中创建的 <iframe> 标签绑定 load 事件,并指定事件处理函数为,代码如下:
5、随后 ajaxpost 将修改原始表单的 target 属性,使其指向新建的 <iframe> ,并主动触发提交表单,同时重新使能第二步中禁用的“发表回复”按钮。代码如下:
6、当表单正常提交后,相关数据将返回到新建的 <iframe> 中,当 load 完成后,会触发函数“handleResult”;此函数的主要功能为:获取 <iframe> 中的内容,文本内容,将在“showid”中显示,脚本内容将即时执行。我们看到的无刷新添加回复内容正是由返回的函数动态执行的!返回的内容如下:
可以看到 ajaxpost 并没有使用传统的 XMLHttprequest 对象!而是利用了 iframe 来实现异步存取数据!
了解了这个流程以后,便可以自行使用 ajaxpost 来实现 ajax 功能了!
函数原型:function ajaxpost(formid, showid, waitid, showidclass, submitbtn, recall)
所属文件:common.js
参数说明及示例关键代码:
formid:(必填)ajax 提交的表单 id;即代码1中的“fastpostform”
代码1、调用 ajaxpost 的表单,并不是直接调用,而是通过 fastpostvalidate() 间接调用(forum/viewthread):
- <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)
- <span id="fastpostreturn"></span>
waitid:ajax 请求过程中显示等待信息区域的 id;默认与showid相同
showidclass:表单提交后返回信息显示区域的样式;
submitbtn:表单提交按钮, ajax 请求发出后将会禁用这个按钮;即代码3中的“fastpostsubmit”
代码3、表单提交按钮(forum/viewthread) :
<button type="submit" name="replysubmit" id="fastpostsubmit" class="pn pnc vm" value="replysubmit" tabindex="5"><strong>发表回复</strong></button>
recall:信息返回后执行的代码,即回调函数
调用流程:
1、当用户点击“发表回复”按钮后,将触发表单提交,进而触发代码1中的如下代码:
- onsubmit="return fastpostvalidate(this)"
2、进入 fastpostvalidate 函数处理流程,该函数首先检查用户输入,比如是否输入标题,标题是否过长,帖子是否过长等等;然后禁用“发表回复”按钮,最后调用 ajaxpost 函数,调用代码如下:
- ajaxpost('fastpostform', 'fastpostreturn', 'fastpostreturn', 'onerror', $('fastpostsubmit'));
3、进入 ajaxpost 函数处理流程,该函数首先创建一个 div 元素,元素内容为一个 <iframe> 标签,并将其动态的添加到 id 为 “append_parent” 的元素下面!此元素在所有 Discuz 页头模版中均有包含,代码如下:
- <div id="append_parent">...</div>
4、紧接着为上一步中创建的 <iframe> 标签绑定 load 事件,并指定事件处理函数为,代码如下:
- _attachEvent(ajaxframe, 'load', handleResult);
5、随后 ajaxpost 将修改原始表单的 target 属性,使其指向新建的 <iframe> ,并主动触发提交表单,同时重新使能第二步中禁用的“发表回复”按钮。代码如下:
- $(formid).action = action.replace(/\&inajax\=1/g, '')+'&inajax=1'; $(formid).submit();
6、当表单正常提交后,相关数据将返回到新建的 <iframe> 中,当 load 完成后,会触发函数“handleResult”;此函数的主要功能为:获取 <iframe> 中的内容,文本内容,将在“showid”中显示,脚本内容将即时执行。我们看到的无刷新添加回复内容正是由返回的函数动态执行的!返回的内容如下:
- <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 功能了!