jQuery中的Ajax及其与Java后台的数据交换

最新推荐文章于 2024-09-23 16:41:40 发布

wutao1155

最新推荐文章于 2024-09-23 16:41:40 发布

阅读量1w

点赞数 3

分类专栏： JavaScript 文章标签： jquery ajax java

本文链接：https://blog.csdn.net/wutao1155/article/details/53048114

版权

JavaScript 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

一、ajax相关函数简析

1.1、ajax所有函数的默认全局设置

//默认设置
ajaxSettings: {  
    url: ajaxLocation,  
    type: "GET",       //请求默认方式为get
    isLocal: rlocalProtocol.test( ajaxLocParts[ 1 ] ),  
    global: true,      //默认触发全局Ajax事件
    async: true,       //默认异步
    processData: true, //默认会将data数据转成查询字符串
    cache: true,       //默认读取缓存
    contentType: "application/x-www-form-urlencoded; charset=UTF-8"} 

//默认设置还可通过如下函数修改
$.ajaxSetup({
    async : false
});

说明：

在processData选项为true的情况下，只有data选项的数据是PlainObject而不是String时，才会转成查询字符串。
如果指定了cache为false表示不能进行数据缓存，那么会在url后面添加一个当前时间。

1.2、jQuery.get()和jQuery.post()函数源码

jQuery.ajax({
            url: url,
            type: method,   //"get"或"post"
            dataType: type, //可选
            data: data,     //String或Object
            success: callback
        });

由此可得：

jQuery.get()和jQuery.post()只有在数据成功返回后才会调用回调函数。
若不重新设置ajax的全局设置，这两个函数只能以异步方式运行。
由于全局设置中processData选项为true，而jQuery.get()和jQuery.post()中没有对该选项重新设置，故这两个函数中的data选项的数据若不是String的话，必会经过jQuery.param()转成查询字符串。

1.3、jQuery.getJSON()和jQuery.getScript()函数源码

getJSON: function( url, data, callback ) {  
        return jQuery.get( url, data, callback, "json" );  
    } 

getScript: function( url, callback ) {  
        return jQuery.get( url, undefined, callback, "script" );  
    }

这两个函数本质上就是指定了dataType选项的jQuery.get()。

二、ajax函数调用示例

2.1 使用jQuery.get()或jQuery.post()

 var json = {};
 json.id = "40022";
 json.name = "WooTer";

 $.get("/MedRecord/emr_main.do",json,function(data,status){
     //TODO
 });

该方式的局限性：

只有在数据成功返回后才会调用回调函数，若数据返回失败则没有任何提示信息。
若不重新设置ajax的全局设置，就只能以异步方式运行，这在某些需要同步的场景下使用就不便了。
若不重新设置ajax的全局设置，在传递的变量json不变的情况下，会从浏览器缓存读取要返回的数据，这在某种程度上就无法获取数据库中最新的数据。

2.2 使用jQuery.ajax()

 var json = {};
 json.id = "40022";
 json.name = "WooTer";

$.ajax({ 
        url: "/MedRecord/emr/loadModelDirdata.do",
        data: json, 
        type: 'post',      //请求方式 
        async: false,      //是否异步
        cache: false,      //是否使用缓存
        dataType: "json",  //返回数据的格式
        error: function () {  
            alert('加载数据失败！'); 
        }, 
        success: function(data){  
            //TODO
        }   
    });

该方式的灵活性：

可添加调用失败时的提示信息。
可自由设置同步还是异步。
可设置在任何情况下都不从浏览器缓存读取数据。

三、不同设置类型的ajax函数向Java后端传递数据

3.1、前端以查询字符串形式传送数据

（1）查询字符串的每个键只对应一个值

 var json = {};
 json.id = "40022";
 json.name = "WooTer";

$.ajax({ 
        url: "/MedRecord/example1.do",
        data: json, 
        //...  
    });

/*方式一：
 *后端通过 @RequestParam(value="xxx") String xxx 分别获取对应的键值对
 */
@RequestMapping(value="/example1", method=RequestMethod.GET)
public @ResponseBody String emrSubmit(
      @RequestParam(value="id") String id，
      @RequestParam(value="name") String name
){
  //...
}


/*方式二：
 *后端通过 @RequestParam Map<String,Object> param 一次性获取全
 *部的键值对
 */
@RequestMapping(value="/example1", method=RequestMethod.GET)
public @ResponseBody String emrSubmit(
      @RequestParam Map<String,Object> param
){
  //提取前端传来的具体参数
  String id = (String)params.get("id");
  String name = (String)params.get("name ");
  //...
}

（2）查询字符串的每个键对应多个值（键值为简单数组）

 var json = {};
 json.id = ["40022","40021","40022"];
 json.name = ["WooTer","WooTing","WooFing"];

$.ajax({ 
        url: "/MedRecord/example1.do",
        data: json, 
        //...  
    });

/*方式一：
 *后端通过 @RequestParam(value="xxx[]") List<String> xxx 获取
 *"一键多值"对
 */
@RequestMapping(value="/example1", method=RequestMethod.GET)
public @ResponseBody String emrSubmit(
      @RequestParam(value="id[]") List<String> id，
      @RequestParam(value="name[]") List<String> name
){
  //...
}

3.2、前端以json字符串形式传送数据

 var json = {};
 json.id = "40022";
 json.name = "WooTer";

$.ajax({ 
        url: "/MedRecord/example1.do",
        data: JSON.stringify(json), 
        contentType:'application/json;charset=UTF-8',
        //...  
    });

/*方式一：(该方式在跨域访问下使用有点问题)
 *后端通过 @RequestBody 直接将json字符串绑定到对应的model上
 */
@RequestMapping(value="/example1",method=RequestMethod.GET,
consumes = "application/json")   
public @ResponseBody String emrSubmit(@RequestBody User user) { 
    //...
}

class User {
    private String id;
    private String name;
    //...(Getters and Setters)
}

四、ajax函数接收Java后端返回的不同类型的数据

4.1、Java后端返回Object类型

@RequestMapping(value="/example1", method=RequestMethod.GET)
public @ResponseBody List<EmrMain> emrSubmit(){
  //...
  List<EmrMain> emrMain = new ArrayList<EmrMain>();
  return emrMain;
}

/*方式一：
 *设置dataType："json",接收到的即是json对象
 */
$.ajax({
        //...
        dataType:"json",
        success : function(data) {
            //此处的data就是一个json对象，可以直接当作对象使用
        }
    });


/*方式二：
 *不设置dataType,接收到的即是json字符串
 */
$.ajax({
        //...
        success : function(data) {
            //此处的data是json字符串
        }
    });

4.2、Java后端返回String类型

@RequestMapping(value="/example1", method=RequestMethod.GET)
public @ResponseBody String emrSubmit(){
  //...
  List<EmrMain> emrMain = new ArrayList<EmrMain>();
  return JSON.toJSONString(emrMain);
}

/*方式一：
 *设置dataType："json",接收到的即是json字符串
 */
$.ajax({
        //...
        dataType:"json",
        success : function(data) {
            //此处的data是json字符串
        }
    });


/*方式二：
 *不设置dataType,接收到的是外面再套一层引号的json字符串
 */
$.ajax({
        //...
        success : function(data) {
            //此处的data是外面再套一层引号的json字符串
            //若想通过data得到json对象，就需要调用两次JSON.parse(),如：JSON.parse(JSON.parse(data));
        }
    });

由此可得：

Java后台在返回数据时，都会将要返回的数据转成字符串。若数据为Objcet类型，则将其转成字符串；若数据本身就为String类型，也会将其转成字符串（此时会在外层再套一对引号）。
ajax在接收数据时，若不设置dataType选项，则直接将后台传来的字符串赋给data变量；若设置dataType：”json”，则会对后台传来的字符串使用一次JSON.parse()函数。

参考链接：
jQuery源码分析之$.ajax方法
 jQuery API中文文档之jQuery.param()
SpringMVC Controller接收前台ajax的GET或POST请求返回各种参数（该文章有些小错）
使用SpringMVC注解@RequestParam(value=”XXX”,required=false)时需要注意的问题
 Spring MVC @RequestParam 如何获取前台的数组类型