JQuery.Ajax()的data参数类型实例详解

JQuery.Ajax()是JQuery库中一个常用的方法，用于向后端服务器发送异步请求并获取响应结果。其中，最常用的参数之一就是 data。data参数用于指定要发送到服务器的数据。下面将讲解data参数的详细使用方法并给出两个实例。

1. data参数的数据类型

data参数可以是一个普通对象，也可以是一个字符串。如果是字符串则必须满足url编码规范。需要注意的是，如果data为一个普通对象，则JQuery会自动将其转换成一个字符串类型并添加到请求体中发送。

2. data参数的使用方法

2.1 传递普通对象类型数据

$.ajax({
        url:"/api/userInfo",
        type:"post",
        data:{
            userId:"101",
            userName:"Jack",
            age:20,
            gender:"Male",
        },
        dataType:"json",
        success:function(res){
            console.log(res);
        },
        error:function(error){
            console.log(error);
        }
    });

在上面的例子中，我们向服务器发送了一个 HTTP POST 请求。请求的请求体中包含了一个普通对象，包括userId，userName，age和gender。服务器可以通过name键值来获取对应的值。这时候，JQuery会将该对象转换成字符串并添加到请求体中发送给服务器。服务器在拿到请求的时候，可以使用request.getParameter()来获取传递过来的值。

2.2 传递字符串类型数据

let formData = new FormData();
formData.append("name","John");
formData.append("age",30);
formData.append("file",$("#file")[0].files[0]);
formData.append("description","hello world.");
$.ajax({
    url:"/api/fileUpload",
    type:"post",
    data:formData,
    contentType:false,
    processData:false,
    success:function(res){
        console.log(res);
    },
    error:function(error){
        console.log(error);
    }
});

在上面的例子中，我们通过formData对象来创建要传递的字符串类型数据。在跟服务器通信的时候，我们需要根据服务器端的要求来配置contentType和processData两个参数。例如contentType需要设置为false以避免发送类型格式错误，processData参数需要设置为false来告诉jquery不应该序列化数据。服务器在拿到请求的时候可以使用request.getParts()来读取传递过来的数据。例子中的，name，age，file和description分别是我们传递给服务器的数据字段。

最后，需要注意的是，在实际开发中，data参数的使用需要根据不同的实际场景进行选择。如果是传输的数据量较少的常规数据，则可以使用传递普通对象的方式。如果需要上传大量文件或二进制数据，则需要使用传递字符串的方式。总的来说，只有根据实际情况灵活选择，才能保证数据的安全性和传输的效率。