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

Javascript
js 判断 enter 事件
谷歌浏览器 insertCell与appendChild的区别
从JavaScript 到 JQuery (1)学习小结
JavaScript实现动态增加文件域表单
JavaScript DOM 添加事件
Javascript 跨域访问解决方案
检测是否已安装 .NET Framework 3.5的js脚本
JavaScript 获得选中文本内容的方法
Javascript 获取链接(url)参数的方法
javascript Ext JS 状态默认存储时间
动态为事件添加js代码示例
JSON扫盲帖 JSON.as类教程
JavaScript 全面解析各种浏览器网页中的JS 执行顺序
js实现权限树的更新权限时的全选全消功能
javascript Table 中2个列（TD）的交换实现代码
js表数据排序 sort table data
javascript css在IE和Firefox中区别分析
JAVASCRIPT IE 与 FF中兼容问题小结
判断多个元素(RADIO,CHECKBOX等)是否被选择的原理说明
csdn 批量接受好友邀请

No. « 126 127 128 129 »

技术文章搜索

关键字

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

出处:互联网   整理: 软晨网（RuanChen.com）   发布: 2010-01-10   浏览: 326 ::
收藏到网摘: 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用于帮助操作表单的一个插件，具体的去网上看看教程！