asp.net+ajax的Post請求實例

2024-07-10 13:28:50

字體：大中小

來源：轉載

供稿：網友

這篇文章主要介紹了asp.net+ajax的Post請求實現方法,實例分析了Ajax的發送post數據的原理與技巧,具有一定參考借鑒價值,需要的朋友可以參考下

本文實例講述了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>