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

2016-02-19 13:06 55 1 收藏

下面是个简单易学的jquery ajax提交表单数据的两种实现方法教程,图老师小编详细图解介绍包你轻松学会,喜欢的朋友赶紧get起来吧!

【 tulaoshi.com - Web开发 】

之前实现AJAX使用Javascript脚本一个一个敲出来的,很繁琐。学习Jquery之后就感觉实现AJAX并不是那么的困难了,当然除了Jquery框架外还有其它的优秀框架这里我就着重说下比较流行的Jquery。Jquery AJAX提交表单有两种方式,一是url参数提交数据,二是form提交(和平常一样在后台可以获取到Form表单的值)。在所要提交的表单中,如果元素很多的话建议用第二种方式进行提交,当然你要是想练练“打字水平”的话用第一种方式提交也未尝不可,相信开发者都不想费白劲吧!废话不多说了贴实例。
首先要下载Jquery、Jquery.form这两个插件,网上很多的!
一:Url参数提交数据

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
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

后台代码:

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
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提交数据
前台代码:

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
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 runat="server"
div
table width="100%" border="0" align="center" cellpadding="0" cellspacing="0"
tr
td colspan="2"客户回访/td
/tr
tr
td width="30%"客户名称:/td
td
asp:TextBox runat="server"/asp:TextBox
/td
/tr
tr
td width="30%"回访主题:/td
td
asp:TextBox runat="server"/asp:TextBox
/td
/tr
tr
td width="30%"联系人:/td
td
asp:TextBox runat="server"/asp:TextBox
/td
/tr
tr
td width="30%"联系人职务:/td
td
asp:TextBox runat="server"/asp:TextBox
/td
/tr
tr
td width="30%"联系电话:/td
td
asp:TextBox runat="server"/asp:TextBox
/td
/tr
tr
td width="30%"回访时间:/td
td
asp:TextBox runat="server"/asp:TextBox
/td
/tr
tr
td width="30%"回访内容:/td
td
asp:TextBox runat="server"/asp:TextBox
/td
/tr
tr
td width="30%"回访相关文档:/td
td
asp:TextBox runat="server"/asp:TextBox
/td
/tr
tr
td width="30%" /td
td
asp:Button runat="server" Text="确定" CssClass="button" /
input type="reset" value="还原" /
/td
/tr
/table
span/span
/div
/form
/body

后台代码:

代码如下:

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)
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用于帮助操作表单的一个插件,具体的去网上看看教程!

来源:https://www.tulaoshi.com/n/20160219/1602973.html

延伸阅读
标签: Java JAVA基础
  4.1 表单数据概述 如果你曾经使用过Web搜索引擎,或者浏览过在线书店、股票价格、机票信息,或许会留意到一些古怪的URL,比如“http://host/path?user=Marty+Hall&origin=bwi&dest=lax”。这个URL中位于问号后面的部分,即“user=Marty+Hall&origin=bwi&dest=lax”,就是表单数据,这是将Web页面数据发送给服务...
标签: Web开发
我的解决办法如下(只针对客户端): 用户点击提交按钮后给按钮添加disabled属性 代码如下: $("input:submit").each(function() { var srcclick = $(this).attr("onclick"); if(typeof(srcclick)=="function"){ $(this).click(function() { if (srcclick()) { setdisabled(this); return true; } return false; });} }); functi...
标签: Web开发
方法一: html head titleUntitled Document/title (1)自动提交表单: meta http-equiv="Content-Type" content="text/html; charset=gb2312" /head script language=javascript setTimeout("document.form1.submit()",10000) /script body bgcolor="#FFFFFF" text="#000000" form name="form1" method="post" action="pp.asp" ...
标签: Web开发
引言     J2EE(Java 2 Enterprise Edition)技术已广泛应用在Web应用开发中,其中的JavaBean、Servlet技术为开发者提供了更为清晰的开发环境,使用JSP技术表现页面,使用Servlet技术完成大量的业务处理, 使用Bean来存储数据及一些业务处理。在WEB应用中,业务数据存储到数据库中的处理工作经常很繁重,其中一种主要的形...
标签: Web开发
做一个项目用到Ajax,开始觉得挺好,后来发现一个问题,例如删除一项,恢复之后就不能再接着删除, 必须要等一段时间,后来知道是IE缓存的问题 AJAX缓存页面是一个刚接触AJAX的人一定会遇到的问题,造成这个问题的关键性人物又是Ie... 在网上找了好多资料后,总结一下 1:在AJAX请求的页面后加个随机函数,我们可以使用随机时间函数 在javasc...

经验教程

12

收藏

30
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部