这次给大家带来ajax怎样跳转到新的jsp页面（附代码），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
登录后复制
相信看了本文案例你已经掌握了方法，更多精彩请关注【创想鸟】其它相关文章！
推荐阅读：
实现无刷新下拉联动的Ajax+Servlet（附代码）
ajax获取json数据为undefined应该如何使用
以上就是ajax怎样跳转到新的jsp页面（附代码）的详细内容，更多请关注【创想鸟】其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至253000106@qq.com举报，一经查实，本站将立刻删除。
发布者：PHP中文网，转转请注明出处：https://www.chuangxiangniao.com/p/2777345.html
