Archie2018  

需求描述:

第一步:通过controller1,进入到前端页面1,输入计算参数,点击按钮,对数据进行处理;

第二步:通过Ajax异步操作进入到controller2,得到数据之后,返回给Ajax,在success函数中进行显示,或者带数据进行页面跳转;

第三步:最后在新的页面进行数据展示。

 

问题一:Ajax参数问题(ps:要搞清楚各参数代表的意义,否则无从下手):

  这里列出几个比较常用的参数:(.ajax,.get,.post,.getJson几种方法基本差不多)

  url: (String) 请求的HTML页的url地址;

  type:(String) 请求方式,默认GET。注意其他的HTTP请求方法,例如PUT和DELETE也可以使用,但仅部分浏览器支持;

  data:(Object或者String)发送到服务器的数据,如果不是字符串数据,将自动转换为字符串数据;

  dataType:(String)服务器端返回内容的格式,包括xml、html、script、json、jsonp 、jQuery;

  success:(Function),需要注意的是:要将data传到要跳转页面的时候,根据需求进行转码。    

function(data,textStatus){
                    //data是服务器返回的数据
                    //textStatus是返回是否成功的状态,成功为"success",失败为"failure"
                    //data类型可能是xmlDoc、jsonObj、html、text等等。
               this//调用本次Ajax请求时传递的options参数
         //在获取返回来的数据有可能会用到的J
SON.stringify(...)
}            

  error:(Function),可以查看错误的信息。

function (XMLHttpRequest, textStatus, errorThrown) {
                alert("数据错误!"
                    +"\n请求对象: " + XMLHttpRequest
                    +"\n错误类型: " + textStatus
                    +"\n异常对象: " + errorThrown);
}

问题二:Ajax中提交表单以及将返回的数据传递到要跳转的页面中进行显示

(1)提交表单的时候,如果有form表单,则不需要指定form表单的action属性;

<form id="Form" action="#"></form>

<input type=button name="submit" value="提交"/>

 

(2)数据通过get方式放在要跳转的地址中:(缺点是:携带数据量少,不安全)

window.location.href = '跳转的目标地址'+data;       //有可能需要对data进行编码,尤其是data中带有特殊字符的url解析器解析不了,使用encodeURIComponent进行处理。

(3)通过post方式传递数据

<form id="Form" action="" method="post">
  <input id="result" type="hidden" name="result" value="">
<form/>
在js中对value进行赋值: $("#result").val(data); //data为Ajax返回的数据
$("#Form").attr("action", url); //url为指定要跳转的页面
$("#Form").submit();

 

最后,有关的一些注意事项:

关于上述跳转的注意事项

1、ajax只接受最后返回的值,不会响应跳转请求更改浏览器地址栏地址转向的,需要用js判断ajax的返回值是否要跳转,然后设置location.href实现跳转。这种跳转方式,携带数据只能通过get方式进行传递。

2、ajax异步请求struts的action只会返回所请求页面的html源代码,这样请求是不会跳转的,这种用法只是在替换页面局部html时使用。

3、在springMVC框架中,当controller层方法返回String类型的时候默认是进行页面跳转,这时候后台使用return时ajax接收到的并不是后台返回的某个字符串或状态码,而是整个html对象,这时可以在后台的方法上添加注解 @ResponseBody,之后返回的是对象数据,而不是整个html页面。

4、无法从ajax函数外部获取ajax请求到的数据,在需要使用数据的组件之前,先在ajax回调函数中使用localstorage.setItem()将数据储存在本地,在组件中使用localstorage.getItem()调用。 需要注意的是:localstorage是全局的。

在此过程中尝试在componentWillMount 中用 setState 来传递数据,但是报错,错误的大致内容是 setSate 必须在component 的 mounting和mounted状态下才能使用。

问题三:在解决问题的过程中,遇到了@RequestMapping @ResponseBody 和 @RequestBody之间的区别
可以查看原文:https://blog.csdn.net/ff906317011/article/details/78552426
简单概括一下:
1.@RequestMapping:用来处理请求地址映射的注解,可用于类或方法上。此处需注意@RequestMapping用在类上可以没有,但是用在方法上必须有。
2.@Responsebody :
注解表示该方法的返回的结果直接写入 HTTP 响应正文(ResponseBody)中,一般在异步获取数据时使用,  

通常是在使用 @RequestMapping 后,返回值通常解析为跳转路径,加上 @Responsebody 后返回结果不会被解析为跳转路径,而是直接写入HTTP 响应正文中。
3.@RequestBody:将 HTTP 请求正文插入方法中,使用适合的 HttpMessageConverter 将请求体写入某个对象。
问题四:在数据传递过程中,用到了FastJson相关的转换,它可以解析JSON格式的字符串,支持将Java Bean序列化为JSON字符串,也可以从JSON字符串反序列化到JavaBean。优点:速度快,功能相对完备,使用简单。主要用到下面几种方法:
parseArray:将json字符串,通过反射转换为相应的List<T>数据类型。
toJSONString:将对象数据转化为JSON字符串。
(1)
String json = JSON.toJSONString(map,true);      // Map-> String
Map<String, T> = JSON.parseArray(json, T.class);     //JSON array -> List

 (2)

String json_arr_String = JSON.toJSONString(arr_String,true);       //String[]->String
JSONArray jsonArray = JSON.parseArray(json_arr_String);           //String->JSONArray 

 (3)

String json=JSON.toJSONString(map);         //Map->String
Map map1 = JSON.parseObject(json);          //String->Map

 


 


  
  

posted on 2020-01-16 12:53  Archie2018  阅读(219)  评论(0编辑  收藏  举报