1、serialize():序列表格内容为字符串。
如下:

queryBean.orderBy=OPERATE_TIME&queryBean.orderSequnce=DESC&queryBean.title=&queryBean.province=&queryBean.city=&selectID=ad78f509f2bc412fb9fe16e36d227a11&queryBean.orderBy=OPERATE_TIME&queryBean.orderSequnce=DESC&queryBean.page.intPage=1

2、serializeArray():序列化表格元素 (类似 ‘.serialize()’ 方法) 返回 JSON 数据构造数据。

把稳,此方法返回的是JSON工具而非JSON字符串。
须要利用插件或者第三方库进行字符串化操作。

返回的JSON工具是由一个工具数组组成的,个中每个工具包含一个或两个名值对——name参数和value参数(如果value不为空的话)。
举例来说:

phpfrom表单提交方式JavaScript异步提交表单的6种方法 Webpack

[ { \"大众name\"大众: \"大众firstname\"大众, \"大众value\"大众: \"大众Hello\公众 }, { \公众name\"大众: \"大众lastname\"大众, \"大众value\公众: \公众World\公众 }, { \公众name\"大众: \"大众alias\"大众 }]

3、data属性:发送到做事器的数据。
将自动转换为要求字符串格式。
GET 要求中将附加在 URL 后。
查看 processData 选项解释以禁止此自动转换。
必须为 Key/Value 格式。
如果为数组,jQuery 将自动为不同值对应同一个名称。
如 {foo:[“bar1”, “bar2”]} 转换为 “&foo=bar1&foo=bar2”。

4、dataType属性:预期做事器返回的数据类型。
如果不指定,jQuery 将自动根据 HTTP 包 MIME 信息来智能判断,比如XML MIME类型就被识别为XML。
在1.4中,JSON就会天生一个JavaScript工具,而script则会实行这个脚本。
随后做事器端返回的数据会根据这个值解析后,通报给回调函数。
可用值:

“xml”: 返回 XML 文档,可用 jQuery 处理。
“script”: 返回纯文本 JavaScript 代码
不会自动缓存结果。
除非设置了”cache”参数。
”’把稳:”’在远程要求时(不在同一个域下),所有POST要求都将转为GET要求。
(由于将利用DOM的script标签来加载)。
“json”: 返回 JSON 数据 。
“jsonp”: JSONP 格式。
利用 JSONP 形式调用函数时,如 “myurl?callback=?” jQuery 将自动更换 ? 为精确的函数名,以实行回调函数。
“text”: 返回纯文本字符串一、ajax办法

<script type=\公众text/javaScript\"大众>   $.ajax({ url:\公众mobileSurveyAction_addSurvey.action\"大众,//提交地址 data:$(\公众#form1\"大众).serialize(),//将表单数据序列化 type:\公众POST\公众, dataType:\"大众json\"大众, success:function(result){ if (result.success == '100'){ $(\"大众#mySection\公众).hide(); $(\"大众.footer\公众).hide(); $(\"大众#alertMsg\公众).show(); }else{ alert(\"大众失落败!
\"大众); } } });</script>

二、submit办法

有时在A页面点击按钮弹出一个form表单,在填完表单后提交成功后,须要关闭表单页并将表单中的某些值反应在A页面上,这时就须要异步提交表单。
实在也挺大略,只是须要把表单数据序列化。

<script type=\公众text/javaScript\公众>   $(\公众#form1\公众).submit(function (){   var ajax_url = \"大众yourActionUrl\"大众; //表单目标   var ajax_type = $(this).attr('method'); //提交方法   var ajax_data = $(this).serialize(); //表单数据   $.ajax({    type:ajax_type, //表单提交类型    url:ajax_url, //表单提交目标    data:ajax_data, //表单数据    success:function(msg){    if(msg == 'success'){//msg 是后台调用action时,你传过来的参数    //do things here    window.close();    }else{ //do things here    }    }   });   //return false; //止表单的默认提交事宜 });</script>

三、submit办法2

<html><head><script type=\公众text/javaScript\公众>   jQuery(document).ready(function (){   jQuery('#search_form').bind(\"大众submit\"大众, function(){    var key_word = jQuery(\"大众#keyword\"大众).val();    if(key_word == \"大众\"大众){    return false;    }    var options = {    url: '/portrait/user_info_display?user_info_keyword=' + key_word,    type: 'post',    dataType: 'text',    data: $(\"大众#search_form\公众).serialize(),    success: function (data) {    if (data.length > 0){    jQuery(\"大众#user_info\公众).html(data);    }    }    };    $.ajax(options);    return false;   });  $('#search').click(function(){ $('#search_form').submit();    });  });</script></head><body> <form mothod=\"大众post\"大众 id=\"大众search_form\"大众> <div class=\公众cf\"大众> <label class=\"大众search-bar\"大众> <input id=\公众keyword\"大众 placeholder=\"大众请输入搜索关键词\"大众 name=\"大众user_info_keyword\"大众 type=\公众text\公众 value=\"大众\"大众 class=\公众input-search\"大众> <a id=\"大众search\"大众 class=\公众btn-search\"大众> <i class=\"大众icon-search\"大众></i> </a> <a href=\"大众javascript:;\"大众 class=\公众btn-more\公众></a> </label> </div> </form></body></html>

代码完成了两个功能:1.输入关键词后按回车,会向server发送一个POST要求,然后异步提交表单,刷新部分页面;2.输入关键词后,点击查询按钮,也可异步刷新部分页面。

此时要把稳表单提交后发送的是POST要求,而点击按钮会发送一个GET要求,以是我们可以通过jQuery,使得按钮点击时触揭橥单提交,这样后端就不用再写代码处理GET要求。

四、隐蔽的iframe仿照异步上传

为什么在这里说的是仿照呢?由于我们实在是将返回结果放在了一个隐蔽的iframe中,以是才没有使当前页面跳转,觉得就像是异步操作一样。

<!DOCTYPE html PUBLIC \"大众-//W3C//DTD HTML 4.01 Transitional//EN\"大众 \"大众http://www.w3.org/TR/html4/loose.dtd\公众><html lang=\公众en\公众><head><meta charset=\"大众UTF-\"大众><title>隐蔽的iframe上传文件</title><script type=\公众text/javascript\"大众 src=\公众jquery路径...\公众></script></head><body> <iframe name=\"大众frm\公众 style=\"大众display: none\"大众></iframe> <form action=\公众/upload\公众 enctype=\"大众multipart/form-data\"大众 method=\公众post\"大众 target=\"大众frm\"大众 onsubmit=\公众loading(true);\"大众> <p id=\"大众upfile\"大众> 附件:<input type=\"大众file\公众 name=\公众myfile\"大众 style=\"大众display: inline\"大众> </p> <p id=\"大众upbtn\"大众> <input style=\公众padding-left: px; padding-right: px;\"大众 type=\公众submit\公众 value=\公众异步上传\公众> <span id=\"大众uptxt\"大众 style=\公众display: none\"大众>正在上传...</span> </p> </form> <div id=\公众flist\"大众 style=\"大众border: px dotted darkgray;\"大众></div> <script> // 上传完成后的回调 function uploadFinished(fileName) { addToFlist(fileName); loading(false); } function addToFlist(fname) { var temp = [\"大众<p id='\公众 + fname + \"大众'>\"大众,fname,\"大众<button onclick='delFile(\\公众\公众+fname+\"大众\\公众);'>删除</button>\"大众,\公众</p>\公众]; $(\"大众#flist\"大众).append(temp.join(\"大众\"大众)); } function loading(showloading) { if (showloading) { $(\公众#uptxt\"大众).show(); } else { $(\公众#uptxt\"大众).hide(); } } </script></body></html>

这种技能有两个关键的地方:

form会指定target,提交的结果定向返回到隐蔽的ifram中。
(即form的target与iframe的name属性同等)。
提交完成后,iframe中页面与主页面通信,关照上传结果及做事端文件信息.

如何与主页面通信呢?

我们用nodejs在吸收完了文件后返回了一个window.parent.主页面定义的方法,实行后可以得知文件上传完成。
代码很大略:

router.post('/upload', multipartMiddleware, function(req, res) { var fpath = req.files.myfile.path; var fname = fpath.substr(fpath.lastIndexOf('\\') + ); setTimeout(function() { var ret = [\"大众<script>\"大众,\"大众window.parent.uploadFinished('\"大众+fname+\公众');\"大众,\"大众</script>\"大众]; res.send(ret.join(\"大众\"大众)); }, );});

五、利用XMLHttpRequest2来进行真正的异步上传

<!DOCTYPE html><html lang=\公众en\"大众><head><meta charset=\公众UTF-\"大众><title>xhr level 异步上传</title><script type=\"大众text/javascript\"大众 src=\"大众jquery路径...\公众></script></head><body><div> <p id=\"大众upfile\公众> 附件:<input type=\"大众file\公众 id=\"大众myfile\"大众 style=\公众display: inline\公众> </p> <p id=\公众upbtn\公众> <input style=\"大众padding-left: px; padding-right: px;\"大众 type=\公众button\公众 value=\"大众异步上传\"大众 onclick=\"大众upload();\公众> <span id=\"大众uptxt\"大众 style=\"大众display: none\"大众>正在上传...</span> <span id=\"大众upprog\公众></span> <button id=\"大众stopbtn\"大众 style=\"大众display: none;\公众>停滞上传</button> </p></div><div id=\"大众flist\公众 style=\公众border: px dotted darkgray;\"大众></div><script>function upload() { // 准备FormData var fd = new FormData(); fd.append(\"大众myfile\"大众, $(\"大众#myfile\"大众)[0].files[0]); // 创建xhr工具 var xhr = new XMLHttpRequest(); // 监听状态,实时相应 // xhr 和 xhr.upload 都有progress事宜,xhr.progress是下载进度,xhr.upload.progress是上传进度 xhr.upload.onprogress = function(event) { if (event.lengthComputable) { var percent = Math.round(event.loaded / event.total); console.log('%d%', percent); $(\公众#upprog\"大众).text(percent); } }; // 传输开始 xhr.onloadstart = function(event) { console.log('load start'); $(\"大众#upprog\"大众).text('开始上传'); $(\公众#stopbtn\公众).one('click', function() { xhr.abort(); $(this).hide(); }); loading(true); }; // ajax过程成功完成事宜 xhr.onload = function(event) { console.log('load success'); $(\公众#upprog\"大众).text('上传成功'); console.log(xhr.responseText); var ret = JSON.parse(xhr.responseText); addToFlist(ret.fname); }; // ajax过程发生缺点事宜 xhr.onerror = function(event) { console.log('error'); $(\"大众#upprog\公众).text('发生缺点'); }; // ajax被取消 xhr.onabort = function(event) { console.log('abort'); $(\"大众#upprog\公众).text('操作被取消'); }; // loadend传输结束,不管成功失落败都会被触发 xhr.onloadend = function (event) { console.log('load end'); loading(false); }; // 发起ajax要求传送数据 xhr.open('POST', '/upload', true); xhr.send(fd);}function addToFlist(fname) { var temp = [\"大众<p id='\"大众 + fname + \"大众'>\公众,fname,\"大众<button onclick='delFile(\\公众\"大众 + fname + \"大众\\公众);'>删除</button>\公众,\"大众</p>\公众]; $(\"大众#flist\公众).append(temp.join(\公众\"大众));}function delFile(fname) { console.log('to delete file: ' + fname); // TODO: 请实现}function loading(showloading) { if (showloading) { $(\"大众#uptxt\"大众).show(); $(\"大众#stopbtn\"大众).show(); } else { $(\公众#uptxt\"大众).hide(); $(\公众#stopbtn\"大众).hide(); }}</script></body></html>

代码有点多,但是普通易懂。
利用过AJAX的人都知道,XHR工具供应了一个onreadystatechange的回调方法来监听全体要求/相应过程。
在XMLHttpRequest2级规范中又多了几个进度事宜。
有以下6个事宜:

1.loadstart: 在吸收到相应数据的第一个字节时触发。

2.progress: 在吸收相应期间持续不断地触发。

3.error: 在要求发生缺点时触发。

4.abort: 在由于调用abort()方法而终止连接时触发。

5.load: 在吸收到完全的相应数据时触发。

6.loadend: 在通信完成或者触发error,abort,load事宜后触发。

这次我们可以解读代码:当传输事宜开始后,我们便在停滞传送按钮上添加点击事宜,内置了abort方法可以停滞传送。
若不点则会正常上传直到传送完毕为止。
其后台代码类似第二种方法。

六、利用jQuery和FormData来进行异步上传

FormData的详细先容及利用请点击此处,那里对FormData的方法和事宜已经表述的非常清楚,这里就不再摧残浪费蹂躏韶光在先容一遍了。
本文紧张针对FormData工具的利用以及异步文件上传进行详细的解释。

FormData工具可以让我们组织一个利用XMLHttpRequest工具发送的键值对的凑集。
它紧张用于发送表单数据,但是可以独立于利用表单传输的数据。
1、从头开始创建一个FormData工具

你可以创建一个你自己的FormData工具,然后通过append() 方法向工具中添加键值对,就像下面这样:

var formData = new FormData();formData.append(\"大众username\"大众, \公众Groucho\"大众);formData.append(\公众accountnum\"大众, 123456); // number 123456 is immediately converted to a string \"大众123456\公众// HTML file input, chosen by userformData.append(\公众userfile\"大众, fileInputElement.files[0]);// JavaScript file-like objectvar content = '<a id=\"大众a\"大众><b id=\"大众b\"大众>hey!</b></a>'; // the body of the new file...var blob = new Blob([content], { type: \"大众text/xml\公众});formData.append(\"大众webmasterfile\"大众, blob);var request = new XMLHttpRequest();request.open(\公众POST\公众, \公众http://foo.com/submitform.php\公众);request.send(formData);把稳:字段”userfile” 和 “webmasterfile” 都包含文件(file)。
被分配到字段”accountnum”上的数字直接被FormData.append()方法转换成了字符串(字段的值(value)可能是一个Blob, File, 或一个string:如果值既不是Blob也不是File,则值会被转换成一个string)。

这个例子创建了一个FormData实例,个中包含字段”username”, “accountnum”, “userfile” 和 “webmasterfile”,然后利用XMLHttpRequest工具的send()方法去发送表单数据。
字段”webmasterfile”是一个Blob。
一个Blob工具代表一个文件工具的原始数据。
但是Blob代表的数据不必须是javascript原生格式的数据。
文件接口是基于Blob,继续Blob功能和扩大它对用户文件系统的支持。
为了构建一个Blob可以调用Blob()布局函数。

2、从一个HTML表单得到一个FormData工具

为了得到一个包含已存在表单数据的FormData工具,在创建FormData工具的时候须要指定表单元素。

var formData = new FormData(someFormElement);

就像下面这样:

var formElement = document.querySelector(\"大众form\公众);var request = new XMLHttpRequest();request.open(\"大众POST\"大众, \"大众submitform.php\"大众);request.send(new FormData(formElement));

你也可以在得到FormData工具之后增加其余的数据,就像下面这样:

var formElement = document.querySelector(\公众form\"大众);var formData = new FormData(formElement);var request = new XMLHttpRequest();request.open(\"大众POST\"大众, \公众submitform.php\"大众);formData.append(\公众serialnumber\公众, serialNumber++);request.send(formData);

这样你可以在发送之前增加额外的信息,不一定是用户编辑的。

3、利用FormData工具发送文件

你可以利用FormData发送文件。
大略的<form>中在包含一个<input>元素就可以:

<form enctype=\"大众multipart/form-data\公众 method=\"大众post\公众 name=\"大众fileinfo\"大众> <label>Your email address:</label> <input type=\"大众email\公众 autocomplete=\公众on\公众 autofocus name=\"大众userid\"大众 placeholder=\"大众email\"大众 required size=\公众32\"大众 maxlength=\"大众64\"大众 /><br /> <label>Custom file label:</label> <input type=\"大众text\公众 name=\公众filelabel\"大众 size=\"大众12\"大众 maxlength=\"大众32\"大众 /><br /> <label>File to stash:</label> <input type=\"大众file\"大众 name=\"大众file\"大众 required /> <input type=\"大众submit\公众 value=\公众Stash the file!\"大众 /></form><div></div>

然后你可以利用下面的代码去发送:

var form = document.forms.namedItem(\公众fileinfo\"大众);form.addEventListener('submit', function(ev) { var oOutput = document.querySelector(\公众div\"大众), oData = new FormData(form); oData.append(\公众CustomField\公众, \"大众This is some extra data\公众); var oReq = new XMLHttpRequest(); oReq.open(\"大众POST\公众, \"大众stash.php\"大众, true); oReq.onload = function(oEvent) { if (oReq.status == 200) { oOutput.innerHTML = \"大众Uploaded!\公众; } else { oOutput.innerHTML = \"大众Error \"大众 + oReq.status + \"大众 occurred when trying to upload your file.<br \/>\"大众; } }; oReq.send(oData); ev.preventDefault();}, false);

你也可以直接向FormData工具中添加File或Blob,就像下面这样:

data.append(\"大众myfile\"大众, myBlob, \公众filename.txt\"大众);

当利用append() 方法的时候,可能会利用到第三个参数去发送文件名称(通过Content-Disposition头发送到做事器)。
如果没有指定第三个参数或这个参数不被支持的话,第三个参数默认是”blob”。

如果你设置好精确的options,你也可以和jQuery合营起来利用:

var fd = new FormData(document.querySelector(\"大众form\"大众));fd.append(\"大众CustomField\"大众, \"大众This is some extra data\"大众);$.ajax({ url: \公众stash.php\"大众, type: \"大众POST\"大众, data: fd, processData: false, // tell jQuery not to process the data contentType: false // tell jQuery not to set contentType});