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>

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

您可能感兴趣的文章:

JS中Select下拉列表类(支持输入模糊查询)功能
AngularJS使用ngOption实现下拉列表的实例代码
JS设置下拉列表框当前所选值的方法
js实现下拉列表选中某个值的方法(3种方法)
jquery用ajax方式从后台获取json数据后如何将内容填充到下拉列表
JS实现支持多选的遍历下拉列表代码
使用JS模拟锚点跳转的实例
js实现微信/QQ直接跳转到支付宝APP打开口令领红包功能
JSP页面跳转方法大全
JS动态添加的div点击跳转到另一页面实现代码
JS实现点击下拉列表文本框中出现对应的网址,点击跳转按钮实现跳转

全 部 栏 目

全部栏目