怎么在asp.net中利用ajax实现一个Post请求

发布时间:2021-03-04 16:47:50 作者:Leah
来源:亿速云 阅读:189

本篇文章为大家展示了怎么在asp.net中利用ajax实现一个Post请求,内容简明扼要并且容易理解,绝对能使你眼前一亮,通过这篇文章的详细介绍希望你能有所收获。

ASP.NET 是什么

ASP.NET 是开源,跨平台,高性能,轻量级的 Web 应用构建框架,常用于通过 HTML、CSS、JavaScript 以及服务器脚本来构建网页和网站。

具体如下:

复制代码 代码如下:

//一个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" ><input type="button" value="登录" id="btnShowLoginDlg" /></div> 
        <div id="divLoginOutArea" > 
            <span id="spanUserName"></span> 
            <input type="button" value="注销" id="btnLogout" /> 
        </div> 
        <div id="divLogin" title="登录窗口"  > 
            <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中利用ajax实现一个Post请求,你们学到知识或技能了吗?如果还想学到更多技能或者丰富自己的知识储备,欢迎关注亿速云行业资讯频道。

推荐阅读:
  1. ajax应用asp.net的post请求
  2. 怎么在Python中实现一个post请求

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

asp.net ajax post

上一篇:PHP dirname__FILE__怎么用

下一篇:在CI框架中加载session时出现报错如何解决

相关阅读

您好,登录后才能下订单哦!

密码登录
登录注册
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》