未加星标

ajax跳转到新的jsp页面的方法

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 | 作者 红领巾 ] 0人收藏点击收藏
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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

主题: Ajax数据浏览器伪代码需求
tags: 查询,用户,obj,页面,ajax,function,success,data,error,searchUser,转到,方法,weui,详情
分页:12
转载请注明
本文标题:ajax跳转到新的jsp页面的方法
本站链接:http://www.codesec.net/view/568433.html
分享请点击:


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(60)