示例

Ajax Form 允许以 Ajax 的形式提交表单,并针对服务器返回的 JSON 结果做出反馈。

<form id="ajaxFormExample" action="doc/part/ajax-form-example.json">
  <div class="control">
    <input type="text" class="input" placeholder="请输入用户名">
  </div>
  <button class="btn primary" type="submit">提交</button>
</form>
$('#ajaxFormExample').ajaxform({
    onResult: function(response) {
        // 处理服务器返回的结果
    } 
});
事件

事件的回调函数通过选项进行设定。

init

当初始化之后触发。

onSubmit

当前用户开始提交表单并在发送表单数据到服务器之前时触发,此时可以更改提交的数据。

该事件回调函数拥有一个参数 formData,表示当前表单要提交的数据,在回调函数中可以更改或追加要提交的数据。

onResponse

当服务器返回结果时触发。

该事件回调函数拥有两个参数:

如果在此回调函数中返回 false,则会终止这次处理,如果返回字符串或者对象,则使用返回的内容作为下一步要处理的内容(这意味着可以在这个回调函数中更改或转换服务器返回的数据)。

onSuccess

当服务器返回了正确的 JSON 结果时触发,不同于 onResult,此事件仅仅在服务器返回了正确的 JSON 格式结果。

该事件回调函数拥有一个参数 response,表示服务器响应的内容,如果内容是 JSON,则 response 为 JSON 对象。

如果在该事件回调函数中返回 false,则终止默认处理方式。

onError

当服务器返回了错误时触发。

该事件回调函数参数定义如下:

如果在该事件回调函数中返回 false,则终止默认处理方式。

onComplete

当请求完成时触发,无论是否发生错误。

改事件回调函数拥有一个参数 data,存储了服务器响应的内容和状态。

服务器结果

Ajax form 默认处理过程只针对服务器返回的 JSON 格式内容,否则不会作进一步处理。

JSON 对象上可解析字段如下:

result

指示当前提交是否已被被服务器接受,可取值:'success''fail'

message

设定一条消息,请求完成之后以漂浮消息的形式提示用户。

locate

指定一个网址,服务器返回提交被成功接受之后让页面跳转到该值指示的网址。