Jquery.form.js与ajax方式

本是古典何须时尚 2022-05-24 05:04 178阅读 0赞

最开始，我们使用ajax提交表单，统一采用的是jquery的ajax函数，如下：

要么绑定函数到按钮的onclick事件上执行$.ajax，要么在submit()中，使用$.ajax执行。

如下：

\[javascript\]  [view plain][]   [copy][view plain]

1.  $(**function**()\{  
2.         $('\#myForm').submit(**function**()\{  
3.             $.ajax(\{  
4.                 url:"/WebTest/test/testJson.do",  
5.                 data:$('\#myForm').serialize(),  
6.                 dataType:"json",  
7.                 error:**function**(data)\{  
8.                     alert(data);  
9.                 \},  
10.                success:**function**(data)\{  
11.                    alert(data);  
12.                \}  
13.            \});  
14.        \});          
15.    \})

虽然功能上没有问题，但覆盖掉form自身的提交方法，美感上略显不足。

后来Jquery.form.js横空出世。

其中两个核心函数：ajaxForm和ajaxSubmit

1、ajaxForm()一般放在$(document).ready中配置，配置完之后，并不是马上的提交，而是要等submit()事件，它只是一个准备。

ajaxForm配置接受0个或1个参数。这个单个的参数既可以是一个回调函数，也可以是一个Options对象。

该函数可链接（Chainable）。

大多数情况下，我们会增加自己需要的事件监听器

一般用法（示例来自官网）：

\[javascript\]  [view plain][]   [copy][view plain]

1.  $(document).ready(**function**() \{   
2.      **var** options = \{   
3.          target:        '\#output1',   // target element(s) to be updated with server response   
4.          beforeSubmit:  showRequest,  // pre-submit callback   
5.          success:       showResponse  // post-submit callback   
6.     
7.          // other available options:   
8.          //url:       url         // override for form's 'action' attribute   
9.          //type:      type        // 'get' or 'post', override for form's 'method' attribute   
10.         //dataType:  null        // 'xml', 'script', or 'json' (expected server response type)   
11.         //clearForm: true        // clear all form fields after successful submit   
12.         //resetForm: true        // reset the form after successful submit   
13.    
14.         // $.ajax options can be used here too, for example:   
15.         //timeout:   3000   
16.     \};   
17.    
18.     // bind form using 'ajaxForm'   
19.     $('\#myForm1').ajaxForm(options).submit(**function**()\{ **return** **false**;\});   
20. \});

2、ajaxSubmit 马上由AJAX来提交表单，它与ajaxForm最大的区别在于一个马上提交表单，一个不马上提交。大多数情况下，都是调用ajaxSubmit来对用户提交表单进行响应。ajaxSubmit接受0个或1个参数。这个单个的参数既可以是一个回调函数，也可以是一个Options对象。 可链接（Chainable）

一般用法（示例来自官网）：

\[javascript\]  [view plain][]   [copy][view plain]

1.  $(document).ready(**function**() \{   
2.      **var** options = \{   
3.          target:        '\#output2',   // target element(s) to be updated with server response   
4.          beforeSubmit:  showRequest,  // pre-submit callback   
5.          success:       showResponse  // post-submit callback   
6.     
7.          // other available options:   
8.          //url:       url         // override for form's 'action' attribute   
9.          //type:      type        // 'get' or 'post', override for form's 'method' attribute   
10.         //dataType:  null        // 'xml', 'script', or 'json' (expected server response type)   
11.         //clearForm: true        // clear all form fields after successful submit   
12.         //resetForm: true        // reset the form after successful submit   
13.    
14.         // $.ajax options can be used here too, for example:   
15.         //timeout:   3000   
16.     \};   
17.    
18.     // bind to the form's submit event   
19.     $('\#myForm2').submit(**function**() \{   
20.         // inside event callbacks 'this' is the DOM element so we first   
21.         // wrap it in a jQuery object and then invoke ajaxSubmit   
22.         $(**this**).ajaxSubmit(options);   
23.    
24.         // !!! Important !!!   
25.         // always return false to prevent standard browser submit and page navigation   
26.         **return** **false**;   
27.     \});   
28. \});

Options对象

ajaxForm和ajaxSubmit都支持众多的选项参数，这些选项参数可以使用一个Options对象来提供。Options只是一个JavaScript对象，它包含了如下一些属性与值的集合：

target

指明页面中由服务器响应进行更新的元素。元素的值可能被指定为一个jQuery选择器字符串，一个jQuery对象，或者一个DOM元素。

默认值：null。

url

指定提交表单数据的URL。

默认值：表单的action属性值

type

指定提交表单数据的方法（method）：“GET”或“POST”。

默认值：表单的method属性值（如果没有找到默认为“GET”）。

beforeSubmit

表单提交前被调用的回调函数。“beforeSubmit”回调函数作为一个钩子（hook），被提供来运行预提交逻辑或者校验表单数据。如果“beforeSubmit”回调函数返回false，那么表单将不被提交。“beforeSubmit”回调函数带三个调用参数：数组形式的表单数据，jQuery表单对象，以及传入ajaxForm/ajaxSubmit中的Options对象。表单数组接受以下方式的数据：

\[ \{ name: 'username', value: 'jresig' \}, \{ name: 'password', value: 'secret' \} \]

默认值：null

success

表单成功提交后调用的回调函数。如果提供“success”回调函数，当从服务器返回响应后它被调用。然后由dataType选项值决定传回responseText还是responseXML的值。

默认值：null

dataType

期望返回的数据类型。null、“xml”、“script”或者“json”其中之一。dataType提供一种方法，它规定了怎样处理服务器的响应。这个被直接地反映到jQuery.httpData方法中去。下面的值被支持：

'xml'：如果dataType == 'xml'，将把服务器响应作为XML来对待。同时，如果“success”回调方法被指定， 将传回responseXML值。

'json'：如果dataType == 'json'， 服务器响应将被求值，并传递到“success”回调方法，如果它被指定的话。

'script'：如果dataType == 'script'， 服务器响应将求值成纯文本。

默认值：null（服务器返回responseText值）

resetForm

布尔标志，表示如果表单提交成功是否进行重置。

Default value: null

clearForm

布尔标志，表示如果表单提交成功是否清除表单数据。

默认值：null

参数小结一下：

target        返回的结果将放到这个target下

url           如果定义了，将覆盖原form的action

type          get和post两种方式

dataType      返回的数据类型，可选：json、xml、script

clearForm     true，表示成功提交后清除所有表单字段值

resetForm     true，表示成功提交后重置所有字段

iframe        如果设置，表示将使用iframe方式提交表单

beforeSerialize    数据序列化前：function($form,options)\{\}

beforeSubmit  提交前：function(arr,$from,options)\{\}

success       提交成功后：function(data,statusText)\{\}

error         错误：function(data)\{alert(data.message);\}

3、jquery.form.js除了以上核心api外，还有几个不可缺少的辅助api

formSerialize

将表单串行化（或序列化）成一个查询字符串。这个方法将返回以下格式的字符串：name1=value1&name2=value2。

可链接（Chainable）：不能， 这个方法返回一个字符串。

实例：

var queryString = $('\#myFormId').formSerialize();

fieldSerialize

将表单的字段元素串行化（或序列化）成一个查询字符串。当只有部分表单字段需要进行串行化（或序列化）时，这个就方便了。这个方法将返回以下格式的字符串：name1=value1&name2=value2。

可链接（Chainable）：不能，这个方法返回一个字符串。

实例：

var queryString = $('\#myFormId .specialFields').fieldSerialize();

fieldValue

返回匹配插入数组中的表单元素值。从0.91版起，该方法将总是以数组的形式返回数据。如果元素值被判定可能无效，则数组为空，否则它将包含一个或多于一个的元素值。

可链接（Chainable）：不能，该方法返回数组。

实例：

var value = $('\#myFormId :password').fieldValue();

alert('The password is: ' + value\[0\]);

resetForm

通过调用表单元素原有的DOM方法，将表单恢复到初始状态。  可链接（Chainable）：可以。

实例：

$('\#myFormId').resetForm();

clearForm

清除表单元素。该方法将所有的文本（text）输入字段、密码（password）输入字段和文本区域（textarea）字段置空，清除任何select元素中的选定，以及将所有的单选（radio）按钮和多选（checkbox）按钮重置为非选定状态。  可链接（Chainable）：可以。

实例：

$('\#myFormId').clearForm();

clearFields

清除字段元素。只有部分表单元素需要清除时才方便使用。  可链接（Chainable）：可以。

实例：

$('\#myFormId .specialFields').clearFields();

用得多了，总是不经意间想去看看这个东西的全貌，甚至想去看看人家是怎么实现的，看了之后才发现自己对jquery的理解还是浅薄了，怎么人家封出来的东西无论从易用性和美感上都那么精妙呢，自己需要学习的还有很多啊，得多借鉴别人的东西，不能自己闷头造车了。

后续会做一个小项目，使用全ajax，json方式，严格实现前后端的分离，彻底摒弃返回JSP的方式，回归纯html页面，不知道性能表现如何，有兴趣的可以一起研究下。

转自：https://blog.csdn.net/shan9liang/article/details/41604637

[view plain]: https://blog.csdn.net/shan9liang/article/details/41604637#

Jquery.form.js与ajax方式

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 ajax方式下载文件

相关 Ajax与Java通过POST方式交互

相关 Ajax开发与传统web开发方式

相关 echarts ajax请求方式

相关 Jquery.form.js与ajax方式

相关 AJAX的GET与POST请求方式的区别

相关 Ajax实现方式

相关 Ajax请求方式

相关 easyui ajax方式与后台servlet交互原理

相关 ajax的基本概念与实现方式