ajax可以实现局部刷新页面，即在不刷新整个页面的情况下更新页面的局部信息。
项目中遇到一个问题：在用户列表也，当点击某个按钮时需要去查询用户的信息，查询成功跳转到用户详情界面；查询失败，则在原页面弹出提示信息。
想到两个解决办法：
方法一：
点击按钮，调用普通方法去查询用户信息，查询成功跳转到用户详情页面；查询失败，重定向调用查询用户列表的方法，在查询用户列表的方法结束后重新跳转到用户列表页面并弹出提示信息，相当于重新加载了用户列表页面。
方法二：
根据需求，不可以重新加载用户列表页面。用ajax调用查询用户详情的方法，查询成功返回用户Json串，查询失败则返回error。
     后台方法：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
@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：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
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）错误案例：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
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方法提交的数据，并且可以跳转到新页面了：
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
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
1
2
3
4
5
<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与iframe嵌套实现页面局部刷新

    使用ajax与iframe嵌套实现页面局部刷新.该javascript代码仅供参考,需按自己需要修改.​1. [代码]javascript代码 function cj_start(depname,gr ...

  5. jquery实现页面局部刷新

    后台管理中总是使用frameset进行分成部分进行管理,但是感觉很不好用,尤其是页面间调转还要判断window.parent,太令我费神了,于是学习使用XMLHttpRequest进行页面局部刷新.代 ...

  6. （22）Ajax的基本使用(实现登录功能和局部刷新以及防止跨站请求伪造攻击)

    Ajax的作用 前后端分离的项目,需要交互,就要通过Ajax来完成交互 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即 ...

  7. 浅析PHP页面局部刷新功能的实现小结(转)

    转载地址 https://www.jb51.net/article/38901.htm 方法其实挺多的.以前比较常用的是iframe这样来做.现在多了个ajax,所以一般情况下都是用的ajax.第一种 ...

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

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

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

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

随机推荐

  1. iptables转发安卓手机热点的数据到指定的端口

    iptables转发安卓手机热点的数据到指定的端口 手机安装了VPN,可以上GOOGLE的那种.然后我打开手机的热点,连上笔记本,想让本本上个google 没想到被GFW挡住了.看了一下手机的网络工作 ...

  2. HTTP请求报文、响应报文

    HTTP请求报文 HTTP请求报文由3部分组成(请求行+请求头+请求体): 请求行:①是请求方法,GET和POST是最常见的HTTP方法,除此以外还包括DELETE.HEAD.OPTIONS.PUT. ...

  3. MYSQL添加远程用户或允许远程访问三种方法

    添加远程用户admin密码为password GRANT ALL PRIVILEGES ON *.* TO admin@localhost IDENTIFIED BY \'password\' WIT ...

  4. 洛谷 P2430 严酷的训练

    P2430 严酷的训练 题目背景 Lj的朋友WKY是一名神奇的少年,在同龄人之中有着极高的地位... 题目描述 他的老师老王对他的程序水平赞叹不已,于是下决心培养这名小子. 老王的训练方式很奇怪,他会 ...

  5. 关于腾讯云server使用FTP具体配置教程

    本文文件夹:-------------------------------------------------------- [-] 腾讯云server介绍 关于腾讯云server使用感受 作为开发人 ...

  6. 16.用Spring Boot颠覆Java应用开发

    转自:https://www.cnblogs.com/aishangJava/p/5971288.html Java开发概述: 使用Java做Web应用开发已经有近20年的历史了,从最初的Servle ...

  7. Fragment Summary 2/2

    出处:http://blog.csdn.net/lmj623565791/article/details/37992017 上篇博客中已经介绍了Fragment产生原因,以及一些基本的用法和各种API ...

  8. 基于AndFix的热修复 成功后简单的总结总结错失

    首先了解热修复是什么东西?? 就我自己简单的理解:就是不须要又一次打包 公布到市场 然后再让用户又一次下载就能够把一些小bug和需求通过补丁的形式进行改动. 然后如今的热修复方式有大致的三种: 1.d ...

  9. CentOS 7 virt-manager 无法连接本地的hypervisor

    OS : CentOS 7 Gnome Desktop 问题描写叙述: CentOS 7 下使用yum install virt-manager之后.使用virt-manager无法连接本地的hype ...

  10. 【高德地图API】从零開始学高德JS API（五）路线规划——驾车|公交|步行

    先来看两个问题:路线规划与导航有什么差别?步行导航与驾车导航有什么差别? 回答: 1.路线规划,指的是为用户提供3条路线推荐.[高德]在提供路线规划的时候,会提供用户自己定义路线规划功能,这是别家没有 ...