一个ajax的Post要求

一个ajax的Post要求

大家好,又见面了,我是全栈君,今天给大家准备了Idea注册码。

<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>





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

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/117202.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • bootefi分多大合适_boot from network

    bootefi分多大合适_boot from network转载:http://blog.csdn.net/olei_oleitao/article/details/7919307 一、DM36X的BOOT过程介绍DM36x的BOOT过程和DM6446、DM6467完全是一样的,因为都是ARM926EJS架构,里边都有一个RBL,这RBL在芯片出厂的时候都烧写在ROM里,芯片上电复位后RBL在运行,然后读取BOOTMODE引脚的电平状态,决定

    2022年8月13日
    1
  • mysql查询语句执行过程及运行原理命令_MySQL常用命令

    mysql查询语句执行过程及运行原理命令_MySQL常用命令Mysql查询语句执行原理数据库查询语句如何执行?DML语句首先进行语法分析,对使用sql表示的查询进行语法分析,生成查询语法分析树。 语义检查:检查sql中所涉及的对象以及是否在数据库中存在,用户是否具有操作权限等 视图转换:将语法分析树转换成关系代数表达式,称为逻辑查询计划; 查询优化:在选择逻辑查询计划时,会有多个不同的表达式,选择最佳的逻辑查询计划; 代码生成:必须将逻辑查…

    2025年6月9日
    0
  • pip安装geopandas 教程「建议收藏」

    附上geopandas安装的官网链接(英文):http://geopandas.org/install.html本文安装方式:pipinstallgeopandas系统环境:win1064位python版本:3.7.064位首先需要手动安装geopandas的依赖库:numpy(pipinstall即可,已有不必再安装)six(pipinstall即可…

    2022年4月14日
    266
  • 详解java接口interface

    详解java接口interface引言接口这个词在生活中我们并不陌生。在中国大陆,我们可以将自己的家用电器的插头插到符合它插口的插座上;我们在戴尔,惠普,联想,苹果等品牌电脑之间传输数据时,可以使用U盘进行传输。插座的普适性是

    2022年7月2日
    22
  • 深入理解JVM的垃圾回收机制

    深入理解JVM的垃圾回收机制上一篇博客介绍了Java运行时内存的各个区域。对于程序计数器、虚拟机栈、本地方法栈这三个部分而言,其生命周期与相关线程有关,随线程而生,随线程而灭。并且这三个区域的内存分配与回收具有确定性,因为当方法结束或者线程结束时,内存就自然跟着线程回收了。因此本篇文章所讲的有关内存分配和回收关注的是Java堆与方法区这两个区域。1、如何判断对象已“死”Java堆中存放着几乎所有的对象实例,垃圾回收器…

    2022年4月29日
    35
  • StarUML入门教程

    StarUML入门教程声明 原文链接 StarUML 使用简明教程 作者 栾小邑 StarUML 入门教程 StarUML 简称 SU 是一种创建 UML 类图 生成类图和其他类型的统一建模语言 UML 图表的工具 StarUML 是一个开源项目之一发展快 灵活 可扩展性强 zj StarUML 官方下载地址 http staruml io downloadStar 主界面创建工程在启动 starUML 时 系统会默认帮我们创建一个工程 如果这个工程不是你想要的工程 你可以点击 File gt

    2025年6月30日
    0

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号