jquery.form.js实施方法提交表单提交到Ajax提交 浏览：384

本文阐述了jquery.form.js实现形式提交转移到Ajax提交方式。分享给你供你参考。具体分析如下：

该框架设置表单提交、验证和上传的功能。

此框架必须与jQuery的完整版本相结合，否则MIN的使用是无效的。

其原理是使用js将表单组装成ajax的URL和数据。这个原理仍然是由Ajax编写的，Ajax本身可以编写，但是在这个框架下，它可能更简单。

一个最简单的例子：

第一步：参考JS




<！这是JS压缩工具对整个版本的压缩
这不是真的，所以




第二步：页面写表单

行动= / / f_shopuser 024pm。domethod =登录method=后>




style=宽度：1000px；高度：200px；背景颜色：# EEE；>



第三步：写JS调用jquery.form.js进行Ajax提交表单




$（文档）Ready（函数（）{）
var选项{ {
目标：#输出电压的，
来自于div上显示的服务数据
也就是说，ajax本地刷新
beforesubmit：showrequest，
在提交处理之前
成功：showresponse
治疗后/
}；
$（# showdataform）。提交（函数（）{）
$（这）AjaxSubmit（选项）；
返回false；
是非常重要的，如果它是false，那不是一个跳转。
在这个页面中，这是Ajax，如果不是false，则是传统的表单跳转。
}）；
}）；
功能showresponse（responseText，StatusText，XHR，$形式）{
警报（XHR。responseText + = + form.attr美元（方法）+ 'status：+
+ StatusTextresponseText：+ responseText）；
/ / XHR：它表明你可以使用Ajax请求再次。
$表单：它是表单对象，即jQuery对象。
/ / StatusText：状态，和成功是成功的
/ / responseText，服务器返回一个字符串（包括，当然，HTML，不是JSON）
}
功能showrequest（表单，jqform，选项）{
/ /表单是一个数组，对每个输入值的数组，地图
通过此方法处理字符串。
/ /表单：各种形式的字符串，如名称= herapassword，
事实上，所有的都是输入/输入对的形式，
在数据中等同于ajax的方法。
VaR QueryString参数（表单）=美元；
警报（QueryString ++ formdata.length史）；
对于（var i = 0；i < formdata.length；i++）{
警报（表单{我}。价值++表单{我}，名字=============== ）；
}
/ / jqform，jQuery的表单对象
无功formelement = jqform { 0 }；
警报（$（formelement）。Attr（方法））；
警报（$（jqform { 0 }。名称）。Attr（最大长度））；
是非常重要的，然后在提交Ajax之前返回真实的验证。
成功，提交Ajax表单
如果验证失败，则返回true，而不是提交。
返回true；
}


二、选项对象中的值是什么

有很多共同的属性：




var选项{ {
目标：#输出电压的，
数据：{参数：我自己第一次额外的参数}，
这个参数是由ajax定义的，除了表单内部输入的参数外，还向服务器提交。
背景中的字符串和参数= req.getparameter使用（参数）；采集。
DataType： / /空，
DataType：'json，
此参数值为 /服务器返回数据类型，默认值为null。
服务器可以默认返回字符串，然后将这些字符串放在目标中
当然，最常用的JSON之一是null和JSON。
为使用JSON，我们稍后将解释
beforesubmit：showrequest，
成功：successres，
类型：'post
以一种在表单默认标签上指定的方式呈现
如果未指定，请使用get。
网址：
重新提交URL，URL可以在表单中进行配置。
也可以在这里配置。
}；


三。如何解析服务器传递的JSON数据

我们知道，利用jQuery的Ajax方法，如果服务器返回的JSON数据，它可以转换成js json对象，然后json.xxx能得到相应的价值。所以什么框架

1）首先指定数据类型：'json'in选项参数

2）通过框架提交

3）服务器接收

4）服务器返回JSON

5）页面js接收JSON

关键是第五步，js如何接收JSON，它可以在成功中运行：指定的方法如下：




var选项{ {
目标：#输出电压的，
DataType：'json，
beforesubmit：showrequest，
成功：successres
/ /注意的successres方法没有参数
但是为什么这个方法可以有参数，所以传输是。
功能successres（JSONData）{
警报（JSONData。参数）；
}


四。如何通过这个框架进行简单的验证

当它来验证，必须验证beforesubmit方法内，如何验证，因为这种方法有一个jqform和表单对象，全部传递给你，你能把这两个参数以获得相应的输入，那么你的判断，如果决策是成功的，提交。


功能showrequest（表单，jqform，选项）{
对于（var i = 0；i < formdata.length；i++）{
警报（表单{我}，{我}值+表单。名字。）；
如果（！表格数据{我} {价值）。
完成/验证
警报（输入没有填选项）；
如果身份验证失败，则返回false。
返回false；
}
}
无功formelement = jqform { 0 }；
警报（$（jqform { 0 }。名称）。Attr（最大长度））；
返回true；
}


的jquery.form.js文件下载在这里在这个网站。

希望本文能对大家的jQuery程序设计有所帮助。