jquery ajax提交表單數(shù)據(jù)的兩種實(shí)現(xiàn)方法
首先要下載Jquery、Jquery.form這兩個(gè)插件,網(wǎng)上很多的!
一:Url參數(shù)提交數(shù)據(jù)
<script type ="text/javascript" src ="../js/jquery.js"></script>
<script type="text/javascript">
function checkCorpID()//檢測(cè)客戶編號(hào)是否可用
{
if($.trim($("#txtF_CORPID")[0].value)=="")//txtF_CORPID是客戶編號(hào)輸入框
{
alert("請(qǐng)輸入客戶編號(hào)!");
}
else
{
$("#checkFlag").html("正在檢測(cè)");//顯示提示信息
$.ajax({
type: "get",
url: "CheckCorpID.ashx",
data: "ID="+$.trim($("#txtF_CORPID")[0].value),//提交表單,相當(dāng)于CheckCorpID.ashx?ID=XXX
success: function(msg){$("#checkFlag").html("");alert( msg ); } //操作成功后的操作!msg是后臺(tái)傳過(guò)來(lái)的值
});
}
}
</script>
后臺(tái)代碼:
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("該客戶編號(hào)已被占用!");
}
else
{
context.Response.Write("該客戶編號(hào)可用!");
}
}
二:Form提交數(shù)據(jù)
前臺(tái)代碼:
<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();//顯示操作提示的元素不可見(jiàn)
$('#form1').submit(function()//提交表單
{
//alert("ddd");
var options = {
target:'#Tip', //后臺(tái)將把傳遞過(guò)來(lái)的值賦給該元素
url:'ReturnVisit.aspx?flag=do', //提交給哪個(gè)執(zhí)行
type:'POST',
success: function(){ alert($('#Tip').text());} //顯示操作提示
};
$('#form1').ajaxSubmit(options);
return false; //為了不刷新頁(yè)面,返回false,反正都已經(jīng)在后臺(tái)執(zhí)行完了,沒(méi)事!
});
}
);
</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>
</tr>
<tr>
<td width="30%" class="tableBg1">客戶名稱:</td>
<td class="tableBg2">
<asp:TextBox ID="txtF_CorpName" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="30%" class="tableBg1">回訪主題:</td>
<td class="tableBg2">
<asp:TextBox ID="txtF_ReturnVisitTitle" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="30%" class="tableBg1">聯(lián)系人:</td>
<td class="tableBg2">
<asp:TextBox ID="txtF_ContractPerson" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="30%" class="tableBg1">聯(lián)系人職務(wù):</td>
<td class="tableBg2">
<asp:TextBox ID="txtF_ContractPersonPosition" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="30%" class="tableBg1">聯(lián)系電話:</td>
<td class="tableBg2">
<asp:TextBox ID="txtF_ContractPhone" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="30%" class="tableBg1">回訪時(shí)間:</td>
<td class="tableBg2">
<asp:TextBox ID="txtF_ReturnVisitDate" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="30%" class="tableBg1">回訪內(nèi)容:</td>
<td class="tableBg2">
<asp:TextBox ID="txtF_ReturnVisitContent" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="30%" class="tableBg1">回訪相關(guān)文檔:</td>
<td class="tableBg2">
<asp:TextBox ID="txtF_ReturnVisitFile" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="30%" class="tableBg1"> </td>
<td class="tableBg2">
<asp:Button ID="Submit_BT" runat="server" Text="確定" CssClass="button" />
<input type="reset" class="button" value="還原" />
</td>
</tr>
</table>
<span id="Tip"></span>
</div>
</form>
</body>
后臺(tái)代碼:
protected void Page_Load(object sender, EventArgs e)
{
{
if (Request.QueryString["flag"] != null && Request.QueryString["flag"].ToString() == "do")
{
Pxt.Logic.DBRec.ReturnVisit bll = new Pxt.Logic.DBRec.ReturnVisit();
if (bll.Add(model(0)) > 0)
{
Response.Write("操作成功!");
Response.End();
}
}
}
}
/**//// <summary>
/// 根據(jù)不同需要,設(shè)定模型->獲取模型
/// </summary>
/// <param name="id">ID值</param>
/// <returns></returns>
private Pxt.Model.DBRec.ReturnVisit model(int id)
{
//獲取表單值
string F_CorpName = Request.Form["txtF_CorpName"].ToString();
string F_ReturnVisitTitle = Request.Form["txtF_ReturnVisitTitle"].ToString();
string F_ContractPerson = Request.Form["txtF_ContractPerson"].ToString();
string F_ContractPersonPosition = Request.Form["txtF_ContractPersonPosition"].ToString();
string F_ContractPhone = Request.Form["txtF_ContractPhone"].ToString();
DateTime F_ReturnVisitDate = DateTime.Parse(Request.Form["txtF_ReturnVisitDate"].ToString());
string F_ReturnVisitContent = Request.Form["txtF_ReturnVisitContent"].ToString();
string F_ReturnVisitFile = Request.Form["txtF_ReturnVisitFile"].ToString();
string Refer = Session["username"].ToString();
DateTime DoTime = DateTime.Now.Date;
Pxt.Model.DBRec.ReturnVisit model = new Pxt.Model.DBRec.ReturnVisit();
if (id > 0)//修改記錄,否則表示增加記錄
{
model.ID = id;
}
model.F_CorpName = F_CorpName;
model.F_ReturnVisitTitle = F_ReturnVisitTitle;
model.F_ContractPerson = F_ContractPerson;
model.F_ContractPersonPosition = F_ContractPersonPosition;
model.F_ContractPhone = F_ContractPhone;
model.F_ReturnVisitDate = F_ReturnVisitDate;
model.F_ReturnVisitContent = F_ReturnVisitContent;
model.F_ReturnVisitFile = F_ReturnVisitFile;
model.Refer = Refer;
model.DoTime = DoTime;
return model;
}
注:Jquery.form是Jquery用于幫助操作表單的一個(gè)插件,具體的去網(wǎng)上看看教程!
- jquery ajax提交表單數(shù)據(jù)的兩種方式
- jQuery使用ajaxSubmit()提交表單示例
- jQuery ajax中使用serialize()方法提交表單數(shù)據(jù)示例
- jquery+ajax驗(yàn)證不通過(guò)也提交表單問(wèn)題處理
- jQuery Ajax提交表單查詢獲得數(shù)據(jù)實(shí)例代碼
- Jquery基于Ajax方法自定義無(wú)刷新提交表單Form實(shí)例
- jquery ajax 如何向jsp提交表單數(shù)據(jù)
- jQuery提交表單ajax查詢實(shí)例代碼
- jQuery ajaxSubmit 實(shí)現(xiàn)ajax提交表單局部刷新
- jQuery基于Ajax方式提交表單功能示例
相關(guān)文章
jQuery 移動(dòng)端artEditor富文本編輯器
這篇文章主要介紹了jQuery 移動(dòng)端artEditor富文本編輯器 的相關(guān)資料,需要的朋友可以參考下2016-01-01jquery+css實(shí)現(xiàn)簡(jiǎn)單的圖片輪播效果
這篇文章主要介紹了jquery+css實(shí)現(xiàn)簡(jiǎn)單的圖片輪播效果,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-08-08jqGrid 學(xué)習(xí)筆記整理——進(jìn)階篇(一 )
這篇文章主要介紹了jqGrid 學(xué)習(xí)筆記整理——進(jìn)階篇(一 )的相關(guān)資料,需要的朋友可以參考下2016-04-04jquery查找父元素、子元素(個(gè)人經(jīng)驗(yàn)總結(jié))
對(duì)使用js或者jquery查找父元素、子元素比較混淆的朋友可以參考下本文,因?yàn)槭莻€(gè)人總結(jié),用起來(lái)會(huì)比較方便2014-04-04jquery根據(jù)name取得select選中的值實(shí)例(超簡(jiǎn)單)
下面小編就為大家分享一篇jquery根據(jù)name取得select選中的值實(shí)例(超簡(jiǎn)單),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-01-01struts2+jquery組合驗(yàn)證注冊(cè)用戶是否存在
這篇文章主要介紹了使用struts2+jquery如何驗(yàn)證注冊(cè)用戶是否存在,需要的朋友可以參考下2014-04-04JQuery獲取元素尺寸、位置及頁(yè)面滾動(dòng)事件應(yīng)用示例
這篇文章主要介紹了JQuery獲取元素尺寸、位置及頁(yè)面滾動(dòng)事件應(yīng)用,結(jié)合實(shí)例形式分析了jQuery針對(duì)頁(yè)面元素動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,并給出了購(gòu)物車動(dòng)畫效果案例進(jìn)行總結(jié),需要的朋友可以參考下2019-05-05jQuery簡(jiǎn)單入門示例之用戶校驗(yàn)demo示例
這篇文章主要介紹了jQuery簡(jiǎn)單入門示例之用戶校驗(yàn)demo示例,分析了基于jQuery的簡(jiǎn)單用戶校驗(yàn)功能相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2016-07-07jQuery實(shí)現(xiàn)仿京東防抖動(dòng)菜單效果示例
這篇文章主要介紹了jQuery實(shí)現(xiàn)仿京東防抖動(dòng)菜單效果,結(jié)合實(shí)例形式分析了jQuery事件響應(yīng)及頁(yè)面屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-07-07