1. 程式人生 > >jQuery使用serialize(),serializeArray()方法取得表單資料+字串和物件型別兩種表單提交的方法

jQuery使用serialize(),serializeArray()方法取得表單資料+字串和物件型別兩種表單提交的方法

原始form表單值獲取方式(手動):
$.ajax({
   type: "POST",
   url: "ajax.php",
   data: "Name=摘取天上星&position=IT技術",
   success: function(msg){alert(msg);},
   error: function(error){alert(error);}
 });
JQ serialize()方法取值:
$.ajax({
   type: "POST",
   url:"ajax.php",
   data:$('#formID').serialize(),// 要提交的表單
   success: function(msg) {alert(msg);},
   error: function(error){alert(error);}
});
serialize()序列化表單例項:
<script type="text/javascript" src="jquery-1.9.1.min.js"></script>
<script type="text/javascript">
$(function(){
   $("#button").click(function(){
     alert($("#formID").serialize());
   });
});
</script>
<form id="formID">
    姓名 <input value="摘取天上星" name="Name" />
    職位 <input value="IT技術" name="position" />
        <input id="button" value="提交" type="button" />
</form>

 將form中的值轉換為鍵值對:

// 如:{Name:'摘取天上星',position:'IT技術'}
// ps:注意將同名的放在一個數組裡
function getFormJson(form) {
	var o = {};
	var a = $(form).serializeArray();
	$.each(a, function () {
		if (o[this.name] !== undefined) {
			if (!o[this.name].push) {
				o[this.name] = [o[this.name]];
			}
			o[this.name].push(this.value || '');
		} else {
			o[this.name] = this.value || '';
		}
	});
	return o;
}
鍵值對方式的AJAX呼叫:
//除錯呼叫 
$(function(){
	$("#button").click(function(){
		alert(getFormJson("#formID"));
	});
});
//Ajax提交
$.ajax({
   type: "POST",
   url:"ajax.php",
   data:getFormJson($("#formID")),//表單資料JSON格式的函式引數裡填寫表單的ID或要提交的表單
   dataType: 'json',
   success: function(msg) {alert(msg);},
   error: function(error){alert(error);}
});
例項中通用的HTML表單:
<form id="formID">
    姓名 <input value="摘取天上星" name="Name" />
    職位 <input value="IT技術" name="position" />
        <input id="button" value="提交" type="button" />
</form>




相關推薦

jQuery使用serialize(),serializeArray()方法取得資料+字串物件型別提交方法

原始form表單值獲取方式(手動):$.ajax({ type: "POST", url: "ajax.php", data: "Name=摘取天上星&position=IT技

fstream與 C 風格(例如fread fwrite )讀寫檔案方法的效率比較

為了探錄c++ 風格的fstream與 C 風格(例如fread 和 fwrite )兩種讀寫檔案的方法的效率,我特意做了兩個實驗。 我的機器是Windows XP, Visual Studio 2008 1. 測試寫檔案速度 程式設計思路: 將TEST_SIZE個

jQuery使用serialize(),serializeArray()方法取得單數據+字符串對象類型提交方法

var fun .ajax clas copy art 表單提交 post 姓名 轉載自: http://blog.csdn.net/zqtsx/article/details/28655717 原始form表單值獲取方式(手動): [javascript] v

form資料 轉json 物件最佳示例

先看效果圖 就是圖一到圖二的過程 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transition

form資料轉json 物件

首先需要引入jQuery,線上引用如下 <script src="https://code.jquery.com/jquery-3.3.1.min.js"></script> 實現轉json物件我們需要用一段通用程式碼讓表單資料序列化物件 $.f

解決elementUI資料新增修改資料混亂

需求是:初期化一個table列表,可以對table列表資料進行新增和修改,點選新增和修改時彈出窗體,窗體繫結的資料是form裡的Model,開始的時候點選新增是可以的,後臺獲取前臺的資料是沒有id主鍵的,但是當點選修改的時候,因為把主鍵id賦值給了form表單,導致點選新增後

jstl標籤forEach用法小結,後臺接收字串陣列)

對於在頁面上顯示大量資料庫查詢出來的內容時,有必要使用jstl的迴圈語句forEach。 先從後臺查詢:List<Map<String,Object>> systemNameList = sendPowerService.getAllSystemNa

JavaWeb後臺從input獲取文本值的方式

out script body throws ioe spa ava set action JavaWeb後臺從input表單獲取文本值的兩種方式 #### index.html <!DOCTYPE html> <html

資料結構演算法】6 線性1

線性表的定義 線性表像是排隊一樣,具有像線一樣的性質。 官方定義:線性表(List),是有零個或多個數據元素組成的有限序列; 關於線性表幾個關鍵的地方: (1)首先它是一個序列,也就是說,元素之間是有個先來後到的順序; (2)若元素存在多個,則第一個元素無前驅,而最後一個元素無後

資料歸一化方法

資料標準化(歸一化)處理是資料探勘的一項基礎工作,不同評價指標往往具有不同的量綱和量綱單位,這樣的情況會影響到資料分析的結果,為了消除指標之間的量綱影響,需要進行資料標準化處理,以解決資料指標之間的可比性。原始資料經過資料標準化處理後,各指標處於同一數量級,適合進行綜合對比評價。 一般而言,

正確理解使用Vue裡的nextTick方法 (如何在資料或dom渲染結束後再執行函式或方法

Vue.nextTick(callback),當資料發生變化,更新後執行回撥。 Vue.$nextTick(callback),當dom發生變化,更新後執行的回撥。 示例: <ul id="dem

【JavaScrpit】字串正則表示式的4個相關方法

字串和正則表示式的4個方法:split( );  search( );   match( );   replace( ); 下面介紹4個方法的各自作用: split( );        : 可以將一個字串拆分為

正確理解使用Vue裡的nextTick方法 (如何在資料或dom渲染結束後再執行函式或方法

Vue.nextTick(callback),當資料發生變化,更新後執行回撥。 Vue.$nextTick(callback),當dom發生變化,更新後執行的回撥。 示例: <ul id="demo"> <li v-for="item in list"&

HBase 建立已經存在,刪除又不存在的問題的解決方法

錯誤提示資訊:   用list 檢視student表 發現沒有student表的資訊 通過Web Console 查看錶的資訊 也沒有表的任何資訊 用scan 檢視student表,發現也沒有任何的資訊 通過以上的嘗試,現在只能檢視Zoo

Oracle匯出(即DMP檔案)的方法

1:G:\Oracle\product\10.1.0\Client_1\NETWORK\ADMIN目錄下有個tnsname.ora檔案,內容如下: CMSTAR =   (DESCRIPTION =     (ADDRESS_LIST =       (ADDRESS = (PROTOCOL = TCP)

資料結構,圖的鄰接矩陣建立,鄰接矩陣與鄰接的交換,的輸出,過程用C++實現

/* 編寫一個程式algo8-1.cpp,實現不帶權圖和帶權圖的鄰接矩陣與鄰接表的互相 轉換演算法、輸出鄰接矩陣與鄰接表的演算法,並在此基礎上設計一個程式exp8-1.cpp 實現如下功能: 1)建立如圖有向圖G的鄰接矩陣,並輸出; 2)由有向圖G的鄰接矩陣產生鄰接表,並輸

批量解決win10程式以及資料夾圖示上有個藍色箭頭的方法

桌面存在兩個藍色的對角箭頭,或新建檔案或資料夾時出現兩個藍色對角箭頭的解決辦法: 解決辦法:雙擊“此電腦”,點選“C盤”,可以看到一個”使用者“資料夾,雙擊”使用者“,選擇現在正在使用的使用者名稱,例如Administrator,雙擊使用者名稱,找到該資料夾下的”桌面“或”Desktop“點選“屬性

資料結構演算法】8 線性:線性的順序儲存結構

線性表的順序儲存結構 線性表有兩種物理儲存結構: 順序儲存結構 和 鏈式儲存結構。 物理上的儲存方式事實上就是在記憶體中找個初始地址,然後通過佔位的形式,把一定的記憶體空間給佔了,然後把相同資料型別的資料元素依次放在這塊空地中。 順序儲存結構:指的是用一段地址連續的儲

Android 工具類的寫法---例模式與靜態方法

第一種:單例模式 方法非靜態 public class LogUtil { private static volatile LogUtil instance; private Lo

insert into 的複製插入方法

  insert into 語句除了基本的 insert into 表名(a,b,c)values(a1,b1,c1)外 。  還有更進一步的,從一個表複製其中全部欄位資料或者是部分欄位資料插入到另一個表中的用法。  有兩種方式可以實現,insert into select