jquery ajax提交表单数据的两种实现方法


Posted in Javascript onApril 29, 2010

之前实现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; 
}

注:Jquery.form是Jquery用于帮助操作表单的一个插件,具体的去网上看看教程!
Javascript 相关文章推荐
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
Javascript模块化编程(三)require.js的用法及功能介绍
Jan 17 Javascript
css+js实现部分区域高亮可编辑遮罩层
Mar 04 Javascript
JavaScript原生对象之Date对象的属性和方法详解
Mar 13 Javascript
js同源策略详解
May 21 Javascript
javascript实现倒计时(精确到秒)
Jun 26 Javascript
Jquery AJAX POST与GET之间的区别详细介绍
Oct 17 Javascript
Vue二次封装axios为插件使用详解
May 21 Javascript
Node.js使用supervisor进行开发中调试的方法
Mar 26 Javascript
node.js express框架简介与实现
Jul 23 Javascript
从Node.js事件触发器到Vue自定义事件的深入讲解
Jun 26 Javascript
js简单粗暴的发布订阅示例代码
Jan 23 Javascript
jQuery 动画弹出窗体支持多种展现方式
Apr 29 #Javascript
jQuery 工具函数学习资料
Apr 29 #Javascript
IE JS无提示关闭窗口不提示的方法
Apr 29 #Javascript
比Jquery的document.ready更快的方法
Apr 28 #Javascript
ExtJS Store的数据访问与更新问题
Apr 28 #Javascript
JS 事件绑定函数代码
Apr 28 #Javascript
javaScript checkbox 全选/反选及批量删除
Apr 28 #Javascript
You might like
PHP脚本数据库功能详解(上)
2006/10/09 PHP
PHP开发环境配置(MySQL数据库安装图文教程)
2010/04/28 PHP
destoon在360浏览器下出现用户被强行注销的解决方法
2014/06/26 PHP
qq登录,新浪微博登录接口申请过程中遇到的问题
2014/07/22 PHP
鼠标经过的文本框textbox变色
2009/05/21 Javascript
js escape,unescape解决中文乱码问题的方法
2010/05/26 Javascript
JavaScript随机排序(随即出牌)
2010/09/17 Javascript
js和css写一个可以自动隐藏的悬浮框
2014/03/05 Javascript
JQuery实现当鼠标停留在某区域3秒后自动执行
2014/09/09 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
浅谈jQuery页面的滚动位置scrollTop、scrollLeft
2015/05/19 Javascript
函数window.open实现关闭所有的子窗口
2015/08/03 Javascript
javascript中 try catch用法
2015/08/16 Javascript
chrome调试javascript详解
2015/10/21 Javascript
javascript cookie的基本操作(添加和删除)
2017/07/24 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
angular4应用中输入的最小值和最大值的方法
2019/05/17 Javascript
antd 表格列宽自适应方法以及错误处理操作
2020/10/27 Javascript
[02:03]DOTA2亚洲邀请赛 HGT战队出场宣传片
2015/02/07 DOTA
跟老齐学Python之list和str比较
2014/09/20 Python
python3爬取淘宝信息代码分析
2018/02/10 Python
python实现手机通讯录搜索功能
2018/02/22 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
Python 爬取必应壁纸的实例讲解
2020/02/24 Python
python中如何使用虚拟环境
2020/10/14 Python
thinkphp5 路由分发原理
2021/03/18 PHP
使用CSS实现阅读进度条
2017/02/27 HTML / CSS
匡威意大利官方商店 :Converse意大利
2018/11/27 全球购物
美国基督教约会网站:ChristianCafe.com
2020/02/04 全球购物
枚举和一组预处理的#define有什么不同
2016/09/21 面试题
物业管理大学生个人的自我评价
2013/10/10 职场文书
迟到早退检讨书
2014/02/10 职场文书
转学证明范本
2015/06/19 职场文书
教学副校长工作总结
2015/08/13 职场文书
解决Swagger2返回map复杂结构不能解析的问题
2021/07/02 Java/Android
使用PostGIS完成两点间的河流轨迹及流经长度的计算(推荐)
2022/01/18 PostgreSQL