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. BZOJ3697: 采药人的路径（点分治）

    Description 采药人的药田是一个树状结构,每条路径上都种植着同种药材.采药人以自己对药材独到的见解,对每种药材进行了分类.大致分为两类,一种是阴性的,一种是阳性的.采药人每天都要进行采药活动 ...

  2. Direct2D开发：Direct2D 和 GDI 互操作性概述

    本主题说明如何结合使用 Direct2D 和 GDI(可能为英文网页).有两种方法可以结合使用 Direct2D 和 GDI:您可以将 GDI 内容写入与 Direct2D GDI 兼容的呈现器目标, ...

  3. 字串乱序 PHP&JS

    <?php /** * 字串乱序 PHP&JS * * php 中把字串乱序后输出给客户机的 JAVASCRIPT , JAVASCRIPT 中恢复 * 在指定长度提取一个字符,并把这一 ...

  4. Fragment事务管理源代码分析

    转载请标明出处:http://blog.csdn.net/shensky711/article/details/53132952 本文出自: [HansChen的博客] 概述 在Fragment使用中 ...

  5. 素数表（Eratosthenes）

    怎么判断一个数是素数? 常规的方法是枚举从2开始的数,看看是否能被整除. 但是,如果要判断的数很多的时候,那么效率会十分低下.... 一个优化的方法是不用判断比这个数小的所有数(到平方根位置),而是判 ...

  6. web服务器软件（Nginx，Apache，IIS，Lighttpd）介绍

    Nginx是一款轻量级的Web 服务器/反向代理服务器及电子邮件(IMAP/POP3)代理服务器,并在一个BSD-like 协议下发行.其特点是占有内存少,并发能力强,事实上nginx的并发能力确实在 ...

  7. poj 2240 floyd算法

    Arbitrage Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 17349   Accepted: 7304 Descri ...

  8. 去哪网实习总结：用到的easyui组件总结（JavaWeb）

    本来是以做数据挖掘的目的进去哪网的,结构却成了系统开发... 只是还是比較认真的做了三个月,老师非常认同我的工作态度和成果.. . 实习立即就要结束了,总结一下几点之前没有注意过的变成习惯和问题,分享 ...

  9. C++ Tricks（一）—— 判断字符串 string 对象的所有字符都相等

    S == string(S.size(), S[0]);

  10. C#调用oracle存储过程自定义表类型

    http://blog.csdn.net/studyzy/article/details/11524527