国内最全IT社区平台 联系我们 | 收藏本站
华晨云阿里云优惠2
您当前位置:首页 > web前端 > jquery > JQuery ajax提交表单的的两种方式

JQuery ajax提交表单的的两种方式

来源:程序员人生   发布时间:2014-02-15 23:01:08 阅读次数:3932次

貌似AJAX越来越火了,作为一个WEB程序开发者要是不会这个感觉就要落伍,甚至有可能在求职的时候屡被淘汰。我也是一个WEB程序开发者,当然我也要“随波逐流”一把,不然饭碗不保啊!

之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐。学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery。Jquery AJAX提交表单有两种方式,一是url提交,二是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: "POST",
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>
</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">联系人:</td>
<td class="tableBg2">
<asp:TextBox ID="txtF_ContractPerson" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="30%" class="tableBg1">联系人职务:</td>
<td class="tableBg2">
<asp:TextBox ID="txtF_ContractPersonPosition" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="30%" class="tableBg1">联系电话:</td>
<td class="tableBg2">
<asp:TextBox ID="txtF_ContractPhone" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="30%" class="tableBg1">回访时间:</td>
<td class="tableBg2">
<asp:TextBox ID="txtF_ReturnVisitDate" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="30%" class="tableBg1">回访内容:</td>
<td class="tableBg2">
<asp:TextBox ID="txtF_ReturnVisitContent" runat="server"></asp:TextBox>
</td>
</tr>
<tr>
<td width="30%" class="tableBg1">回访相关文档:</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>

后台代码:

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>
/// 根据不同需要,设定模型->获取模型
/// </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;
}

作者博客:http://www.cnblogs.com/duncannjm/

生活不易,码农辛苦
如果您觉得本网站对您的学习有所帮助,可以手机扫描二维码进行捐赠
程序员人生
------分隔线----------------------------
分享到:
------分隔线----------------------------
关闭
程序员人生