ajax跳转到新的jsp页面(局部刷新)

作者:无名 - 其它综合 -

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/userformuserjson="+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

lt;bodygt;

lt;form id="userform" action="" method="post"gt;

lt;input id="userformjson" name="userformjson" type="hidden"/gt;

lt;/formgt;

lt;/bodygt;

  

ajax跳转到新的jsp页面(局部刷新)

原文地址:https://www.cnblogs.com/jpfss/p/9517727.html

这篇内容就是由IT人知识库 小编为各位整理 原文链接:http://www.itpeo.net/9999/4543274.html





js-----jquery前端框架:

1.小知识点   1.toggle()方法切换元素的可见状态,开关单击循环;   2.hover()方法规定当鼠标指针悬 ...

计算机网络TCP与UDP的区别

tcp协议与udp协议的区别:    1 tcp协议面向连接,udp协议面向非连接。   2 tcp协议传输速度慢, ...

opencv(1)图像处理

示例: 3、几何变换 3.1 平移 图像的平移,沿着x方向tx距离,y方向ty距离,那么需要构造移动矩阵: m = 1 ...

如何在mssql中获取最新自增ID的值

@@identity 返回最后一个插入 identity 的值,这些操作包括:insert, select into,或 ...

centos下静默安装oracle11g

一、安装依赖包 yum -y install gcc make binutils gcc-c++ compat-lib ...

spark的hive操作和常见的bug

package hive import org.apache.spark.sparkconf import org. ...

python元编程之使用动态属性实现定制类--特殊方法__setattr__,__getattribute__篇

问题:实现一个类,要求行为如同namedtuple:只存在给定名称的属性,不允许动态添加实例属性。 主要知识点在于: _ ...

主板概念

主板类型: atx:横长竖短,大板 btx:intel提出的新型主板架构,不牺牲性能的情况下做到最小的体积 小板:相比 ...

瞎写论售后服务

30有+的我又一次深深地感到无力,但已然不像以前了,独自生烦,悲伤不已。事情关靠想是没有用的。想只是最最基础的,要说好, ...

YAML文件格式_k8s/docker-compose配置文件

yaml(yet another markup language),是一个json的超集,意味着任何有效json文件也 ...

Python-05-字符串格式化

一、百分号方式 %[(name)][flags][width].[precision]typecode (name ...

SpringCloud广告系统随想

广告系统需要两个方面:一个广告投放系统,一个是广告检索系统。 两个系统针对的人群不同:   1、广告投放系统针对的是广告 ...

1、Java简介

java se: 最基础的部分,java的标准版本;   java ee: 企业版,(jsp、ejb、服务)   j ...

linux线程操作

初始化条件变量 int pthread_cond_init(pthread_cond_t *cv,pthread_co ...

xml概述和语法

1.什么是xml xml是extensible marku language 的缩写,它是一种类似于html的标记语言, ...

前端基础入门第二阶段-HTML5基础+HTML语义化

html基础: html简介 --html(hyper textmarkup language)中文译名为”超文本标记语 ...

vector<vector<int>>使用简单示例

#include lt;iostreamgt; #include lt;vectorgt; using namespa ...

1-25泛型

泛型的概念 在编写集合相关代码时在eclipse里面总有一些黄色警告,在不使用注解的情况下,使用泛型之后,就不会有这些黄 ...

[POI2009]石子游戏Kam

传送门 阶梯nim模型 代码: #includelt;cstdiogt; #includelt;iostreamgt; ...

VB6文件操作自定义函数合集之一

‘--与文件及文件夹操作相关的函数 ‘--必须引用fso的active object dim strlist as s ...