1). $.get發(fā)送請求

$(function() { $("#Button1").click(function() { //按鈕單擊事件 //打開文件，并通過回調函數返回服務器響應后的數據 $.get("UserInfo.aspx", { name: encodeURI($("#txtName").val()) }, function(data) { $("#divTip") .empty() //先清空標記中的內容 .html(data); //顯示服務器返回的數據 }) }) })

UserInfo.aspx:

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %> <% string strName = System.Web.HttpUtility.UrlDecode(Request["name"]);//解碼姓名字符 string strHTML = "<div class='clsShow'>"; //初始化保存內容變量 if (strName == "陶國榮") { strHTML += "姓名：陶國榮<br>"; strHTML += "性別：男<br>"; strHTML += "郵箱：tao_guo_rong@163.com<hr>"; } else if (strName == "李建洲") { strHTML += "姓名：李建洲<br>"; strHTML += "性別：女<br>"; strHTML += "郵箱：xiaoli@163.com<hr>"; } strHTML += "</div>"; Response.Write(strHTML); %>

?

2). $.post發(fā)送請求

$(function() { $("#Button1").click(function() { //按鈕單擊事件 //打開文件，并通過回調函數返回服務器響應后的數據 $.post("User_Info.aspx", { name: encodeURI($("#txtName").val()), sex: encodeURI($("#selSex").val()) }, function(data) { $("#divTip") .empty() //先清空標記中的內容 .html(data); //顯示服務器返回的數據 }) }) })

User_Info.aspx:

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %> <% string strName = System.Web.HttpUtility.UrlDecode(Request["name"]);//解碼姓名字符 string strSex = System.Web.HttpUtility.UrlDecode(Request["sex"]);//解碼性別字符 string strHTML = "<div class='clsShow'>"; //初始化保存內容變量 if (strName == "陶國榮" && strSex=="男") { strHTML += "姓名：陶國榮<br>"; strHTML += "性別：男<br>"; strHTML += "郵箱：tao_guo_rong@163.com<hr>"; } else if (strName == "李建洲" && strSex == "女") { strHTML += "姓名：李建洲<br>"; strHTML += "性別：女<br>"; strHTML += "郵箱：xiaoli@163.com<hr>"; } strHTML += "</div>"; Response.Write(strHTML); %>

?

3). serialize()序列化表單

$(function() { $("#Button1").click(function() { //按鈕單擊事件 //打開文件，并通過回調函數返回服務器響應后的數據 $.post("User-Info.aspx", $("#frmUserInfo").serialize(), //序列化表單數據 function(data) { $("#divTip") .empty() //先清空標記中的內容 .html(data); //顯示服務器返回的數據 }) }) })

User-Info.aspx:

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %> <% string strName = System.Web.HttpUtility.UrlDecode(Request["txtName"]); //解碼姓名字符 string strSex = System.Web.HttpUtility.UrlDecode(Request["selSex"]); //解碼性別字符 string strEmail = Request["chkEmail"]; //是否顯示郵件字符 string strHTML = "<div class='clsShow'>"; //初始化保存內容變量 if (strName == "陶國榮" && strSex=="男") { strHTML += "姓名：陶國榮<br>"; strHTML += "性別：男<br>"; if (strEmail=="1") { strHTML += "郵箱：tao_guo_rong@163.com"; } strHTML += "<hr>"; } else if (strName == "李建洲" && strSex == "女") { strHTML += "姓名：李建洲<br>"; strHTML += "性別：女<br>"; if (strEmail == "1") { strHTML += "郵箱：xiaoli@163.com<hr>"; } strHTML += "<hr>"; } strHTML += "</div>"; Response.Write(strHTML); %>

?

4). $.ajax()方法發(fā)送請求

$(function() { $.ajax({ //請求登錄頁 url: "login.html", //登錄靜態(tài)頁 dataType: "html", success: function(HTML) { //返回頁面內容 $("#frmUserLogin").html(HTML); //將頁面內容置入表單 $("#btnLogin").click(function() { //“登錄”按鈕單擊事件 //獲取用戶名稱 var strTxtName = encodeURI($("#txtName").val()); //獲取輸入密碼 var strTxtPass = encodeURI($("#txtPass").val()); //開始發(fā)送數據 $.ajax({ //請求登錄處理頁 url: "login.aspx", //登錄處理頁 dataType: "html", //傳送請求數據 data: { txtName: strTxtName, txtPass: strTxtPass }, success: function(strValue) { //登錄成功后返回的數據 //根據返回值進行狀態(tài)顯示 if (strValue == "True") { $(".clsShow").html("操作提示，登錄成功！"); } else { $("#divError").show().html("用戶名或密碼錯誤！"); } } }) }) } }) })

login.html:

<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" />&nbsp;&nbsp <input id="btnReset" type="reset" value="取消" class="btn" /> </div> </div> </div> </div>

login.aspx:

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %> <% string strName = System.Web.HttpUtility.UrlDecode(Request["txtName"]); //解碼姓名字符 string strPass = System.Web.HttpUtility.UrlDecode(Request["txtPass"]); //解碼密碼字符 bool blnLogin = false; if (strName == "admin" && strPass == "123456") { blnLogin = true; } Response.Write(blnLogin); %>

?

5). $.ajaxSetup()方法全局設置Ajax

$(function() { $.ajaxSetup({ //設置全局性的Ajax選項 type: "GET", url: "UserInfo.xml", dataType: "xml" }) $("#Button1").click(function() { //"姓名”按鈕的單擊事件 $.ajax({ success: function(data) { //傳回請求響應的數據 ShowData(data, "姓名", "name"); //顯示"姓名"部分 } }) }) $("#Button2").click(function() { //"性別”按鈕的單擊事件 $.ajax({ success: function(data) { //傳回請求響應的數據 ShowData(data, "性別", "sex"); //顯示"性別"部分 } }) }) ? $("#Button3").click(function() { //"郵箱”按鈕的單擊事件 $.ajax({ success: function(data) { //傳回請求響應的數據 ShowData(data, "郵箱", "email"); //顯示"郵箱"部分 } }) }) /* *根據名稱與值，獲取請求響應數據中的某部分 *@Param d為請求響應后的數據 *@Param n為數據中文說明字符 *@Param d為數據在響應數據中的元素名稱 */ function ShowData(d, n, v) { $("#divTip").empty(); //先清空標記中的內容 var strHTML = ""; //初始化保存內容變量 $(d).find("User").each(function() { //遍歷獲取的數據 var $strUser = $(this); strHTML += n + "：" + $strUser.find(v).text() + "<hr>"; }) $("#divTip").html(strHTML); //顯示處理后的數據 } })

UserInfo.xml:

<?xml version="1.0" encoding="utf-8" ?> <Info> <User id="1"> <name>陶國榮</name> <sex>男</sex> <email>tao_guo_rong@163.com</email> </User> ? <User id="2"> <name>李建洲</name> <sex>女</sex> <email>xiaoli@163.com</email> </User> </Info>

?

6). Ajax中的全局事件

$(function() { //元素綁定全局ajaxStart事件 $("#divMsg").ajaxStart(function() { $(this).show(); //顯示元素 }) //元素綁定全局ajaxStop事件 $("#divMsg").ajaxStop(function() { $(this).html("已成功獲取數據。").hide(); }) //按鈕的單擊事件 $("#Button1").click(function() { $.ajax({ //帶參數請求服務器 type: "GET", url: "GetData.aspx", //獲取加碼后的數據并作為參數傳給服務器 data: { txtData: encodeURI($("#txtData").val()) }, dataType: "html", success: function(data) { //顯示解碼后的返回數據 $("#divTip").html(decodeURI(data)); } }) }) })

GetData.aspx:

<%@ Page Language="C#" ContentType="text/html" ResponseEncoding="gb2312" %> <% string strName = Request["txtData"]; //返回傳回的參數 Response.Write(strName); //返回傳回的參數 %>

總結

以上是生活随笔為你收集整理的JQuery学习笔记 [Ajax] (6-2)的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。