承繼上一次的【[ASP.NET]會員代號欄位失去焦點(OnBlur)檢查帳號是否曾被使用範例—LinkButton篇】，裡面談到除了透過LinkButton是使用JavaScript觸發PostBack，利用此點可以達到我們的要望，另外還提到可以用jQuery的Ajax來達到相同的目的。
此篇就來看看如何透過jQuery的Ajax，讓我們可以在會員代號欄位失去焦點(OnBlur)的時候，透過jQuery啟動Ajax，呼叫另一個aspx來檢查，並且把檢查的結果顯示在畫面上。
緣起
承繼上一次的【[ASP.NET]會員代號欄位失去焦點(OnBlur)檢查帳號是否曾被使用範例—LinkButton篇】，裡面談到除了透過LinkButton是使用JavaScript觸發PostBack，利用此點可以達到我們的要望，另外還提到可以用jQuery的Ajax來達到相同的目的。
此篇就來看看如何透過jQuery的Ajax，讓我們可以在會員代號欄位失去焦點(OnBlur)的時候，透過jQuery啟動Ajax，呼叫另一個aspx來檢查，並且把檢查的結果顯示在畫面上。
準備檢查的aspx
我們準備一個aspx用來檢查傳入的使用者帳號，是否已經存在，並且透過xml的格式傳回結果。
由於我們希望傳回的格式是xml，因此aspx的內容必須稍微調整一下：
ChkUserId.aspx
<%@ Page Language="VB" ContentType="text/xml" AutoEventWireup="false" CodeFile="ChkUserId.aspx.vb" Inherits="ChkUserId" %>
<%@ OutputCache Location="None" %><?xml version="1.0"?>
<myrlt>
<chkrlt><asp:Literal id="L1" runat="server"></asp:Literal></chkrlt>
</myrlt>接著撰寫檢查的部分，我們一樣省略資料庫測試驗證的部分(請依照自己的狀況修改)，改以如果輸入的是topcat就顯示已經存在，其他的就顯示可用。
ChkUserId.aspx.vb
Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim ChkUserID As String = Request.Form("ChkUserID")
If ChkUserID IsNot Nothing Then
If ChkUserID = "topcat" Then
Me.L1.Text = "帳號【topcat】已被使用，請輸入其他的帳號"
Else
Me.L1.Text = "帳號【" & ChkUserID & "】可以使用"
End If
Else
Me.L1.Text = "無法取得傳入資料!!"
End If
End Sub程式很簡單，就是把Request.Form接到的內容拿來判斷，然後寫到xml
jQuery的Ajax部分
接著回到本來的使用者代號欄位的畫面，我們測試的部分就放一個TextBox以及一個Label來顯示結果
<asp:TextBox ID="txtUserID" runat="server"></asp:TextBox>
<asp:Label ID="lblChkMsg" runat="server" Text=""></asp:Label>再來就是jQuery的部分，這部分也很簡單，取得TextBox輸入的內容，透過Ajax傳給ChkUserId.aspx，然後接到傳回的xml後，將結果顯示到畫面。
$(document).ready(doc_ready);
function doc_ready() {
$('#<%=Me.txtUserID.ClientID%>').blur(UserBlur);
}
function UserBlur() {
//取得輸入的使用者帳號
var UserID = $(this).val();
if (UserID != '') {
//如果有輸入值，啟動Ajax
$.ajax({
type: 'POST',
url: 'ChkUserId.aspx',
dataType: 'xml',
data: { ChkUserID: UserID },
success: function (oXml) {
//取回判斷的結果
var rlt = $('chkrlt', oXml).text();
//將結果顯示在Label上
$('#<%=Me.lblChkMsg.ClientID%>').text(rlt);
//alert結果
alert(rlt);
}
});
}
else {
alert('請輸入使用者代號');
}
}比較LinkButton與jQuery的Ajax
這兩個方式來做個小小的比較，技術上都不困難，都還蠻好寫的。不過透過LinkButton是啟動PostBack機制，就算使用UpdatePanel，可以部份內容修改，無論傳遞回去的資料量、傳回的資料量，相信效能上都會遠比使用jQuery的Ajax大。如果畫面更複雜些，那麼這兩種方式的傳遞量會差更多。因此小喵比較推薦使用本篇介紹的方式，透過jQuery的Ajax來啟動後端的ChkUserId.aspx做驗證。
以下是簽名：
- 歡迎轉貼本站的文章，不過請在貼文主旨上加上【轉貼】，並在文章中附上本篇的超連結與站名【topcat姍舞之間的極度凝聚】，感恩大家的配合。
- 小喵大部分的文章會以小喵熟悉的語言VB.NET撰寫，如果您需要C#的Code，也許您可以試著用線上的工具進行轉換，這裡提供幾個參考
| Microsoft MVP Visual Studio and Development Technologies (2005~2019/6) | topcat Blog:http://www.dotblogs.com.tw/topcat |