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. ubuntu14.04 printk()默认打印的位置

    tail /var/log/syslog 即可显示printk打印的信息

  2. Eclipse中自动添加注释

    方法一:Eclipse中设置在创建新类时自动生成注释  windows-->preference  Java-->Code Style-->Code Templates  code- ...

  3. Flask设置配置文件

    Flask修改配置: from flask import Flask app = Flask(__name__) app.config['DEBUG'] = True @app.route('/') ...

  4. BZOJ1014[JSOI2008]火星人prefix(splay维护hash)

    Description 火星人最近研究了一种操作:求一个字串两个后缀的公共前缀.比方说,有这样一个字符串:madamimadam,我们将这个字符串的各个字符予以标号:序号: 1 2 3 4 5 6 7 ...

  5. 微信小程序实现一个简单的表格

    wxml <view class="table"> <view class="tr bg-w"> <view class=&quo ...

  6. android通用JSON解析

    ackage cn.com.pcgroup.<a href="http://lib.csdn.net/base/15" class="replace_word&qu ...

  7. LINUX设备驱动程序笔记（三）字符设备驱动程序

          <一>.主设备号和次设备号        对字符设备的訪问时通过文件系统内的设备名称进行的.那些设备名称简单称之为文件系统树的节点,它们通常位于/dev文件夹. 字符设备驱动程 ...

  8. js遍历对象的属性和方法

    js遍历对象的属性和方法 一.总结 二.实例 练习1:具有默认值的构造函数 实例描述: 有时候在创建对象时候,我们希望某些属性具有默认值 案例思路: 在构造函数中判断参数值是否为undefined,如 ...

  9. matlab 可视化 —— 高级 api（montage）、insertObjectAnnotation、insertMaker

    1. montage:同时显示多个图像 thumbnails = train_x(:, :, :, 1:100); thumbnails = imresize(thumbnails, [64, 64] ...

  10. AlertDialog的onCreateDialog与onPrepareDialog用法

    场景:在一个Activity中多次使用弹出对话框.而且对话框携带着动态变化的信息数据,这时假设仅仅使用onCreateDialog(int id, Bundle bundle)回调,则会发现第一次以后 ...