1. 程式人生 > >jQuery表單提交

jQuery表單提交

{} on() target 綁定 .get 內容 action tor xhr

【轉自】jQuery最簡單的表單提交方式

第一步:綁定事件

常用的與ajax相關的事件參考如下:

1、$(selector).click(function)

2、$(selector).change(function)

3、$(selector).keyup(function)

4、$(selector).submit(function)

提交表單前,阻止提交按鈕的默認的action,或返回false,如:

1、阻止提交按鈕的默認的action

$("form").submit(function(e){
e.preventDefault();
});

2、返回false

$("form").submit(function() {
return false;
});

第二步:將表單或對象序列化成字符串,也可以將表單序列化成數組形式;

1、將表單內容序列化為字符串
var data = $("form").serialize();  

n1=1&n2=2&n3=3&n4=4

如果為post提交,則:$.post("", data, function (rs) {}, "json");

n1 1
n2 2
n3 3
n4 4

2、序列化一個 key/value 對象:
var str = jQuery.param({});

3、將表單序列化成數組形式
var sa = $("form").serializeArray();

[
{

"name": "n1",
"value": "1"
},
{
"name": "n2",
"value": "2"
},
{
"name": "n3",
"value": "3"
},
{
"name": "n4",
"value": "4"
}
]

第三步:表單提交

表單提交可以參數以下方式:

1、jQuery.ajax([settings])

2、jQuery.get(url,data,success(response,status,xhr),dataType)

3、jQuery.post(url,data,success(response,status,xhr),dataType)

4、jQuery.getJSON(url,data,success(data,status,xhr))

5、$(selector).load(url,data,function(response,status,xhr))

6、jQuery.getScript(url,success(response,status))

詳細的jQuery.ajax,點擊進入

jQuery表單提交