在学习异步提交表单之前，先来学习几个JQuery方法和属性。
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不为空的话）。举例来说：
[ { "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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
二、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'){ window.close(); }else{ } } }); });</script>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
三、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
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
代码完成了两个功能：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>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
这种技术有两个关键的地方:
- 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() { var fd = new FormData(); fd.append("myfile", $("#myfile")[0].files[0]); var xhr = new XMLHttpRequest(); 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); }; xhr.onload = function(event) { console.log('load success'); $("#upprog").text('上传成功'); console.log(xhr.responseText); var ret = JSON.parse(xhr.responseText); addToFlist(ret.fname); }; xhr.onerror = function(event) { console.log('error'); $("#upprog").text('发生错误'); }; xhr.onabort = function(event) { console.log('abort'); $("#upprog").text('操作被取消'); }; xhr.onloadend = function (event) { console.log('load end'); loading(false); }; 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); }function loading(showloading) { if (showloading) { $("#uptxt").show(); $("#stopbtn").show(); } else { $("#uptxt").hide(); $("#stopbtn").hide(); }}</script></body></html>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
- 50
- 51
- 52
- 53
- 54
- 55
- 56
- 57
- 58
- 59
- 60
- 61
- 62
- 63
- 64
- 65
- 66
- 67
- 68
- 69
- 70
- 71
- 72
- 73
- 74
- 75
- 76
- 77
- 78
- 79
- 80
- 81
- 82
- 83
- 84
- 85
- 86
- 87
- 88
- 89
- 90
- 91
- 92
- 93
- 94
- 95
- 96
- 97
- 98
代码有点多，但是通俗易懂。使用过AJAX的人都知道，XHR对象提供了一个onreadystatechange的回调方法来监听整个请求/响应过程。在XMLHttpRequest2级规范中又多了几个进度事件。有以下6个事件:
1.loadstart: 在接收到响应数据的第一个字节时触发。
2.progress: 在接收响应期间持续不断地触发。
3.error: 在请求发生错误时触发。
4.abort: 在因为调用abort()方法而终止连接时触发。
5.load: 在接收到完整的响应数据时触发。
6.loadend: 在通信完成或者触发error,abort,load事件后触发。
这次我们可以解读代码:当传输事件开始后，我们便在停止传送按钮上添加点击事件，内置了abort方法可以停止传送。若不点则会正常上传直到传送完毕为止。其后台代码类似第二种方法。
FormData的详细介绍及使用请点击此处，那里对FormData的方法和事件已经表述的非常清楚，这里就不再浪费时间在介绍一遍了。本文主要针对FormData对象的使用以及异步文件上传进行详细的说明。
FormData对象可以让我们组织一个使用XMLHttpRequest对象发送的键值对的集合。它主要用于发送表单数据,但是可以独立于使用表单传输的数据。
你可以创建一个你自己的FormData对象，然后通过append() 方法向对象中添加键值对，就像下面这样：
var formData = new FormData();formData.append("username", "Groucho");formData.append("accountnum", 123456); formData.append("userfile", fileInputElement.files[0]);var content = '<a id="a"><b id="b">hey!</b></a>'; 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);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
注意：字段”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()构造函数。
为了获得一个包含已存在表单数据的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);
这样你可以在发送之前增加额外的信息，不一定是用户编辑的。
你可以使用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);
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
你也可以直接向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, contentType: false });
