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 相关文章推荐
JS中Iframe之间传值及子页面与父页面应用
Mar 11 Javascript
探讨JavaScript中声明全局变量三种方式的异同
Dec 03 Javascript
js判断浏览器版本以及浏览器内核的方法
Jan 20 Javascript
jQuery实现个性翻牌效果导航菜单的方法
Mar 09 Javascript
JQuery分屏指示器图片轮换效果实例
May 21 Javascript
JavaScript多线程详解
Aug 12 Javascript
AngularJS Module方法详解
Dec 08 Javascript
JS简单判断滚动条的滚动方向实现方法
Apr 28 Javascript
JavaScript基本语法_动力节点Java学院整理
Jun 26 Javascript
js设置随机切换背景图片的简单实例
Nov 12 Javascript
nuxt+axios实现打包后动态修改请求地址的方法
Apr 22 Javascript
Vue实现圆环进度条的示例
Feb 06 Vue.js
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
不用数据库的多用户文件自由上传投票系统(3)
2006/10/09 PHP
PHP系列学习之日期函数使用介绍
2012/08/18 PHP
PHP读取数据库并按照中文名称进行排序实现代码
2013/01/29 PHP
解析strtr函数的效率问题
2013/06/26 PHP
ThinkPHP分页类使用详解
2014/03/05 PHP
简单谈谈php中的unicode和utf8编码
2015/06/10 PHP
thinkPHP5框架auth权限控制类与用法示例
2018/06/12 PHP
瀑布流布局并自动加载实现代码
2013/03/12 Javascript
JavaScript类继承及实例化的方法
2015/07/25 Javascript
node.js从数据库获取数据
2016/05/08 Javascript
Web程序员必备的7个JavaScript函数
2016/06/14 Javascript
JS基于面向对象实现的多个倒计时器功能示例
2017/02/28 Javascript
jquery中关于bind()方法的使用技巧分享
2017/03/30 jQuery
使用ionic(选项卡栏tab) icon(图标) ionic上拉菜单(ActionSheet) 实现通讯录界面切换实例代码
2017/10/20 Javascript
vue源码学习之Object.defineProperty 对数组监听
2018/05/30 Javascript
Fundebug支持监控微信小程序HTTP请求错误的方法
2019/02/21 Javascript
Vue数据绑定简析小结
2019/05/07 Javascript
Python模拟登录验证码(代码简单)
2016/02/06 Python
Python实现约瑟夫环问题的方法
2016/05/03 Python
Python中字典的setdefault()方法教程
2017/02/07 Python
Python解惑之True和False详解
2017/04/24 Python
Python使用正则表达式过滤或替换HTML标签的方法详解
2017/09/25 Python
对python条件表达式的四种实现方法小结
2019/01/30 Python
python创造虚拟环境方法总结
2019/03/04 Python
Python3 requests文件下载 期间显示文件信息和下载进度代码实例
2019/08/16 Python
Python3爬虫中Splash的知识总结
2020/07/10 Python
深入浅析Python代码规范性检测
2020/07/31 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
Kangol帽子官网:坎戈尔袋鼠
2018/09/26 全球购物
Deux par Deux官方网站:设计师童装
2020/01/03 全球购物
杭州-DOTNET笔试题集
2013/09/25 面试题
社区维稳工作方案
2014/06/06 职场文书
幼儿园清明节活动总结
2014/07/04 职场文书
工程部岗位职责范本
2015/04/11 职场文书
nginx配置指令之server_name的具体使用
2022/08/14 Servers
Vue Element plus使用方法梳理
2022/12/24 Vue.js