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 相关文章推荐
图片onload事件触发问题解决方法
Jul 31 Javascript
javascript实现带下拉子菜单的导航菜单效果
May 14 Javascript
js中flexible.js实现淘宝弹性布局方案
Jun 23 Javascript
jQuery EasyUI之DataGrid使用实例详解
Jan 04 Javascript
关于JS中的apply,call,bind的深入解析
Apr 05 Javascript
深入学习 JavaScript中的函数调用
Mar 23 Javascript
vue打包后显示空白正确处理方法
Nov 01 Javascript
关于 angularJS的一些用法
Nov 29 Javascript
Vue+SpringBoot开发V部落博客管理平台
Dec 27 Javascript
layui-laydate时间日历控件使用方法详解
Nov 15 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 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
NO3第三帝国留言簿制作过程
2006/10/09 PHP
生成随机字符串和验证码的类的PHP实例
2013/12/24 PHP
smarty获得当前url的方法分享
2014/02/14 PHP
php实现四舍五入的方法小结
2015/03/03 PHP
浅析Yii2 GridView 日期格式化并实现日期可搜索教程
2016/04/22 PHP
php生成图片缩略图功能示例
2017/02/22 PHP
ajax+php实现无刷新验证手机号的实例
2017/12/22 PHP
jQuery对象与DOM对象之间的转换方法
2010/04/15 Javascript
jQuery timers计时器简单应用说明
2010/10/28 Javascript
js中 关于undefined和null的区别介绍
2013/04/16 Javascript
jQuery的控件及事件(输入控件及回车事件)使用示例
2013/07/25 Javascript
jquery实现图片渐变切换兼容ie6/Chrome/Firefox
2013/08/02 Javascript
JavaScript字符串对象split方法入门实例(用于把字符串分割成数组)
2014/10/16 Javascript
浅谈javascript中this在事件中的应用
2015/02/15 Javascript
网页瀑布流布局jQuery实现代码
2016/10/21 Javascript
AngularJS+bootstrap实现动态选择商品功能示例
2017/05/17 Javascript
jQuery实现的简单手风琴效果示例
2018/08/29 jQuery
详解vue通过NGINX部署在子目录或者二级目录实践
2018/09/03 Javascript
简单了解TypeScript中如何继承 Error 类
2019/06/21 Javascript
vue轮播组件实现$children和$parent 附带好用的gif录制工具
2019/09/26 Javascript
vue组件系列之TagsInput详解
2020/05/14 Javascript
通过实例解析javascript Date对象属性及方法
2020/11/04 Javascript
Python常用模块介绍
2014/11/21 Python
用Python的Flask框架结合MySQL写一个内存监控程序
2015/11/07 Python
详解django+django-celery+celery的整合实战
2019/03/19 Python
python基础梳理(一)(推荐)
2019/04/06 Python
python将邻接矩阵输出成图的实现
2019/11/21 Python
解决Python paramiko 模块远程执行ssh 命令 nohup 不生效的问题
2020/07/14 Python
linux系统都有哪些运行级别
2016/03/26 面试题
年终奖发放方案
2014/06/02 职场文书
电子信息专业应届生自荐信
2014/06/04 职场文书
班级口号大全
2014/06/09 职场文书
村主任群众路线个人对照检查材料
2014/09/26 职场文书
python实战之90行代码写个猜数字游戏
2021/04/22 Python
解决MySQL存储时间出现不一致的问题
2021/04/28 MySQL
mysql升级到5.7时,wordpress导数据报错1067的问题
2021/05/27 MySQL