ajax跳转到新的jsp页面的方法
时间:2019-04-07
本文章向大家介绍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
<body> <form id="userForm" action="" method="post"> <input id="userFormJson" name="userFormJson" type="hidden"/> </form> </body>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 每日一题:what is 文件描述符(FD)
- 每日一题:如何理解不定长参数
- 每日一题:协程相关
- 全方位了解协程概念
- leetcode MySQL 实现交换工资问题
- leetcode: explore-array-31 旋转矩阵
- Python 内置模块:logging 官方基础教程翻译
- leetcode: explore-array-21 从排序数组中删除重复项
- leetcode: explore-array-22 买卖股票的最佳时机 II
- leetcode: explore-strings-32 反转字符串
- leetcode: explore-strings-33 反转字符串
- 02-leetcode: explore-strings-34 字符串中的第一个唯一字符
- 《操作系统》:理解一些基础概念
- Json与对象相互转换 - alibaba fastjson
- 2020-08-21