ajax全部结构

 

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="js/jquery1.11.1.min.js"></script>
</head>
<body>
    <form id="form1" runat="server">
        <div>

            <input type="text" id="txt1" /><br />
            <br />
            <input type="password" id="txt2" /><br />
            <br />
            <input type="button" value="验证" id="btn1" /><br />
            <br />
            <span id="sp1"></span>
          
        </div>
    </form>
</body>
</html>
<script type="text/javascript">

    $("#btn1").click(function () {
        $.ajax({
            url: "ajax/login.ashx",  //请求访问的服务端地址
            data: { "uname": $("#txt1").val(), "pwd": $("#txt2").val() }, //请求访问服务端所传递过去的数据如果不需要传值 data: {}，
            dataType: "json", //服务端返回的数据格式
            type: "post",     //向服务端发送数据的方式
            async: true,      //是否开启异步默认异步（可以不写）
            success: function (msg) {   //1、服务端执行完毕并成功后执行的代码段
                if (msg.ok == '0') $("#sp1").text('未查到此用户');
                else $("#sp1").text('用户名密码正确');
            }, error: function () {     //2、服务端出错所执行的代码段（包括url的地址写错 服务端的各种错误）
                $("#sp1").text('err');
            }, beforeSend: function () {   //3、发送请求之前执行的代码段（一般用在网速较慢 网页加载中提示用户加载数据）
                $("#sp1").text('加载中...');//网速慢提示用户加载中
                $("#btn1").attr('disabled', 'disabled');//验证按钮不可用 防止用户多次提交
            }, complete: function () {     //4、本次所有流程执行完毕之后的再执行的代码段（将页面还原到最初状态）
                $("#sp1").text('');
                $("#btn1").removeAttr('disabled');
            }
        });
    });
    //先执行3 如果路径服务端没错执行1 在执行4
//            如果路径服务端有错误执行2 在执行4



</script>

 

posted @ 2017-08-31 16:11  纡ゾ少︶ㄣ  阅读(164)  评论(0)    收藏  举报