本篇内容主要讲解“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如何实现页面内跳转”有了更深的了解,不妨来实际操作一番吧!这里是亿速云网站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
亿速云「云服务器」,即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘,价格低至29元/月。点击查看>>
免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。
原文链接:http://www.zhuangjiba.com/bios/21197.html