码迷,mamicode.com
首页 > Web开发 > 详细

ajax完整结构

时间:2017-01-16 22:35:13      阅读:259      评论:0      收藏:0      [点我收藏+]

标签:ssr   用户   路径   click   osi   ges   led   stat   else   

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完整结构

标签:ssr   用户   路径   click   osi   ges   led   stat   else   

原文地址:http://www.cnblogs.com/wy1992/p/6290224.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!