jQuery使用$.ajax提交表單完整實例
更新時間：2015年12月11日 14:54:46 作者：zhouhb
這篇文章主要介紹了jQuery使用$.ajax提交表單的方法,以完整實例形式分析了jQuery基于ajax數(shù)據(jù)提交的具體步驟與數(shù)據(jù)處理技巧,非常簡單實用,代碼備有詳盡的注釋便于理解,需要的朋友可以參考下
本文實例講述了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()方法發(fā)送請求</title>
<script type="text/javascript" src="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());
//開始發(fā)送數(shù)據(jù)
$.ajax
({ //請求登錄處理頁
url: "Login.aspx", //登錄處理頁
dataType: "html",
//傳送請求數(shù)據(jù)
data: { txtName: strTxtName, txtPass: strTxtPass },
success: function (strValue) { //登錄成功后返回的數(shù)據(jù)
//根據(jù)返回值進行狀態(tài)顯示
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，接收并處理數(shù)據(jù)：
<%@ 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);
%>
希望本文所述對大家jQuery程序設計有所幫助。
相關文章
這篇文章主要介紹了jQuery通用的全局遍歷方法$.each()用法,結合實例形式分析了$.each()方法實現(xiàn)遍歷功能的相關技巧,需要的朋友可以參考下2016-07-07
點擊左右按鈕圖片橫向滾動jquery，一次滾動四個，圖片滾動完成，自動回到第一個版面，效果相當不錯，感興趣的前端工程師們可以參考下2013-04-04
這篇文章主要介紹了jquery-mobile基礎屬性與用法,結合實例形式詳細分析了jQuery-mobile常用屬性功能與具體使用技巧,需要的朋友可以參考下2016-11-11
鼠標經過時讓li背景變色，在某些時候還是挺實用的，下面為大家介紹下使用Jquery的hover方法來實現(xiàn)下，感興趣的朋友可以參考下2013-09-09
這篇文章主要介紹了jquery幻燈片插件bxslider樣式改進,對比官方樣式以實例形式講述了改進的技巧,非常實用,需要的朋友可以參考下2014-10-10
以前在寫ajax請求時，總是喜歡使用jQuery+ashx的方式進行調用，今天采取jQuery+WebService的方法來做ajax請求，發(fā)現(xiàn)這種方式比使用ashx的方式要更方便。2011-03-03
jquery ajaxfileupload異步上傳插件使用詳解
這篇文章主要為大家詳細介紹了jquery ajaxfileupload異步上傳插件的使用，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-02-02
本文給大家介紹jquery選擇器的相關知識，并通過案例給大家介紹jquery知識，本文介紹的非常詳細，具有參考借鑒價值，感興趣的朋友一起學習吧2016-05-05
這篇文章主要為大家詳細介紹了利用jQuery給表格添加分頁效果，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-03-03
本文通過實例代碼給大家分享了基于jQuery Easyui實現(xiàn)登陸框界面，代碼簡單易懂，非常不錯，具有參考借鑒價值，需要的的朋友參考下吧2017-07-07