ajax跳转到新的jsp页面的方法
栏目: 编程语言 · JavaScript · jQuery · 发布时间: 8年前
内容简介：这篇文章主要介绍了ajax跳转到新的jsp页面的方法，在不刷新整个页面的情况下更新页面的局部信息，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
ajax可以实现局部刷新页面，即在不刷新整个页面的情况下更新页面的局部信息。
项目中遇到一个问题：在用户列表也，当点击某个按钮时需要去查询用户的信息，查询成功跳转到用户详情界面；查询失败，则在原页面弹出提示信息。
想到两个解决办法：
方法一：
点击按钮，调用普通方法去查询用户信息，查询成功跳转到用户详情页面；查询失败，重定向调用查询用户列表的方法，在查询用户列表的方法结束后重新跳转到用户列表页面并弹出提示信息，相当于重新加载了用户列表页面。
方法二：
根据需求，不可以重新加载用户列表页面。用ajax调用查询用户详情的方法，查询成功返回用户Json串，查询失败则返回error。
后台方法：
@RequestMapping(value = "searchUser")
public void searchHome(HttpServletResponse response){
String result = null;
...
查询用户的方法
...
if(查询成功){
result = JsonUtil.objectToJson(查询结果对象);//结果对象转化成Json字符串，在ajax的结果中跳转到用户详情的处理方法
AjaxUtil.ajax(response,result);
}else{//查询失败，返回提示信息
AjaxUtil.error(response, "查询用户失败");
}
}
jsp页面的ajax：
function searchUser(){
$.ajax({
url : "testurl/searchUser",
cache : false,
type : 'POST',
data : {
查询用的数据，比如用户ID
},
success : function(data) {
var obj = eval("("+data+")");
if(obj.success==undefined){//查询成功，跳转到详情页面
...
跳转到用户详情处理方法，将date数据传过去
...
}else if(!obj.success){//查询失败，弹出提示信息
weui.Loading.info(obj.message);
}
},
error : function(error) {
weui.alert("查询用户有误！");
}
});
}
此处的重点在于如何在ajax的回调函数中调用普通方法，并将之前查询出的用户数据传到普通方法中（上面伪代码中红色的部分），继而跳转到用户详情页面。
（1）错误案例：
function searchUser(){
$.ajax({
url : "testurl/searchUser",
cache : false,
type : 'POST',
data : {
查询用的数据，比如用户ID
},
success : function(data) {
var obj = eval("("+data+")");
if(obj.success==undefined){//查询成功，跳转到详情页面，encodeURIComponent编码是为了防止url后面传送的参数中文乱码,在后台处理时需要解码
window.location.href = "testurl/userForm?userJson="+encodeURIComponent(data);
}else if(!obj.success){//查询失败，弹出提示信息
weui.Loading.info(obj.message);
}
},
error : function(error) {
weui.alert("查询用户有误！");
}
});
}
错误原因：window.location.href方法为get方法，这会使得参数显示的浏览器的url中，不安全，并且数据传送的长度有限制。
（2）想到的笨方法：在body中写隐藏的form表单，在回调函数中把查到的用户数据复制给form表单中的input，然后提交表单跳转到普通方法中，这样就是以post方法提交的数据，并且可以跳转到新页面了：
function searchUser(){
$.ajax({
url : "testurl/searchUser",
cache : false,
type : 'POST',
data : {
查询用的数据，比如用户ID
},
success : function(data) {
var obj = eval("("+data+")");
if(obj.success==undefined){//查询成功，跳转到详情页面
$("#userFormJson").val(data);
$("#userForm").attr("action","testurl/userForm");
$("#userForm").submit();
}else if(!obj.success){//查询失败，弹出提示信息
weui.Loading.info(obj.message);
}
},
error : function(error) {
weui.alert("查询用户有误！");
}
});
}
jsp页面的body
<body>
<form id="userForm" action="" method="post">
<input id="userFormJson" name="userFormJson" type="hidden"/>
</form>
</body>
以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网
猜你喜欢:
- vue页面跳转后返回原页面初始位置方法
- Vue 页面状态保持页面间数据传输的一种方法
- JSP页面跳转方法大全
- 移动端所有浏览器页面调试方法
- 你知道 JavaScript 有 535 种方法刷新页面吗？
- Tomcat Web页面管理应用配置与报403解决方法
本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。
Adobe Dreamweaver CS5中文版经典教程
Adobe公司 / 陈宗斌 / 人民邮电 / 2011-1 / 45.00元
《Adobe Dreamweaver CS5中文版经典教程》由Adobe公司的专家编写，是AdobeDreamweavelCS5软件的官方指定培训教材。全书共分为17课，每一课先介绍重要的知识点，然后借助具体的示例进行讲解，步骤详细、重点明确，手把手教你如何进行实际操作。全书是一个有机的整体，它涵盖了Dreamweavercs5的基础知识、HTML基础、CSS基础、创建页面布局、使用层叠样式表、使......一起来看看 《Adobe Dreamweaver CS5中文版经典教程》 这本书的介绍吧!
