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

实例下载