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 相关文章推荐
音乐播放用的的几个函数
Sep 07 Javascript
jQuery下的几个你可能没用过的功能
Aug 29 Javascript
改进UCHOME的记录发布,增强可访问性用户体验
Jan 17 Javascript
JS防止用户多次提交的简单代码
Aug 01 Javascript
javascript验证邮件地址和MX记录的方法
Jun 16 Javascript
Node.js插件安装图文教程
May 06 Javascript
JS 滚动事件window.onscroll与position:fixed写兼容IE6的回到顶部组件
Oct 10 Javascript
AngularJS实现给动态生成的元素绑定事件的方法
Dec 14 Javascript
JS正则RegExp.test()使用注意事项(不具有重复性)
Dec 28 Javascript
vue-cli2 构建速度优化的实现方法
Jan 08 Javascript
Vue侦测相关api的实现方法
May 22 Javascript
react 不用插件实现数字滚动的效果示例
Apr 14 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安装xdebug/php安装pear/phpunit详解步骤(图)
2013/12/22 PHP
用PHP来计算某个目录大小的方法
2014/04/01 PHP
WordPress开发中短代码的实现及相关函数使用技巧
2016/01/05 PHP
php进行ip地址掩码运算处理的方法
2016/07/11 PHP
js字符编码函数区别分析
2008/06/05 Javascript
Js实现手机发送验证码时按钮延迟操作
2014/06/20 Javascript
js获取当前时间显示在页面上并每秒刷新
2014/12/24 Javascript
jquery解决客户端跨域访问问题
2015/01/06 Javascript
js+html5获取用户地理位置信息并在Google地图上显示的方法
2015/06/05 Javascript
举例详解JavaScript中Promise的使用
2015/06/24 Javascript
layui框架中layer父子页面交互的方法分析
2017/11/15 Javascript
Vue2.0+Vux搭建一个完整的移动webApp项目的示例
2019/03/19 Javascript
vue中的inject学习教程
2019/04/24 Javascript
[01:01:24]DOTA2上海特级锦标赛A组败者赛 EHOME VS CDEC第三局
2016/02/25 DOTA
Python实现Linux的find命令实例分享
2017/06/04 Python
Python算法输出1-9数组形成的结果为100的所有运算式
2017/11/03 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
python字符串中匹配数字的正则表达式
2019/07/03 Python
纯python进行矩阵的相乘运算的方法示例
2019/07/17 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
基于python实现把json数据转换成Excel表格
2020/05/07 Python
Python scrapy爬取小说代码案例详解
2020/07/09 Python
python两种获取剪贴板内容的方法
2020/11/06 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
大学生自我鉴定
2013/12/16 职场文书
连锁酒店店长职责范本
2014/02/13 职场文书
校运会口号
2014/06/18 职场文书
金融保险专业求职信
2014/09/03 职场文书
民主生活会对照检查材料
2014/09/22 职场文书
政府四风问题整改措施
2014/10/04 职场文书
预备党员转正党小组意见
2015/06/01 职场文书
找规律教学反思
2016/02/23 职场文书
创业计划书之情侣餐厅
2019/09/29 职场文书
python文件名批量重命名脚本实例代码
2021/04/22 Python
OpenCV-Python实现图像平滑处理操作
2021/06/08 Python