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