zoukankan      html  css  js  c++  java
  • 项目中碰到的Ajax相关的问题记录

    需求描述:

    第一步:通过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("数据错误!"
                        +"
    请求对象: " + XMLHttpRequest
                        +"
    错误类型: " + textStatus
                        +"
    异常对象: " + 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
    
    
     


      
      

  • 相关阅读:
    再论使用Oracle Instant Client连接Oracle
    再谈业务逻辑架构模式(事务脚本,表模块,活动记录,领域模型)
    业务逻辑架构模式(事务脚本,表模块,活动记录,领域模型)
    .net程序集组成与内存布局
    多参的实现原理
    起点
    Windows1[头文件]
    C++中构造函数、析构函数、拷贝构造函数详解
    PHP 开发工具
    写点东西顺便吐槽(很弱很弱的技术文)
  • 原文地址:https://www.cnblogs.com/Archie2018/p/12200652.html
Copyright © 2011-2022 走看看