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 相关文章推荐
jquery photoFrame 图片边框美化显示插件
Jun 28 Javascript
jQuery阻止冒泡和HTML默认操作
Nov 17 Javascript
使用AOP改善javascript代码
May 01 Javascript
JS中产生标识符方式的演变
Jun 12 Javascript
微信js-sdk预览图片接口及从拍照或手机相册中选图接口用法示例
Oct 13 Javascript
基于SpringMVC+Bootstrap+DataTables实现表格服务端分页、模糊查询
Oct 30 Javascript
jQuery插件FusionCharts实现的3D柱状图效果实例【附demo源码下载】
Mar 03 Javascript
Webpack执行命令参数详解
Jun 17 Javascript
vue 的keep-alive缓存功能的实现
Mar 22 Javascript
Jquery和CSS实现选择框重置按钮功能
Nov 08 jQuery
怎么使用javascript深度拷贝一个数组
Jun 06 Javascript
JS创建或填充任意长度数组的小技巧汇总
Oct 24 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学习之整理字符串
2011/04/17 PHP
php使用simplexml_load_file加载XML文件并显示XML的方法
2015/03/19 PHP
php无限级分类实现方法分析
2016/10/19 PHP
(JS实现)MapBar中坐标的加密和解密的脚本
2007/05/16 Javascript
触屏中的JavaScript事件分析
2015/02/06 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
为你的微信小程序体积瘦身详解
2017/05/20 Javascript
vue axios用法教程详解
2017/07/23 Javascript
vue源码解析之事件机制原理
2018/04/21 Javascript
vue单页缓存方案分析及实现
2018/09/25 Javascript
vue.js引入外部CSS样式和外部JS文件的方法
2019/01/06 Javascript
vue下载二进制流图片操作
2020/10/26 Javascript
[01:14:31]Secret vs VG 2018国际邀请赛淘汰赛BO3 第一场 8.23
2018/08/24 DOTA
使用Python生成XML的方法实例
2017/03/21 Python
用Python实现KNN分类算法
2017/12/22 Python
Python 绘图库 Matplotlib 入门教程
2018/04/19 Python
python读取一个目录下所有txt里面的内容方法
2018/06/23 Python
使用python验证代理ip是否可用的实现方法
2018/07/25 Python
Python3爬虫爬取百姓网列表并保存为json功能示例【基于request、lxml和json模块】
2018/12/05 Python
python判断一个数是否能被另一个整数整除的实例
2018/12/12 Python
python使用原始套接字发送二层包(链路层帧)的方法
2019/07/22 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
Python 内置变量和函数的查看及说明介绍
2019/12/25 Python
详解python 降级到3.6终极解决方案
2020/02/06 Python
Pycharm激活码激活两种快速方式(附最新激活码和插件)
2020/03/12 Python
Pytorch转tflite方式
2020/05/25 Python
Python jieba结巴分词原理及用法解析
2020/11/05 Python
pyqt5实现井字棋的示例代码
2020/12/07 Python
英国时尚饰品和发饰购物网站:Claire’s
2017/07/04 全球购物
上海奥佳笔试题面试题
2016/11/16 面试题
贺卡寄语大全
2014/04/11 职场文书
加强作风建设工作总结
2014/10/23 职场文书
孝老爱亲事迹材料
2014/12/24 职场文书
小学国庆节活动总结
2015/03/23 职场文书
初中英语教学随笔
2015/08/15 职场文书
JavaScript 数组去重详解
2021/09/15 Javascript