程序師世界是廣大編程愛好者互助、分享、學習的平台,程序師世界有你更精彩!
首頁
編程語言
C語言|JAVA編程
Python編程
網頁編程
ASP編程|PHP編程
JSP編程
數據庫知識
MYSQL數據庫|SqlServer數據庫
Oracle數據庫|DB2數據庫
 程式師世界 >> 編程語言 >> .NET網頁編程 >> ASP.NET >> ASP.NET基礎 >> asp.net+ajax的Post請求實例

asp.net+ajax的Post請求實例

編輯:ASP.NET基礎

本文實例講述了asp.net+ajax的Post請求的實現方法。分享給大家供大家參考。具體如下:

復制代碼 代碼如下://一個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"); 
}

注意這條語句的參數,與回調函數 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>

希望本文所述對大家的asp.net程序設計有所幫助。

  1. 上一頁:
  2. 下一頁:
Copyright © 程式師世界 All Rights Reserved