ajax完整结构

Posted 游称

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了ajax完整结构相关的知识，希望对你有一定的参考价值。

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

}

 


















以上是关于ajax完整结构的主要内容，如果未能解决你的问题，请参考以下文章

C#-WebForm-AJAX阿贾克斯★★★★★ajax的完整结构★★★★★

VSCode自定义代码片段——git命令操作一个完整流程

html PHP代码片段： - AJAX基本示例：此代码演示了使用PHP和JavaScript实现的基本AJAX功能。

VSCode自定义代码片段15——git命令操作一个完整流程

VSCode自定义代码片段15——git命令操作一个完整流程

AJAX相关JS代码片段和部分浏览器模型