zoukankan      html  css  js  c++  java
  • ajax

    ajax:

    • jsonp 跨域请求
    • java对象中数组属性传值
    • ajax共同设置
    • ajax注意事项

    jsonP格式:跨域请求

    $.ajax({
    url: serverUrl + "loginByAccount",
    type: "GET",
    timeout: timeoutPeriod,
    dataType: "jsonp",
    jsonp: "callbackparam",
    data: {account: username, password: password, type: type},
    success: successCallback,
    error: errorCallback
    });

    服务器端:

    String key = request.getParameter("callbackparam");   --获取jsonp的随机数

    sbReturn.append(key + "(" + GroupUtils.mapper.writeValueAsString(returnMap) + ")");

    java对象中数组属性传值

     springMVC中java的接收对象属性是数组类型时,post请求会被当做一个字符串处理,因此需要如下方式:

    1. get请求,将对象序列化  jQuery.param(***);

    2. post请求, 添加 traditional=true,即序列化,但此种序列化是浅序列化,对于对象中有List对象这种则会报错。

    3.post请求 JSON.stringify()  

    因为提交数据多采用post请求,前台json对象也应以数组的形式保存数据。

    后台数组接法:一般前台的数组转入后台为  userName[],因此 SpringMvc中 定义 @RequestParam('userName[]'),

    traditional为true 时,接收方式为@RequestParam('userName')

    ajax共同设置

    /**
    * ajax共同设置
    */
    jQuery.ajaxSetup({
    timeout : 2000*60,
    dataType : "json",
    type: "post",

    statusCode : {404 : function(){       //状态码  提示信息
      Zepto.toast("404 页面链接地址未找到");
    },

    dataFilter : function(data, type){   //回调函数数值预处理

      if(!data || !data.success){

       $.alert(data.message);

        return false;

      }

      return data.result;

    }


    });
    jQuery(document).ajaxStart(function(){
      ******
    });
    jQuery(document).ajaxComplete(function(){
      ******
    });

    jQuery(document).ajaxError(function(){
      ******
    });

    如果不想采用共同的设置,需要配置global= false。单独对某些特殊的ajax做处理。

    ajax注意事项

    error: 如遇到ajax请求,直接进入fail无法传递到后台400错误。

         1. 多半与未设置dataType有关。

          2. 其次是get和post请求与接收方的要求不一致。

          3. 传递数据get请求时需要urlEncode加密。

          4. 数据传递后台的model如果有list<?>时,将无法直接转换,需要指定类型。

          5. springMVC多参情况下,只能有一种model类型去传递。

             错误:

               data: {year:year,

          person:person}

           正确:

              person.year = year;

               data : person;

        6. 多数据复杂格式,要将其转换为json进行传递(对象中存在数组类型时,要设置   traditional:true 这个属性)  

    获取request中的所有参数,这种方式适合于复杂数据提交,数组,POJO对象中包含对象,或list对象。

    这种方式需要将request的ajax提交 contentType:'application/json',同时将data数据 JSON.stringify。ajax默认为:( "application/x-www-form-urlencoded")

    复制代码
    jsp:
    $.ajax({ url : '****', contentType: 'application/json', data: JSON.stringify(person) }) java: @RequestMapping('') public Map<String,Object> submitInfo(@RequestBody Person person){ }
    复制代码

     注意:如果提交的数据是List对象类型,后台如果直接List<User> userList,接到的实质是List<LinkedHashMap>而非user对象,需要使用 User[] user来接收对象。

  • 相关阅读:
    Markdown语法的学习:样式
    vue项目webpack编译缓存cache-loader
    SourceTreeSetup-3.3.8安装下载
    解决el-menu基于keep-alive路由跳转菜单初始化设置
    前端在开发过程中对API返回的数据各种字段不太清晰输入网址json.cn 使用在线解析工具查看
    没有后台API接口 前端页面实现搜索框模糊查询
    控制台报错 Uncaught TypeError: $(...).tap is not a function
    node模拟数据库循环注册用户池
    深入理解Golang之interface和reflect
    单通道与双通道
  • 原文地址:https://www.cnblogs.com/DennyZhao/p/7442458.html
Copyright © 2011-2022 走看看