Jquery ajax提交表单几种方法详解

Jquery ajax提交表单几种方法详解

来源： 时间：2013-09-05 20:25:13 阅读数：274204

分享到： 9
[导读] 在jquery中ajax提交表单有post与get方式，在使用get方式时我们可以直接使用ajax 序列化表单$( 表单ID) serialize();就行了，下面我来介绍两个提交表单数据的方法。$get方式提交表单get() 方法通过远程 HTTP

在jquery中ajax提交表单有post与get方式，在使用get方式时我们可以直接使用ajax 序列化表单$('#表单ID').serialize();就行了，下面我来介绍两个提交表单数据的方法。

Jquery表单插件ajaxForm用法详解：

插件主要的方法：

ajaxForm

ajaxSubmit

formToArray

formSerialize

fieldSerialize

fieldValue

clearForm

clearFields

resetForm

ajaxForm()适用于以表单提交方式处理ajax技术（需要提供表单的action、id、 method，最好在表单中提供submit按钮）它大大简化了使用ajax技术提交表单时的数据传递问题，使用ajaxForm()你不需要逐个的以 JavaScript的方式获取每个表单属性的值，并且也不需要在请求路径后面通过url重写的方式传递数据。ajaxForm()会自动收集当前表单中 每个属性的值，然后将其以表单提交的方式提交到目标url。这种方式提交数据较安全，并且使用起来更简单，不必写过多冗余的JavaScript代码

ajaxForm不能提交表单。在document的ready函数中，使用ajaxForm来为AJAX提交表单进行准备。提交动作必须由submit开始
ajaxSubmit
马上由AJAX来提交表单。你可以在任何情况下进行该项提交

$(document).ready(function(){

registerForm'表单id
必须有submit按钮

data回调数据

$('#registerForm').ajaxForm(function(data){

alert(data);//弹出ajax请求后的回调结果

});

[b] return false; // 为了防止普通浏览器进行表单提交和产生页面导航（防止页面刷新？）返回false
});[/b]

html代码：

<form action=".." method="post" id="rem">内容</form>

js代码：

<script type="text/javascript">

$("#rem").ready(function(){

[b]$("#rem").ajaxForm(function(re){[/b]

if(re)

{

alert("修改成功");

}else{

[b] alert("修改失败");[/b]

}

window.location.reload();//等于是页面重载

});

return false;

});

php代码根据$_post['data']进行操作，判断re的值

</script>

ajaxSubmit（）适用于以事件的机制以ajax提交form表单（超链接、图片的click事件），该方法作用与ajaxForm()类似，但它 更为灵活，因为他依赖于事件机制，只要有事件存在就能使用该方法。你只需指定该form的action属性即可，不需要提供submit按钮。

$(document).ready(function(){

$('#btn').click(function(){

$('#registerForm').ajaxSubmit(function(data){

alert(data);

});

return false;

});

});

该段代码作用是在表单中id为btn的按钮click事件触发时通过ajaxSubmit（）方法以ajax技术提交表单到表单的action所指路径



formSerialize（）是将一个form中所有的表单元素以 name作为key，value作为值进行序列化操作，这就需要你必须为每一个表单元素设置表单元素name属性及填充表单元素value的值，最好也设 置id方便jquery定位表单元素。若要使用此方法你必须设置表单元素name属性及填充表单元素value的值，我在初次使用时就忘了设置name属 性，最后在同事的帮助下找了好久才发现此错误。

var str=$('#registerForm').formSerialize(); // registerForm为form id

alert(str);

fieldSerialize（）是将form中表单元素进行序列化以name作为key，value作为值进行序列化操作，这就需要你必须为每一个表单元素设置表单元素name属性及填充表单元素value的值。

var str=$('#username). fieldSerialize();

alert(str);

$get方式提交表单

get() 方法通过远程 HTTP GET 请求载入信息

格式

$(selector).get(url,data,success(response,status,xhr),dataType)

请求 test.php 网页，传送2个参数，忽略返回值：

$.get("test.php", { name: "John", time: "2pm" } );

显示 test.php 返回值(HTML 或 XML，取决于返回值)：

代码如下	复制代码
$.get("test.php", function(data){ alert("Data Loaded: " + data); });

ajax 序列化表单

$.（#Form）.serialize( NameValuePair )//发送ID/CLASSS为form的表单里所有要提交的数据

虚拟一个表单，并设置表单控件名与值。

参数
NameValuePair

必选项。设置虚拟的表单控件。该参数形式为：{ name1=value, name2=value2, ......}
返回值

虚拟表单序列化后的字符串，其格式如：username=%E5%95%8A%E8%94%A1&password=123456

代码如下

复制代码

<form> <div><inputtype="text"name="a"value="1"id="a"/></div> <div><inputtype="text"name="b"value="2"id="b"/></div> <div><inputtype="hidden"name="c"value="3"id="c"/></div> <div> <textareaname="d"rows="8"cols="40">4</textarea> </div> <div><selectname="e"> <optionvalue="5"selected="selected">5</option> <optionvalue="6">6</option> <optionvalue="7">7</option> </select></div> <div> <inputtype="checkbox"name="f"value="8"id="f"/> </div> <div> <inputtype="submit"name="g"value="Submit"id="g"/> </div> </form> .serialize() 方法可以操作已选取个别表单元素的 jQuery 对象，比如 <input>, <textarea> 以及 <select>。不过源码天空，选择 <form> 标签本身进行序列化一般更容易些： $('form').submit(function(){ alert($(this).serialize()); returnfalse; });

输出标准的查询字符串：

a=1&b;=2&c;=3&d;=4&e;=5

$POST方式提交表单

$.post

jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求

参数：

url (String) : 发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

代码如下	复制代码
$.post("momsg.php",{"tel":$("#username").val()},function(data){ if(data==0)//0 成功 1 不成功 2 手机号码格式不对 { // } });

通过 AJAX POST 请求改变 div 元素的文本：

代码如下	复制代码
$("input").keyup(function(){ txt=$("input").val(); $.post("demo_ajax_gethint.asp",{suggest:txt},function(result){ $("span").html(result); }); });

实例

代码如下

复制代码

<script type="text/javascript"> function adddata() { var typeName=$("#<%=this.typeName.ClientID%>").val(); var msg=" not be empty"; if(typeName=="") { if(msg!="") { alert(msg); return false; } } else { //显示进度条 $("#loading").ajaxStart(function(){ $(this).show(); }); //提交前触发的事件 $("#msg").ajaxSend(function(request, settings){$(this).append("<li>Starting request at " + settings.url + "</li>");}); //这里的countryid 可以动态从GridView里面取 var countryid= $("#<%=this.drpCountry.ClientID%>").val();//获取下拉菜单值 var countryname=format_get_name(countryid);//获取下拉菜单文本 var typeName = $("#<%=this.typeName.ClientID%>").val();//获取txt为typeName的值 var showTypeDesc = $("#<%=this.showTypeDesc.ClientID%>").val();//获取txt为showTypeDesc的值 //调用Juqery Ajax $.ajax({ type: "POST", url: "addNews.aspx", timeout: 20000, error: function(){alert('error');}, data: "countryid="+countryid+"&countryname="+countryname+"&typeName="+typeName+"&showTypeDesc="+showTypeDesc, success: function(msg) { var text=msg.split('<'); //当AJAX请求失败时添加一个被执行的方法 $("#msg").ajaxError(function(request, settings){ $(this).append("<li>Error requesting page " + settings.url + "</li>"); }); //当AJAX请求成功时添加一个被执行的方法 $("#msg").ajaxSuccess(function(request, settings){ $(this).append(text[0]); }); //清空文本里面的值 $("#<%=this.typeName.ClientID%>").val(""); $("#<%=this.showTypeDesc.ClientID%>").val(""); return false; } }); } } //获取下拉菜单里面的文本内容 function format_get_name(id) { var drp = $('<%=drpCountry.ClientID%>'); for ( var i =0;i<drp.options.length;i++) { if ( drp.options[i].value == id ) { return drp.options[i].text; } } return ''; } </script>

[b]精髓：[/b]

jquery的ajax提交form表单方式总结

2012-08-08 16:25 28564人阅读 评论(0) 收藏 举报
jqueryajaxfunctionserveraspclass
方法一：

function AddHandlingFeeToRefund()

{

var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx";

alert($('#formAddHandlingFee').serialize());

$.ajax({

type: "POST",

dataType: "html",

url: AjaxURL + '?Action=' + 'SubmitHandlingFee' +
'&OrderNumber=' + $.trim($("#<%=this.txtOrderNumber.ClientID
%>").val()),

data: $('#formAddHandlingFee').serialize(),//要发送的是formAddHandlingFee表单中的数据

success: function (result) {

var strresult=result;

alert(strresult);

//加载最大可退金额

$("#spanMaxAmount").html(strresult);

},

error: function(data) {

alert("error:"+data.responseText);

}

});

}

方法二：

//ajax提交form表单的方式

$('#formAddHandlingFee').submit(function() {

var AjaxURL= "../OrderManagement/AjaxModifyOrderService.aspx";

alert($('#formAddHandlingFee').serialize());

$.ajax({

type: "POST",

dataType: "html",

url: AjaxURL + '?Action=' + 'SubmitHandlingFee' +
'&OrderNumber=' + $.trim($("#<%=this.txtOrderNumber.ClientID
%>").val()),

data: $('#formAddHandlingFee').serialize(),

success: function (data) {

var strresult=data;

alert(strresult);

//加载最大可退金额

$("#spanMaxAmount").html(strresult);

},

error: function(data) {

alert("error:"+data.responseText);

}

});

}

);

页面html代码：

<form id="formAddHandlingFee"
name="formAddHandlingFee" enctype="multipart/form-data"
onsubmit="AddHandlingFeeToRefund()">

<table id="AddHandlingFee" class="Wfill">

<tr>

<td>

<asp:Literal ID="UI_Amount"
runat="server" Text="处理费用" meta:resourcekey="HandlingFeeAmount" />

</td>

<td>

<input type="text"
id="txtHandlingFeeAmount" name="txtHandlingFeeAmount"
class="{required:true,number:true}" maxlength="12" />

</td>

</tr>

<tr>

<td>

<asp:Literal ID="UI_HandlingFeeType"
runat="server" Text="费用类型" meta:resourcekey="HandlingFeeHandlingFeeType"
/>

</td>

<td>

<crmweb:HtmlSelectControl
ID="HandlingFeeType"
EnumTypeName="DX.OMS.Model.Common.HandlingFeeType,DX.OMS.Model.Common"
EmptyValue="" EmptyText="Select" runat="server" class="text {required:true}"/>

</td>

</tr>

<tr>

<td>

<asp:Literal ID="UI_Notes" runat="server" Text="备注" meta:resourcekey="HandlingFeeNotes" />

</td>

<td>

<textarea id="txtNotes"
name="txtNotes" class="text {required:true}" cols="22" rows="2"
maxlength="100"></textarea>

</td>

</tr>

<tr>

<td>

</td>

<td>

<input id="Submit1" type="submit" value="添加处理费" />

<asp:Button ID="Button1"
runat="server" Text="添加处理费"
OnClientClick="javascript:AddHandlingFeeToRefund()" />

</td>

</tr>

</table>

</form>

方法三、

今天刚好看到Jquery的ajax提交数据到服务器的方法,原文是:

保存数据到服务器，成功时显示信息。

jQuery 代码:

$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});

后来我就想了一下,我要提交form表单有没有办法呢?但是我不可能每个fom的input都写一次var demo=$("#divname").val();的.

后来,今天我看到一个方法,就是.map,就做出一下想法了,可以借鉴哟;
html代码如下,下面我要提交Form 的id为dlg_form的所有input数据,
<form id="dlg_form" method="post">
输入框加内容
</form>
是不是很多,如果要你每个input都写的话,是不是要吐血?
看看我的方法,首先我们把所有的input的name和value都取下来,
js代码如下:
var str_data=$("#dlg_form input").map(function(){
return ($(this).attr("name")+'='+$(this).val());
}).get().join("&") ;

alert(data);

ps:你alert一下,你会发现,这里面的架构就是divname=xxx&divname2=xxxx等等,

然后在回头看看ajax提交的:

$.ajax({
type: "POST",
url: "some.php",
data: "name=John&location=Boston",
success: function(msg){
alert( "Data Saved: " + msg );
}
});

有没有发现,只要我们把我们上面获取到的,放到data里面就可以了?

完整的代码,修改后应该是

$(document).ready(function () {
$('#tijiao').click(function() {
var str_data=$("#form input").map(function(){
return ($(this).attr("name")+'='+$(this).val());
}).get().join("&");
$.ajax({
type: "POST",
dataType: "html",
url: "{:U('Register/validation')}",
data:str_data,
success: function(msg){
alert(msg);return false;
alert( "Data Saved: " + msg );
}
});
});
});

ok,就这么简单,如果适用的话,可以拿去用哟...