Tags:
本文通过一个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
转载请注明出处-零柒动力-07er.com |
