ajax完整结构：
$.ajax({
url: "", //服务器路径
data: { }, //传递的参数，可为空，可多个
type: "post", //传递参数的方式，可POST可GET，一般用POST
dataType: "json", //数据传递的格式，有Json和xml两种
success: function (data) { //成功返回数据执行这里，排第2
},
beforeSend: function () { //一触发ajax就执行，无任何延迟，排第1
},
complete: function () { //所有的方法都执行完毕后再来执行这里，排最后（不管成功失败都会执行）
},
error: function () { //服务器路径错误，或是服务器内部错误，走这里报错，此位置与success只会走一个
}
});
ajax完整结构示例：
aspx文件：
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="js/jquery-1.7.2.min.js"></script>
<title></title>
<style>
* {
margin: 0px;
padding: 0px;
}
#div-load {
position: fixed;
top: 0px;
left: 0px;
z-index: 100000000000;
width: 100%;
height: 100%;
background-image: url(images/touming.jpg);
display: none;
}
#div-load img {
float: left;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
用户名：<input type="text" id="uname" /><br />
密码：<input type="password" id="pwd" /><br />
<input type="button" id="btn1" style="width: 150px; height: 50px; font-size: 18px;" value="登录" />
<span id="sp1" style="color: red;"></span>
</div>
<div id="div-load">
<img src="images/Loading6.gif" />
<div>数据拼命加载中...</div>
</div>
</form>
</body>
</html>
<script type="text/javascript">
document.getElementById("btn1").onclick = function () {
var un = document.getElementById("uname").value;
var pwd = document.getElementById("pwd").value;
$.ajax({
url: "ajax/Login.ashx",
data: { "uname": un, "pwd": pwd },
type: "post",
dataType: "json",
success: function (data) {
if (data.ok == "1") {
window.location.href = "Default2.aspx";
document.getElementById("btn1").setAttribute("disabled", "disabled");
document.getElementById("btn1").value = "正在跳转，请稍后...";
}
else {
document.getElementById("sp1").innerHTML = "用户名或密码错误！";
document.getElementById("btn1").removeAttribute("disabled");
document.getElementById("btn1").value = "登录";
}
},
beforeSend: function () {
document.getElementById("sp1").innerHTML = "";
document.getElementById("btn1").setAttribute("disabled", "disabled");
document.getElementById("btn1").value = "登录中...";
document.getElementById("div-load").style.display = "block";
},
complete: function () {
document.getElementById("div-load").style.display = "none";
},
error: function () {
document.getElementById("sp1").innerHTML = "服务器连接失败！";
document.getElementById("btn1").removeAttribute("disabled");
document.getElementById("btn1").value = "登录";
}
});
};
</script>
ashx文件：
<%@ WebHandler Language="C#" Class="Login" %>
using System;
using System.Web;
using System.Web.SessionState;
public class Login : IHttpHandler, IRequiresSessionState
{
public void ProcessRequest(HttpContext context)
{
System.Threading.Thread.Sleep(3000);
string end = "{\"ok\":\"0\"}";
string uname = context.Request["uname"];
string pwd = context.Request["pwd"];
Users u = new UsersData().SelectUser(uname, pwd);
if (u != null)
{
context.Session["user"] = uname;
end = "{\"ok\":\"1\"}";
}
context.Response.Write(end);
context.Response.End();
}
public bool IsReusable
{
get
{
return false;
}
}
}
时间： 2024-10-11 12:35:23