zoukankan      html  css  js  c++  java
  • 一个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]);//把当前登录username显示出来
                    }
                });
            }
    
            var loginFinish = function (data) {  //这是一个回调函数
                if (data == "ok") {
                    //alert("成功");
                    $("#divLogin").dialog("close"); //登录成功关闭窗体
                    checkLogin();//登录成功。刷新登录区域的显示
                }
                else {
                    alert("username密码错误");
                }
            };
            $(function () {
                $("#btnShowLoginDlg").click(function () {
                    $("#divLogin").dialog({
                        height: 200,
                        modal: true
                    });
                });
                $("#btnLogin").click(function () {  //当用户点击"登陆" 控件触发事件
                    //todo:检验username、密码不能为空
                    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>username:</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>




    
    
    

    版权声明:本文博客原创文章。博客,未经同意,不得转载。

  • 相关阅读:
    校园网络(tarjan)
    消息扩散(强连通分量)
    上帝造题的七分钟(树桩数组乱搞)
    数颜色 / 维护队列(带修莫队)
    Luogu5155 [USACO18DEC]Balance Beam
    分数规划小结
    Luogu3177 [HAOI2015]树上染色
    Luogu4402 机械排序
    Luogu3201 [HNOI2009]梦幻布丁
    Luogu3380 二逼平衡树
  • 原文地址:https://www.cnblogs.com/yxwkf/p/4743323.html
Copyright © 2011-2022 走看看