异步提交表单的6种方式

2024-04-27 15:06:41

字体：大中小

来源：转载

供稿：网友

在学习异步提交表单之前，先来学习几个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方式

二、submit方式

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

三、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方法可以停止传送。若不点则会正常上传直到传送完毕为止。其后台代码类似第二种方法。