您的位置：首页 > Web前端 > JQuery

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

2013-07-11 10:40 656 查看

jQuery中使用$.ajax提交表单

首先，新建Login.html页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>$.ajax()方法发送请求</title>
<script type="text/javascript" src="Scripts/jquery-1.4.1.js"></script>
<style type="text/css">
body
{
font-size: 13px;
}
.divFrame
{
width: 225px;
border: solid 1px #666;
}
.divFrame .divTitle
{
padding: 5px;
background-color: #eee;
height: 23px;
}
.divFrame .divTitle span
{
float: left;
padding: 2px;
padding-top: 5px;
}
.divFrame .divContent
{
padding: 8px;
text-align: center;
}
.divFrame .divContent .clsShow
{
font-size: 14px;
line-height: 2.0em;
}
.divFrame .divContent .clsShow .clsError
{
font-size: 13px;
border: solid 1px #cc3300;
padding: 2px;
display: none;
margin-bottom: 5px;
background-color: #ffe0a3;
}
.txt
{
border: #666 1px solid;
padding: 2px;
width: 150px;
margin-right: 3px;
}
.btn
{
border: #666 1px solid;
padding: 2px;
width: 50px;
}
</style>
<script type="text/javascript">
$(function () {
$("#txtName").focus();//输入焦点
$("#txtName").keydown(function (event) {
if (event.which == "13") {//回车键,移动光标到密码框
$("#txtPass").focus();
}
});
$("#txtPass").keydown(function (event) {
if (event.which == "13") {//回车键，用.ajax提交表单
$("#btnLogin").trigger("click");
}
});
$("#btnLogin").click(function () { //“登录”按钮单击事件
//获取用户名称
var strTxtName = encodeURI($("#txtName").val());
//获取输入密码
var strTxtPass = encodeURI($("#txtPass").val());
//开始发送数据
$.ajax
({ //请求登录处理页
url: "Login.aspx", //登录处理页
dataType: "html",
//传送请求数据
data: { txtName: strTxtName, txtPass: strTxtPass },
success: function (strValue) { //登录成功后返回的数据
//根据返回值进行状态显示
if (strValue == "True") {//注意是True,不是true
$(".clsShow").html("操作提示，登录成功！" + strValue);
}
else {
$("#divError").show().html("用户名或密码错误！" + strValue);
}
}
})
})
})
</script>
</head>
<body>
<form id="frmUserLogin">
<div class="divFrame">
<div class="divTitle">
<span>用户登录</span>
</div>
<div class="divContent">
<div class="clsShow">
<div id="divError" class="clsError">
</div>
<div>
名称：<input id="txtName" type="text" class="txt" /></div>
<div>
密码：<input id="txtPass" type="password" class="txt" /></div>
<div>
<input id="btnLogin" type="button" value="登录" class="btn" />  
<input id="btnReset" type="reset" value="取消" class="btn" />
</div>
</div>
</div>
</div>
</form>
</body>
</html>
然后，新建Login.aspx，接收并处理数据：

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Login.aspx.cs" Inherits="JSDemo.Login" ResponseEncoding="gb2312"%>

<%
string strName = System.Web.HttpUtility.UrlDecode(Request["txtName"]);
string strPass = System.Web.HttpUtility.UrlDecode(Request["txtPass"]);
bool login = false;
if (strName == "admin" && strPass == "admin")
{
login = true;
}
Response.Write(login);
%>

貌似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用于帮助操作表单的一个插件，具体的去网上看看教程！

详细出处参考：http://www.jb51.net/article/21051.htm

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航