温馨提示×

Ajax如何实现页面内跳转

发布时间:2022-09-30 17:21:44 来源:亿速云 阅读:137 作者:iii 栏目:开发技术

本篇内容主要讲解“Ajax如何实现页面内跳转”,感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷,实用性强。下面就让小编来带大家学习“Ajax如何实现页面内跳转”吧!

代码如下:

<script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript">
        $(function(){        //作业面局部刷新,不做页面跳转的时候,推荐使用ajax
            $("#login").click(function(){                //点击按钮实现登录功能
                /* $.ajax({
                    type:'post', //type:请求方式,get,post
                    url:'login.action',   //要访问的后台地址
                    data:{
                        'uname':$("#uname").val(),
                        'pwd':$("#pwd").val()
                    },
                    success:function(result) {
                        if(result=='1') {
                            //1.welcome
                            location.href="welcome.jsp";
                        } else {
                            //2.login
                            $("#tip").show();
                        }
                    }
                }); */
                /* $.post('login.action',{
                    'uname':$("#uname").val(),
                    'pwd':$("#pwd").val()
                },function(result){
                    //回调函数:当后台成功响应结果时,会自动调用
                    if(result=='1') {
                        //1.welcome
                        location.href="welcome.jsp";
                    } else {
                        //2.login
                        $("#tip").show();
                    }
                }); */
                $.get('login.action?uname='+$("#uname").val()+'&pwd='+$("#pwd").val(),function(result){                    //回调函数:当后台成功响应结果时,会自动调用
                    if(result=='1') {                        //1.welcome
                        location.href="welcome.jsp";
                    } else {                        //2.login
                        $("#tip").show();
                    }
                });
            })
        })    </script>

body之中的内容:

  <body>
    <table>
        <tr>
            <td>用户名:</td>
            <td>
                <input type="text" id="uname">
            </td>
        </tr>
        <tr>
            <td>密码:</td>
            <td>
                <input type="password" id="pwd">
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" value="登录" id="login">
            </td>
        </tr>
    </table>
    <span id="tip" style="color: red;display: none;">用户名或密码错误</span>
  </body>

LoginServlet.java中的doPost()方法:

    public void doPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        PrintWriter out = response.getWriter();
        String uname=request.getParameter("uname");
        String pwd=request.getParameter("pwd");
        System.out.println(uname);        //1.登录成功
        //2.登录失败
        if("admin".equals(uname)&&"123".equals(pwd)) {            //welcome
            out.print("1");
        } else {            //login
            out.print("2");
        }        out.flush();        out.close();
    }

到此,相信大家对“Ajax如何实现页面内跳转”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!

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

主题地图