asp.net+ajax的Post請求實例

字號:


    本文實例講述了asp.net+ajax的Post請求的實現(xiàn)方法。分享給大家供大家參考。具體如下:
    復(fù)制代碼 代碼如下://一個ajax的Post請求
    function submitInfo() {
    $(".warn").hide(); //剛提交的時候隱藏錯誤的信息
    var data = $("#formData").serialize(); //將表單的數(shù)據(jù)通過序列化表單值,創(chuàng)建 URL 編碼文本字符串。形成一個表單元素集合的 jQuery 對象
    $.post("/login/checkLoginInfo", data, function (ajaxObj) { //將數(shù)據(jù)提交到login控制器下的CheckLOginInfo方法。參數(shù)是data。 如果請求成功,function就是請求成功時執(zhí)行的回調(diào)函數(shù)。ajaxObj是checkLoginInfo方法的返回數(shù)據(jù)
    //回傳內(nèi)容{status: 1(success)/0(fail),}
    if (ajaxObj.status == 0 || status == null) { //如果返回狀態(tài)為0或者為null
    $(".warn").show(); //將錯誤信息顯示出來
    } else {
    //登陸成功,跳轉(zhuǎn)都制定頁面
    window.location = '/HotelList/Index';
    }
    }, "json");
    }
    注意這條語句的參數(shù),與回調(diào)函數(shù) loginFinish 與上面條$.Post()請求的區(qū)別
    復(fù)制代碼 代碼如下:$.post("/ajax/UserLogin.ashx",
    { "username": username, "password": password },
    loginFinish);
    復(fù)制代碼 代碼如下:<html xmlns="">
    <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">
    //向服務(wù)器請求當前登錄狀態(tài),然后切換登錄區(qū)域的顯示
    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) { //這是一個回調(diào)函數(shù)
    if (data == "ok") {
    //alert("成功");
    $("#divLogin").dialog("close"); //登錄成功關(guān)閉窗口
    checkLogin();//登錄成功,刷新登錄區(qū)域的顯示
    }
    else {
    alert("用戶名密碼錯誤");
    }
    };
    $(function () {
    $("#btnShowLoginDlg").click(function () {
    $("#divLogin").dialog({
    height: 200,
    modal: true
    });
    });
    $("#btnLogin").click(function () { //當用戶點擊"登陸" 控件觸發(fā)事件
    //todo:檢驗用戶名、密碼不能為空
    var username = $("#txtUserName").val();
    var password = $("#txtPwd").val();
    $.post("/ajax/UserLogin.ashx",//----------------------請關(guān)注這條$.Post()請求的參數(shù)與回調(diào)函數(shù)
    { "username": username, "password": password },
    loginFinish);
    });
    });
    $(function () {
    checkLogin();//剛進入頁面的時候也是先向服務(wù)器查詢當前登錄狀態(tài)
    $("#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"><input type="button" value="登錄" id="btnShowLoginDlg" /></div>
    <div id="divLoginOutArea">
    <span id="spanUserName"></span>
    <input type="button" value="注銷" id="btnLogout" />
    </div>
    <div id="divLogin">
    <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>
    希望本文所述對大家的asp.net程序設(shè)計有所幫助。