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. 如果把父组件的数据实时的传递到子组件：用watch

    1.在子组件使用watch来监听传递给子组件的数据,然后更新子组件的数据. 2.watch和computed结合使用效果非常好. 参考链接:https://blog.csdn.net/zhouweix ...

  2. map按value查找相应元素

    find_if算法用来在map中查找value符合条件的pair元素,返回指向该符合条件元素的迭代器,如果找到,那么返回最后一个元素的后一个元素end(); 1.首先要定义头文件 #include & ...

  3. Java Servlet学习笔记（四）Servlet客户端Http请求

    Servlet 客户端 HTTP 请求 当浏览器请求网页时,它会向 Web 服务器发送特定信息,这些信息不能被直接读取,因为这些信息是作为 HTTP 请求的头的一部分进行传输的.您可以查看 HTTP ...

  4. [Vue + TS] Use Dependency Injection in Vue Using @Inject and @Provide Decorators with TypeScript

    Vue 2.2 introduced a simple dependency injection system, allowing you to use provide and inject in y ...

  5. Android滚轮选择器实现

    思路: 1.布局,整个控件的布局,事实上就是用代码取带xml来实现当前布局 2,能够滑动的(即滚轮).事实上是一个ScrollView 3.推断滑动状态的,有protected void onScro ...

  6. libiconv 支持的编码

    libiconv 支持的编码 php 中的 iconv() 函数常用来作编码转换用.作一些不同编码的动态数据的转换时常遇到一些未知编码的数据,这时 iconv() 支持那些编码转换就很重要. 刚开始, ...

  7. XAMPP各个版本配置

    XAMPP各个版本配置 http://code.stephenmorley.org/articles/xampp-version-history-apache-mysql-php/ XAMPP  Ap ...

  8. ajax上传进度条

    <script type="text/javascript"> function register(){ var frm = document.getElementBy ...

  9. Want to archive tables? Use Percona Toolkit’s pt-archiver--转载

    原文地址:https://www.percona.com/blog/2013/08/12/want-to-archive-tables-use-pt-archiver/ Percona Toolkit ...

  10. JS学习笔记 - fgm练习 - 网页换肤

    总结: 1. 点击按钮,div内部变色,边框保持颜色不变. 实现原理:其实本来就把background 和 border 分别设置了同一个颜色,看似是一个整体,其实本来就是分开的. 那么点击的时候,只 ...