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跳转到新的jsp页面的更多相关文章

  1. ajax跳转到新的jsp页面（局部刷新）

    ajax可以实现局部刷新页面,即在不刷新整个页面的情况下更新页面的局部信息. 项目中遇到一个问题:在用户列表也,当点击某个按钮时需要去查询用户的信息,查询成功跳转到用户详情界面:查询失败,则在原页面弹 ...

  2. 问题：使用ajax跳转到新页面无效（浏览器Safari）

    问题:使用ajax跳转到新页面无效(浏览器Safari)   window.open("{% url "runtestinfo" %}")   但是使用loca ...

  3. layer.open打开一个新的jsp页面，如何关闭并刷新父页面问题

    layer.open打开一个新的jsp页面弹框,如何关闭呢? 在新的页面提交完毕之后,关闭并刷新父页面列表. layer.closeAll(); parent.layer.closeAll(); wi ...

  4. ajax 如何提交数据到后台jsp页面，以及提交完跳转到jsp页面

    我logincheck.jsp页面取传参数代码: String user=request.getParameter("user1"); String pwd=request.get ...

  5. springmvc（@ResponseBody）无法跳转到对应的jsp页面

    项目框架:spring+springmvc+mybatis 问题描述:Controller返回jsp页面名称后,前端无法跳转到该页面,而是将该jsp名称打印到前端页面 前端异常信息:无 后端异常信息: ...

  6. J2EE项目中，servlet跳转到相应的JSP页面后，JSP页面丢失了样式效果

    原因: js和css的引用路径是相对路径.跳转后路径改变. 解决方法: 先在head标签中加入一下代码 <% String path = request.getContextPath(); St ...

  7. Ajax 提交session实效跳转到完整的登陆页面

    在spring security 中 Ajax提交时,session超时,局部加载登陆页面,为解决这个问题,重写ajax提交,返回的是modeview或者没有制定datatype时; 如果检测到加载到 ...

  8. JSP 页面跳转中的参数传递

    1. 从一个 JSP 页面跳转到另一个 JSP 页面时的参数传递 1)使用 request 内置对象获取客户端提交的信息 2)使用 session 对象获取客户端提交的信息 3)利用隐藏域传递数据 4 ...

  9. JSP页面的基本结构

    一:一个JSP页面由以下基本元素组成. (1)HTML标签 (2)CSS (3)变量和方法 (4)Java代码段 (5)JSP动作和指令 (6)其他脚本元素(如Javascript) 二:JSP的基本 ...

随机推荐

  1. shell 踩坑记

    变量赋值时,等号两边不能有空格: 在判断表达式中,不论是 [ -n "$1" ] 还是 [ -f  "$1" ] 都要在变量两侧加上双引号: 在使用与或非判断式 ...

  2. springBoot系列教程06：参数验证及验证信息国际化

    在springboot应用中要验证参数是否正确很简单,web应用已经包含了validation的 1.定义需要被验证的参数实体,并用注解标明错误类别和错误信息 package com.xiao.dom ...

  3. x的x次幂的值为10，求x的近似值

    public class Main { static double eps = 1e-7; public static void main(String[] args){ double l = 2,r ...

  4. Emmet for Dreamweaver 整理分享

    我是一名技术不是很到位的前端,每次做项目总要写大量的HTML和CSS,耳边经常听到的是快.快点.再快点!我真想说快你妹!但是,我不得不承认的是:我只有两只手... 后来,在群里看到有人分享了一个连接大 ...

  5. display:box；display:flex；弹性盒模型

    display:box:display:flex:弹性盒模型 非常适用于移动端.PC端高级浏览器,效果也很好. display: -webkit-box; display: -moz-box; dis ...

  6. 在阿里云 ECS 搭建 nginx https nodejs 环境（三、nodejs）

    在阿里云 ECS 搭建 nginx https nodejs 环境(三.nodejs) 在阿里云 ECS 搭建 nginx https nodejs 环境(三.nodejs) 第一步 指定版本源 执行 ...

  7. jBPM学习之利用API完成流程实例

    流程引擎对象ProcessEngine是jBPM4所有的Service API之源.在jBPM4中各种服务相互依存,但所有的Service API都从ProcessEngine中获得,由此可见Proc ...

  8. SpringMVC handleMapping 处理器映射器 属性清单

    映射器的属性清单 defaultHandler         在映射与所有处理器都不匹配的情况下,指定默认的处理器(处理器即你定义的Controller(action)类) order        ...

  9. unity3d 打包个人记录

    证书问题Android:CreateCer.bat ztmyseabed 路径:tool/Build/Windows/Android下iOS:MacCer文件夹如何上传ipa:修改版本号version ...

  10. slave延迟很大优化方法

    一般而言,slave相对master延迟较大,其根本原因就是slave上的复制线程没办法真正做到并发.简单说,在master上是并发模式(以InnoDB引擎为主)完成事务提交的,而在slave上,复制 ...