JavaScript—非同步提交表單的6種方式
在學習非同步提交表單之前，先來學習幾個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 - 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
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'){//msg 是後臺呼叫action時，你傳過來的引數
//do things here
window.close();
}else{
//do things here
}
}
});
//return false; //阻止表單的預設提交事件
});
</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(""));
}, );
});- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
五、使用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>- 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方法可以停止傳送。若不點則會正常上傳直到傳送完畢為止。其後臺程式碼類似第二種方法。
六、使用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 user
formData.append("userfile", fileInputElement.files[0]);
// JavaScript file-like object
var 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);- 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()建構函式。
2、從一個HTML表單獲得一個FormData物件
為了獲得一個包含已存在表單資料的FormData物件，在建立FormData物件的時候需要指定表單元素。
var formData = new FormData(someFormElement);- 1
就像下面這樣：
var formElement = document.querySelector("form");
var request = new XMLHttpRequest();
request.open("POST", "submitform.php");
request.send(new FormData(formElement));- 1
- 2
- 3
- 4
你也可以在獲得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);- 1
- 2
- 3
- 4
- 5
- 6
這樣你可以在傳送之前增加額外的資訊，不一定是使用者編輯的。
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" /><
相關推薦
JavaScript—非同步提交表單的6種方式
在學習非同步提交表單之前，先來學習幾個JQuery方法和屬性。
1、serialize()：序列表格內容為字串。如下：
queryBean.orderBy=OPERATE_TIME&queryBean.orderSequnce=DESC&queryB
JavaScript 非同步提交表單的6種方式
零、在學習非同步提交表單之前，先來學習幾個JQuery方法和屬性
1、serialize()：序列表格內容為字串。如下：
queryBean.orderBy=OPERATE_TIME&queryBean.orderSequnce=DESC&am
使用AJAX非同步提交表單的幾種方式
這裡介紹三種常用的提交方式
方式一
手工收集所有的使用者輸入，封裝為大的“k1=v1&k2=v2…”鍵值對形式，使用$.post(url, data,fn)把資料提交給伺服器
$.aj
ajax（原生JavaScript）非同步提交表單資料
採用ajax非同步方式，通過js獲取form中所有input、select等元件的值，將這些值組成Json格式，通過非同步的方式與伺服器端進行互動，
一般將表單資料傳送給伺服器端，伺服器端處理資料並返
jQuery 非同步 提交表單
這個以前學過,但是後來工作用多了 MXFramework 的 RESTClient 做互動 有些淡忘了
雖然 RESTClient跟 ajax 差不太多,但還有區別
今天覆習下 jQuery 的Ajax提交表單:
html 部分:
<form id="f
Jquery非同步提交表單陣列元素
今天修改功能的時候，遇到必須Jquery非同步提交表單陣列元素。
程式碼如下：
<input type='hidden' name='address_id' id='address_id' value='
jquery的非同步提交表單（非同步上傳檔案）及jquery.form.js上傳檔案注意事項
方法一：jquery的ajax方式，通過FormaData獲取表單資料
（1）這種方式只需要jquery-1.7.js外掛；
（2）通過`jquery中的FormaData類：
自動搜尋表單資訊(表單內沒有name屬性的input不會被搜尋到)，IE<=9
springmvc結合jquery.form.js非同步提交表單上傳檔案
需要 jquery.form.js 外掛
<script type="text/javascript" src="/libs/js/form/jquery.form.js"><
ajax.BeginForm非同步提交表單並顯示更新資料
1 <!--基本資訊模組-->
2 2 <div class="profile_box" id="basicInfo">
3 3 <h2>基本資訊</h2>
4 4
5 5
超連結 a href 提交表單通過post方式
我們知道超連結一般是通過get方式提交表單的，如下列子：
<a href='oneGetAllCultivateEndCertificateServlet?page=1&hiddenA=A'><font color='#000000'>
SpringMVC中的非同步提交表單
1.前言
最近在做一個專案,前臺框架用的是EasyUI+SpringMVC,由於對SpringMVC不太瞭解,所以剛開始接觸的時候有點吃力,在此通過一個EasyUi中的DataGrid表格來總結
ajax中如何實現非同步提交表單
ajax中很重要的一個功能就是實現表單的不重新整理提交，現在我們利用jquery和php實現這個功能
首先我們寫一個表單，我們命名為ajaxform.html,表單的程式碼如下：
<form>
使用者名稱：<input type="text" na
jquery.form.js非同步提交表單提交驗證（不用validate）
第一種：
利用fieldValue()方法，fieldValue 是表單外掛的一個方法，它能找出表單中的元素的值，返回一個集合。
js程式碼：
html：
此方法優點：靈活
缺點：命名錶單元素命名不能以XXX.XXX的形式；例：將物件定義到Action中，然後在JSP中
(41)Ext.Ajax.request非同步提交表單
function login(){
var requestConfig={
url:'base/loginServer.jsp',//請求的伺服器地址
form:'loginForm',//指定要提交的表單id
callback:function(option
axios非同步提交表單資料的不同形式
踩坑Axios提交form表單幾種格式
前後端分離的開發前後端, 前端使用的vue,後端的安全模組使用的SpringSecurity,使用postman測試後端的許可權介面時發現都正常,但是使用vue+axios傳送非同步的請求後端一直獲取不出axios提交的form表單的資料,爬坑兩個半鐘頭找到了答案
ax
JavaScript第二課-表單及兩種資料提交方式
1、表單標籤
<legend>註冊區域</legend>
<form action="http://www.baidu.com">
使用者名稱： <input type="text"/ name="user" ><br/
提交表單的4種方式
demo1 doc type function pat 相對 dem location cti 1,超鏈接 <!-- 鏈接到page2 --> <a href="page2.jsp">鏈接到page2</a><br> <
Form表單提交資料的幾種方式
一、submit提交
在form標籤中新增Action(提交的地址)和method(post),且有一個submit按鈕（<input type=’submit’>）就可以進行資料的提交，每一個input標籤都需要有一個name屬性，才能進行提交。
<form action=’http:/
jquery ajax提交表單form資料幾種方式小結 a標籤提交，input標籤提交 submit提交
方式一：舉個例子。
<a href="javascript:void(0)" id="click">點選</a>
//jq獲取標籤，並且繫結單擊事件
$(“#click”).click(function (){
//點選後
常用的幾種提交表單的方式
很多情況下我們需要在form表單的外部提交表單，於是就不能使用<input type="button">
下面總結兩個自己常用的表單提交的方法：
1.<!-- H5 --> &