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

实例下载