首页 > 代码库 > ajax完整结构

ajax完整结构

2024-09-01 08:09:08   220人阅读

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=http://www.mamicode.com/"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=http://www.mamicode.com/"登录" />
            <span id="sp1" style="color: red;"></span>
        </div>



        <div id="div-load">
            <img src=http://www.mamicode.com/"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 = http://www.mamicode.com/"正在跳转，请稍后...";
                }
                else {
                    document.getElementById("sp1").innerHTML = "用户名或密码错误！";
                    document.getElementById("btn1").removeAttribute("disabled");
                    document.getElementById("btn1").value = http://www.mamicode.com/"登录";
                }

            },
            beforeSend: function () {
                document.getElementById("sp1").innerHTML = "";
                document.getElementById("btn1").setAttribute("disabled", "disabled");
                document.getElementById("btn1").value = http://www.mamicode.com/"登录中...";

                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 = http://www.mamicode.com/"登录";
            }
        });


    };
</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;
        }
    }

}

 

ajax完整结构


联系
我们