jquery ajax提交表單數據的兩種實現方法
2024-05-06 14:10:13
供稿：網友
之前實現AJAX使用Javascript腳本一個一個敲出來的，很繁瑣。學習Jquery之后就感覺實現AJAX并不是那么的困難了，當然除了Jquery框架外還有其它的優秀框架這里我就著重說下比較流行的Jquery。Jquery AJAX提交表單有兩種方式，一是url參數提交數據，二是form提交（和平常一樣在后臺可以獲取到Form表單的值）。在所要提交的表單中，如果元素很多的話建議用第二種方式進行提交，當然你要是想練練“打字水平”的話用第一種方式提交也未嘗不可，相信開發者都不想費白勁吧！廢話不多說了貼實例。
首先要下載Jquery、Jquery.form這兩個插件，網上很多的！
一：Url參數提交數據
代碼如下:
<script type ="text/javascript" src ="../js/jquery.js"></script>
<script type="text/javascript">
function checkCorpID()//檢測客戶編號是否可用
{
if($.trim($("#txtF_CORPID")[0].value)=="")//txtF_CORPID是客戶編號輸入框
{
alert("請輸入客戶編號!");
}
else
{
$("#checkFlag").html("正在檢測");//顯示提示信息
$.ajax({
type: "get",
url: "CheckCorpID.ashx",
data: "ID="+$.trim($("#txtF_CORPID")[0].value),//提交表單，相當于CheckCorpID.ashx?ID=XXX
success: function(msg){$("#checkFlag").html("");alert( msg ); } //操作成功后的操作！msg是后臺傳過來的值
});
}
}
</script>
后臺代碼：
代碼如下:
if(context.Request.Params["ID"].ToString()!="")
{
Pxt.Logic.SYS.CORP_BASE_INFO cbiL = new Pxt.Logic.SYS.CORP_BASE_INFO();
bool flag=cbiL.checkCorpID(context.Request.Params["ID"].ToString());
if (flag)
{
context.Response.Write("該客戶編號已被占用!");
}
else
{
context.Response.Write("該客戶編號可用!");
}
}
二：Form提交數據
前臺代碼：
代碼如下:
<script type ="text/javascript" src ="../js/jquery.js"></script> //必須要引用
<script type ="text/javascript" src ="../js/jquery.form.js"></script> //必須要引用
<script type="text/javascript">
// wait for the DOM to be loaded
$(document).ready(function()
{
$('#Tip').hide();//顯示操作提示的元素不可見
$('#form1').submit(function()//提交表單
{
//alert("ddd");
var options = {
target:'#Tip', //后臺將把傳遞過來的值賦給該元素
url:'ReturnVisit.aspx?flag=do', //提交給哪個執行
type:'POST',
success: function(){ alert($('#Tip').text());} //顯示操作提示
};
$('#form1').ajaxSubmit(options);
return false; //為了不刷新頁面,返回false，反正都已經在后臺執行完了，沒事！
});
}
);
</script>
<body>
<form id="form1" runat="server">
<div>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" class="tableCategory">客戶回訪</td>
