Discuz!X3.2 Ajax 操作详解及实例(二)：ajaxpost()

bacy001

本节主要介绍 ajaxpost() 的详细使用方法，ajaxpost 与 ajaxget 最大的区别在于：首先，ajaxpost 主要应用在需要使用 ajax 提交表单的场景；

其次，在实现机制上 ajaxpost 通过使用 iframe 元素实现与服务端的异步操作，而 ajaxget 是使用标准的 ajax 异步对象如 XMLHttpRequest 来实现。

1、函数简析
ajaxpost 的源码紧挨着 ajaxget，在 Discuz!X3.2 中的调用过程也与 ajaxget 类似，均是先由 $F() 加载对应的 js 文件（ajax.js），然后具体执行代码放在函数 _ajaxpost() 中，参考源码如下：

1. function _ajaxpost(formid, showid, waitid, showidclass, submitbtn, recall) {
   
2. /* ...... */
   
3. }

复制代码

参数说明：
formid（必填），需要异步提交的表单元素的 ID；
showid（必填），服务端返回值以后，用于显示返回值的 HTML 容器元素的 ID；
waitid，用于显示等待信息的 HTML 容器元素的 ID，默认值等于 showid 的值；
showidclass，定义 showid 所指向的 HTML 容器元素的 class 属性值，即可以通过此参数设定返回信息的样式；
submitbtn，表单提交按钮对象，注意是按钮对象本身；
recall，回调 js，与 ajaxget 中的同名参数一样；

我们注意到参数中没有 URL，在 ajaxget 中，URL 是直接作为参数传入的，而 ajaxpost 则是通过 formid 获取到 form 对象，然后将 form 对象中的 action 值作为异步请求的 URL；submitbtn 的作用则是在异步提交表单的过程中将 submitbtn 对象（提交按钮）禁用，通过

1. submitbtn.disabled = false;

复制代码

实现，并在获取服务端返回值后将其重新赋值为 true，这样提交按钮就又可以点击了，这样的好处是可以防止在提交过程中多次点击提交按钮而引入不必要的错误发生。

ajaxpost 在实现原理上是通过 iframe 框架来达到异步请求的目的，具体步骤如下：
a）JS 代码执行进入 ajaxpost() 以后，首先会创建一个 ID 值为 'ajaxframe' 的 iframe 元素，并把表单对象的 target 属性指向此 iframe 元素；
b）附加一个 load 事件到 a 步骤中创建的 iframe 元素上，并绑定回调 JS 函数 handleResult；
c）处理表单对象的 action 属性，附加 inajax = 1 到 URL 中；
d）使用表单对象的 submit() 方法提交请求到服务端；
e）服务端的返回值将加载到 iframe 对象中，加载完成后会自动调用 handleResult 函数对返回值加以处理；
f）在 handleResult 中会把 iframe 对象中的返回值取出来，并显示在 showid 所指向的 HTML 容器元素中；

2、应用实例，相关代码在上一节实例一代码上直接添加即可
先看表单代码，添加到 test.htm 中：

1. <form action="plugin.php?id=test&act=ajaxpost" method="post" id="ajaxpost" onsubmit="ajaxpost('ajaxpost', 'return_ajaxpost', 'return_ajaxpost','',this.submitbutn, ajaxpost_recall);return false;">
   
2.                 <input type="submit" name="submitbtn">
   
3.         </form>
   
4.         <span id="return_ajaxpost"></span>
   

复制代码

再看服务端代码，添加到 test.inc.php 中：

1. case 'ajaxpost':
   
2.                 sleep(2);
   
3. 
   
4.                 include template('common/header');
   
5.                 echo FORMHASH;
   
6.                 include template('common/footer');
   
7. 
   
8.                 exit;
   

复制代码

我们可以看到，无论 ajaxget 还是 ajaxpost，在服务端的处理其实是无差别的。而且应用场景其实与 ajaxget 也没有太多区别。

本节完