一个ajax的Post请求

<1>


$.post(url,[data],[callback],[type]) 第一个参数是请求地址,第二个参数是传递的参数,第三个参数是回调函数,第四个参数是请求返回数据的类型

//一个ajax的Post请求 
    function submitInfo() {
        $(".warn").hide(); //刚提交的时候隐藏错误的信息
        var data = $("#formData").serialize(); //将表单的数据通过序列化表单值,创建 URL 编码文本字符串。形成一个表单元素集合的 jQuery 对象
        $.post("/login/checkLoginInfo", data, function (ajaxObj) { //将数据提交到login控制器下的CheckLOginInfo方法。参数是data。  如果请求成功,function就是请求成功时执行的回调函数。ajaxObj是checkLoginInfo方法的返回数据
            //回传内容{status: 1(success)/0(fail),}
            if (ajaxObj.status == 0 || status == null) { //如果返回状态为0或者为null 
                $(".warn").show(); //将错误信息显示出来
            } else {
                //登陆成功,跳转都制定页面
                window.location = '/HotelList/Index';
            }
        }, "json"); //这里是第四个参数,这里设置了获取数据的类型,所以得到的数据格式为json类型的

    }


<2>

注意这条语句的参数,与回调函数 loginFinish 与上面条$.Post()请求的区别

$.post("/ajax/UserLogin.ashx",
                    { "username": username, "password": password },
                    loginFinish);

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="/css/ui-lightness/jquery-ui-1.8.2.custom.css" rel="stylesheet" type="text/css" />
    <script src="/js/jquery-1.4.2.js" type="text/javascript"></script>
    <script src="/js/jquery-ui-1.8.2.custom.js" type="text/javascript"></script>
    <script type="text/javascript">
        //向服务器请求当前登录状态,然后切换登录区域的显示
        var checkLogin = function () {
            $.post("/ajax/CheckLogin.ashx", function (data) {
                var strs = data.split("|");
                if (strs[0] == "no") {
                    //alert("木有登陆");
                    $("#divLoginArea").show(); //如果没有登陆就显示"登陆"
                    $("#divLoginOutArea").hide(); //隐藏"注销"
                }
                else {
                    //切换“登录”、“注销”的两个层
                    $("#divLoginArea").hide(); //隐藏"登陆"
                    $("#divLoginOutArea").show(); //显示 "注销"
                    $("#spanUserName").text(strs[1]);//把当前登录用户名显示出来
                }
            });
        }

        var loginFinish = function (data) {  //这是一个回调函数
            if (data == "ok") {
                //alert("成功");
                $("#divLogin").dialog("close"); //登录成功关闭窗口
                checkLogin();//登录成功,刷新登录区域的显示
            }
            else {
                alert("用户名密码错误");
            }
        };
        $(function () {
            $("#btnShowLoginDlg").click(function () {
                $("#divLogin").dialog({
                    height: 200,
                    modal: true
                });
            });
            $("#btnLogin").click(function () {  //当用户点击"登陆" 控件触发事件
                //todo:检验用户名、密码不能为空
                var username = $("#txtUserName").val();
                var password = $("#txtPwd").val();
                $.post("/ajax/UserLogin.ashx",//----------------------请关注这条$.Post()请求的参数与回调函数
                    { "username": username, "password": password },
                    loginFinish);
            });
        });

        $(function () {
            checkLogin();//刚进入页面的时候也是先向服务器查询当前登录状态
            $("#btnLogout").click(function () {
                $.post("/ajax/Logout.ashx", function () {
                    checkLogin();//刷新显示
                });
            });
        });
    </script>
    <asp:ContentPlaceHolder ID="head" runat="server">
    </asp:ContentPlaceHolder>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <div id="divLoginArea" style="display:none"><input type="button" value="登录" id="btnShowLoginDlg" /></div>
        <div id="divLoginOutArea" style="display:none">
            <span id="spanUserName"></span>
            <input type="button" value="注销" id="btnLogout" />
        </div>
        <div id="divLogin" title="登录窗口"  style="display:none">
            <table>
                <tr><td>用户名:</td><td><input type="text"  id="txtUserName"/></td></tr>
                <tr><td>密码:</td><td><input type="password"  id="txtPwd"/></td></tr>
                <tr><td colspan="2"><input type="button" value="登录" id="btnLogin" /></td></tr>
            </table>
        </div>
        <br />
        <asp:ContentPlaceHolder ID="placeHolderMain" runat="server">
        
        </asp:ContentPlaceHolder>
        <br />
         尾部<br />
    </div>
    </form>
</body>
</html>







评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值