ajax完整结构:
$.ajax({
url: "", //服务器路径
data: { }, //传递的参数,可为空,可多个
type: "post", //传递参数的方式,可POST可GET,一般用POST
dataType: "json", //数据传递的格式,有Json和xml两种
async:true,//异步,同步为false
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; 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=" 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; } } }