首页 > 网络编程 > AJAX相关 > 正文

ajax跳转到新的jsp页面的方法_AJAX相关

2018-12-10 21:32:10

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>

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

  • 相关标签:AJAX相关
  • 本文发布HTML5中文学习网 ,转载请注明出处,感谢您!
  • 相关文章


  • 曝网友假装外国人写投诉信 ofo秒退押金并回函致歉
  • 苹果市值缩水逾2000亿美元 遭多家投行下调目标价
  • Asp.net Core与类库读取配置文件信息的方法_实用技巧
  • asp.net在Repeater嵌套的Repeater中使用复选框详解_实用技巧
  • 利用IIS调试ASP.NET网站程序的完整步骤_实用技巧
  • Asp.Net Core轻松学习系列之配置文件_实用技巧
  • ASP.NET 页生命周期概述(小结)_实用技巧
  • 详解ASP.NET Core WebApi 返回统一格式参数_实用技巧
  • 2018年网络流行语有哪些?2018年十大网络流行语盘点
  • 华为首席财务官孟晚舟被暂扣 深圳市政府要求加方立即放人!
  • 独孤九贱(4)_PHP视频教程

    江湖传言:PHP是世界上最好的编程语言。真的是这样吗?这个梗究竟是从哪来的?学会本课程,你就会明白了。 PHP中文网出品的PHP入门系统教学视频,完全从初学者的角度出发,绝不玩虚的,一切以实用、有用...

    独孤九贱(5)_ThinkPHP5视频教程

    ThinkPHP是国内最流行的中文PHP开发框架,也是您Web项目的最佳选择。《php.cn独孤九贱(5)-ThinkPHP5视频教程》课程以ThinkPHP5最新版本为例,从最基本的框架常识开始,将...

    独孤九贱(1)_HTML5视频教程

    《php.cn原创html5视频教程》课程特色:php中文网原创幽默段子系列课程,以恶搞,段子为主题风格的php视频教程!轻松的教学风格,简短的教学模式,让同学们在不知不觉中,学会了HTML知识。 ...

    ThinkPHP5实战之[教学管理系统]

    本套教程,以一个真实的学校教学管理系统为案例,手把手教会您如何在一张白纸上,从零开始,一步一步的用ThinkPHP5框架快速开发出一个商业项目。

    PHP入门视频教程之一周学会PHP

    所有计算机语言的学习都要从基础开始,《PHP入门视频教程之一周学会PHP》不仅是PHP的基础部分更主要的是PHP语言的核心技术,是学习PHP必须掌握的内容,任何PHP项目的实现都离不开这部分的内容,通...

    作者信息

    kevin

    永远在学习的路上!

    相关教程

  • javascript初级视频教程 javascript初级视频教程
  • jquery 基础视频教程 jquery 基础视频教程
  • javascript三级联动视频教程 javascript三级联动视频教程
  • 独孤九贱(3)_JavaScript视频教程 独孤九贱(3)_JavaScript视频教程
  • 独孤九贱(6)_jQuery视频教程 独孤九贱(6)_jQuery视频教程
  • 热门教程