当前位置: 首页 > 图文教程 > 网络编程 > Javascript > jquery ajax提交表单数据的两种方式

Javascript
javascript 动态数据下的锚点错位问题解决方法
jQuery 动画基础教程
jQuery 操作XML入门
ASP SQL防注入的方法
jquery 插件 web2.0分格的分页脚本，可用于ajax无刷新分页
jquery 插件 任意位置浮动固定层
JavaScript 检测浏览器和操作系统的脚本
不要小看注释掉的JS 引起的安全问题
js实现的验证，学习用js控制td
javascript iframe中打开文件,并检测iframe存在否
Javascript typeof 用法
Javascript valueOf 使用方法
extjs form textfield的隐藏方法
extjs grid取到数据而不显示的解决
Ext第一周 史上最强学习笔记---GridPanel（基础篇）
My Desktop :) 桌面式代码
javascript 双击文本框编辑功能代码
不用写JS也能使用EXTJS视频演示
js 提取class相同的节点集合
js Li来实现的效果

No. « 122 123 124 125 »

技术文章搜索

关键字

Javascript 中的 jquery ajax提交表单数据的两种方式

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-01-10   浏览: 208 ::
收藏到网摘: n/a

貌似AJAX越来越火了，作为一个WEB程序开发者要是不会这个感觉就要落伍，甚至有可能在求职的时候屡被淘汰。我也是一个WEB程序开发者，当然我也要“随波逐流”一把，不然饭碗不保啊！ 之前实现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用于帮助操作表单的一个插件，具体的去网上看看教程！