JQuery 執行個體學習系列(1):Ajax登陸驗證

本文通過一個Ajax登陸執行個體，學習JQuery在Ajax方面的應用。

//前台代碼

    <script language="javascript">
        $(document).ready(
           function(){
                $("#btnLogin").click(function(){Login();})
                 }
        );
       
        function Login()
        {
            if(Check())
            {
                Go();
            }
        }
        function Check()
        {
            if($("#txtUserID").val()=="")
            {
                alert("帳號不可為空!");
                $("#txtUserID").focus();
                return false;
            }
            if($("#txtPass").val()=="")
            {
                alert("密碼不可為空!");
                $("#txtPass").focus();
                return false;
            }
            return true;
        }
       
        function Go()
        {
            $.post("LoginCheck.aspx", { Action: "post", UserID: $("#txtUserID").val(),UserPass: $("#txtPass").val() },
      function (data, textStatus){
      alert(data.result);
       "json");

        }
    </script>

//LoginCheck.aspx.cs

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

/// <summary>
/// DotBBS.NET 提供
/// 阿強 http://www.cnblogs.com/aqiang
/// </summary>
public partial class LoginCheck : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
        if (!IsPostBack)
        {
            string retVal = "";
            string UserID = Request["UserID"];
            string UserPass = Request["UserPass"];
            if (UserID == "cyq" && UserPass == "000000")
            {
                retVal = "result:'success'";
            }
            else
            {
                retVal = "result:'fail'";
            }
            //Response.ContentType = "application/json";
            //Response.Write(retVal);

            Response.ContentType = "application/json";
            Response.Write("{"+retVal+"}");

        }
    }
}

程式分析：
主要使用的JQuery函數,jQuery.post( url, [data], [callback], [type] ) ：使用POST方式來進行非同步請求
參數：

url (String) : 發送請求的URL地址.

data (Map) : (可選) 要發送給伺服器的資料，以 Key/value 的索引值對形式表示。

callback (Function) : (可選) 載入成功時回呼函數(只有當Response的返回狀態是success才是調用該方法)。

type (String) : (可選)官方的說明是：Type of data to be sent。其實應該為用戶端請求的類型(JSON,XML,等等)

 

 $.post("LoginCheck.aspx", { Action: "post", UserID: $("#txtUserID").val(),UserPass: $("#txtPass").val() },
      function (data, textStatus){
      alert(data.result);
       "json");

注意事項：

1 Ajax背景程式頁面LoginCheck.aspx中的html標記一定要刪除。
2 json格式.一定要帶"{}";

(c)cnblogs.com/aqiang  DotBBS.net

執行個體下載