ajax与后台进行数据交互的几种常用方式（最全）
1.get请求
方式一：$.ajax{()}
$.ajax({
type : 'get',// 请求方式，可以不声明该属性，默认值就是get
url : 'getParams',// 请求地址
data : {// 请求数据，这个参数可以去掉，也就是只发送请求不携带数据
name : 'Marydon',
work : '程序员'
},
success : function(result){// 请求成功
alert(result);
},
error : function(result){// 请求失败，这个参数一般情况下不用携带
alert(result);
}
});说明：当是get类型时，可以不声明type，默认请求方式就是get请求
方式二：$.get();
$.get( 'getParams' , // 请求地址
{ // 请求数据
name : 111,
work : '程序员'
},
function (result) { // 请求成功
alert(result);
}); 方式三：$.getJSON();
$.getJSON( 'getParams' , // 请求地址
{ // 请求数据
name : 'Marydon' ,
work : '程序员'
},
function (result) { // 请求成功，要求返回的数据必须是json格式的字符串，返回其它类型数据接收不到
alert(JSON.stringify(result));
});后台返回json数据及前台对应的接收方式
方式一：返回json字符串
当后台没有指定返回数据格式为application/json数据时，默认是text/html文本数据，ajax将会根据Content-Type属性自动将dataType属性的值设置为：text，也就是按照字符串来解析返回的数据。
后台响应
// 告诉浏览器以指定的字符集进行解析返回数据
response.setCharacterEncoding( "utf-8" );
// 后台不指定响应数据格式
JSONObject json = new JSONObject();
json.put( "name" , request.getParameter( "name" ));
json.put( "work" , work);
// 返回json字符串
response.getWriter().append(json.toString()); 前端接收：两种情况
除$.getJSON()以外的ajax接收到的是json字符串，又可以划分为两种接收方式
第一种：需要手动将其转换成json对象
$.ajax({
type : 'post' , // 请求方式
url : 'getParams' , // 请求地址
data : { 'name' : 'Marydon' , 'work' : '程序员' }, // 请求数据
success : function (result){ // json字符串
// json字符串转json对象
// 方式一：eval()
var json = eval( '(' + result + ')' );
// 方式二：JSON.parse()
// var json = JSON.parse(result);
alert(json.work);
}
});第二种：指定返回数据是json
$.ajax({
type : 'get' , // 请求方式
url : 'getParams' , // 请求地址
data : { 'name' : 'Marydon' , 'work' : '程序员' },
dataType : 'json' , // 指定返回类型为json数据
success : function (result){ // 请求成功
alert(result.work);
}
});$.get( 'getParams' , // 请求地址
{ // 请求数据
name : 111,
work : '程序员'
},
function (result) { // 请求成功
alert(result.work);
},
'json' ); // 返回数据类型设置必须放在最后$.getJSON()可以接收到返回的json字符串，并自动将其转换成json对象
$.getJSON(
'getParams' , // 请求地址
{ name : 'Marydon' , work : '程序员' },
function (result) { // 自动将json字符串转化成json对象
alert(result.work);
}); $.getJSON()就不需要声明啦，因为它的值已经被指定为了'json'。
需要注意的是$.get()和$.post()添加'json'时的位置必须在最后一位。因为语法形如：$.post(url,[data],[callback],['json'])
方式二：返回json对象
后台响应
// 告诉浏览器以json对象来处理返回的数据
response.setHeader( "content-type" , "application/json;charset=utf-8" );
JSONObject json = new JSONObject();
json.put( "name" , request.getParameter( "name" ));
json.put( "work" , work);
response.getWriter().append(json.toString());前端接收
前端接收到的就是JSON对象，不需要再处理。
小结：
第一，$get()和$getJSON()的区别；
$.getJSON()不能声明dataType属性，因为它的值已经被指定为JSON，只有当返回的数据是json字符串或者json对象时，才会接收；而dataType的值，jQuery会自动根据返回类型进行设置，一般无需手动声明，其它地方一模一样。
第二，$get()、$getJSON()和$.ajax({})的区别；
前两者只能设置url、data、success这三个属性，当这三个属性不能满足需求时，就必须使用$.ajax({})了。
第三，关于ajax get请求携带数据的本质；
get请求的本质就是：url?param1=value1¶m2=value2&...，所以，我们可以去掉data属性，直接在url后面拼接参数即可。例如：
var param = "name=Marydon&work=" + encodeURI(encodeURI( '程序员' )); // 手动拼接需要编码2次，后台解码1次
$.get(
'getParams?' + param, // 请求地址+?+请求数据
function (result) { // 请求成功
alert(result);
});第四，get请求导致的中文乱码问题，主要分为两种情况：
首先，需要明白的是：get请求，浏览器设置的字符集是ISO-8859-1，所以中文传输到后台会导致乱码，因为后台是以UTF-8进行接收参数的。
第一种情况对应解决方案：使用原生的ajax携带数据
方式一，后台转码：new String(work.getBytes("iso-8859-1"), "utf-8");；
方式二，前端编码（推荐使用），例如：{work : encodeURI('程序员')}，后台解码：URLDecoder.decode(work, "utf-8")。
第二种情况对应解决方案：手动拼接key=value，传输数据
方式一：前台编码一次：work=encodeURI('程序员');，后台转码：new String(work.getBytes("iso-8859-1"), "utf-8");
方式二：前台手动编码两次：work=encodeURI(encodeURI('程序员'))，后台解码一次：URLDecoder.decode(work, "utf-8")。（推荐使用）
区分不同情况的原因是：
使用ajax的data属性传递数据时，get请求会自动对中文进行一次编码，tomcat对其解码一次，其本质还是ISO-8859-1，所以有两种解决方式；
自己手动拼接的话，get请求将不会自动对中文进行一次编码，而tomcat高版本url中不允许带中文，所以至少需要手动编码一次，同样的，tomcat会对其解码一次，所以也有两种解决方式；
2.post请求
方式一：$.ajax{()}
$.ajax({
type : 'post' , // 请求方式，不声明该属性时，默认值是get请求
url : 'getParams' , // 请求地址
data : { // 请求数据，这个参数可以去掉，也就是只发送请求不携带数据
name : 'Marydon' ,
work : '程序员'
},
success : function(result){ // 请求成功
alert(result);
},
error : function(result){ // 请求失败，这个参数一般情况系不携带
alert(result);
}
});方式二：$.post()
$.post( 'getParams' , // 请求地址
{ // 请求数据
name : 111 ,
work : '程序员'
},
function(result) { // 请求成功
alert(result);
}); post请求不存在乱码问题。
3.总结
第一，通常情况下，用来表示值的数据有两种类型：string和number，如果是数值类型，则不需要使用双引号或者单引号；如果是字符串类型，必须使用单引号或者双引号括住，否则，它将代表的是一个变量而不是一个具体的数据类型，举例说明：
data : { name : 'Marydon'}，此时的Marydon是一个string类型的字符串；
data : { name : Marydon}，此时的Marydon是一个变量，必须在该代码出现前面已经声明了该变量，即var Marydon;，否则js运行时将会报错：找不到该变量；
data : { name : 111}，这个就比较简单了，我们一眼就能看出它是数值类型，但是数据在传输时，参数值均会被转换成字符串String来传输；后台在接收该参数时用String类型来接收。
第二，关于请求数据格式
data : { key : value}，key既可以不带引号，也可以带引号，单引号或者双引号也都可以，value也一样（value不带引号时，代表：变量或者数值）。
4.扩展用法
第一，跨域cookie传递
使用xhrFields属性可以解决跨域cookie传递问题：即能将客户端的cookie传递给服务器。
xhrFields:{withCredentials:true}；
当然，服务器端也需要做相应的设置才行，具体详见文章：java、ajax 跨域请求解决方案，第五部分
第二，使用ajax提交文件
方式一：使用原生的XMLHttpRequest对象进行提交
前端发送数据
< input type="file" id="file" onchange="upload('getParams')" style="display: none;"> < input type="button" value="上传" onclick='javascript:$("#file").click()'> function upload(url) {
// js 获取文件对象
var fileObj = document.getElementById( "file" ).files[0];
if ( null == fileObj) {
alert( "图像上传失败，请重试！" );
return ;
}
// 创建form表单
var formFile = new FormData();
// 加入文件对象
formFile.append( "file" , fileObj);
// 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// post方式，url为服务器请求地址，true 该参数规定请求是否异步处理。
xhr.open( "post" , url, true );
//请求完成
xhr.onload = function () {
// 将返回数据转换成JSON对象
var resData = JSON.parse( this .responseText);
document.getElementById( "file" ).value = "" ;
};
// 请求失败
xhr.onerror = null ;
// 上传进度调用方法（可实现上传进度条）
xhr.upload.onprogress = null ;
// //开始上传，发送form数据（以二进制数据传递给后台）
xhr.send(formFile);
}后台接收
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
InputStream is = request.getInputStream();
int i = 0 ;
while ((i = is.read()) != - 1 ) {
System.out.print(( char ) i);
}
}方式二：使用jQuery
2023年5月11日10:55:12
function uploadFile(fileObj) {
// 获取将要上传的文件对象
var file = fileObj || $('#file')[0].files[0];
// 创建form表单
var formData = new FormData();
// 设置表单内容
formData.append('uploadFile', file);
Dialog.showMsg("文件上传中请稍等...");
$.ajax({
url: baseUrl + '/base/log/fdfs/fileUpload.do',
type: "post",
processData: false,// 请求发送的数据是否转换为查询字符串
contentType: "multipart/form-data",// 默认是："application/x-www-form-urlencoded"
data: formData,
dataType: 'json',// 预期的服务器响应的数据类型
success: function(result) {
//保存头像地址
var url = result.fileData[0].filePath;
$(inp).val(url);
$(img).attr("src", url);
Dialog.showMsg("文件上传成功");
}
});
};方式二：$.ajaxFileUpload
准备工作：jQuery.js和ajaxfileupload.js
$.ajaxFileUpload({
fileElementId: fileId, //需要上传的文件域的ID，即的ID。
url: path, //后台方法的路径
type: 'post' , //当要提交自定义参数时，这个参数要设置成post
dataType: 'json' , //服务器返回的数据类型。可以为xml,script,json,html。如果不填写，jQuery会自动判断。
secureuri: false , //是否启用安全提交，默认为false。
async : true , //是否是异步
success: function (data) { //提交成功后自动执行的处理函数，参数data就是服务器返回的数据。
},
error: function (data, status, e) { //提交失败自动执行的处理函数。
console.error(e);
}
});原理：创建一个隐藏的表单和iframe然后用JS去提交，获得返回值
使用jQuery的好处在于：可以实现异步提交文件
方式四：FileReader+ajax
// 图片正则表达式
var rFilter = /^(?:image\/bmp|image\/cis\-cod|image\/gif|image\/ief|image\/jpeg|image\/jpeg|image\/jpeg|image\/pipeg|image\/png|image\/svg\+xml|image\/tiff|image\/x\-cmu\-raster|image\/x\-cmx|image\/x\-icon|image\/x\-portable\-anymap|image\/x\-portable\-bitmap|image\/x\-portable\-graymap|image\/x\-portable\-pixmap|image\/x\-rgb|image\/x\-xbitmap|image\/x\-xpixmap|image\/x\-xwindowdump)$/i;
// 文件校验
if (document.getElementById( "uploadImage" ).files.length === 0) {
alert( "请上传图像" );
return ;
}
// js 获取文件对象
var fileObj = document.getElementById( "uploadImage" ).files[0];
// 格式校验
if (!rFilter.test(fileObj.type)) {
alert( "必须是图片格式文件！" );
return ;
}
//判断是否支持FileReader
if (window.FileReader) {
// 创建文件读取对象
var reader = new FileReader();
} else {
alert( "您的设备不支持图片上传功能，如需该功能请升级您的设备或浏览器！" );
return ;
}
// 图片转base64（Blob对象或File对象）
reader.readAsDataURL(fileObj);
reader.onload = function (e) {
// 获取对应的base64
var imgBase64 = e.target.result;
// 将图片的base64码传给后台
// 调用腾讯接口
$.post(baseUrl + "/weixin/facein/upImg2.do" ,{imgBase64:imgBase64}, function (resData){
// TODO 对返回的接口数据进行自动填充处理
});
}; 注意：
这种方法仅限图片上传，也就是只适用于图片上传；
Internet Explorer 10 之前的版本并不支持FileReader()；
另外，window.FileReader更常用的方式是：图片预览，由于低版本IE浏览器不支持FileReader实现图片预览，但是却可以通过滤镜实现预览，具体见文末推荐。
2022年2月26日14:47:25
jQuery快速获取form表单数据：
$('form').serialize();通过序列化表单值，创建 URL 编码文本字符串。例如：FirstName=%E5%BC%A0%E4%B8%89&LastName=marydon
2023年4月21日15:31:12
原生AJAX请求代码封装
/**
* 使用XMLHttpRequest发送请求
*@explain 以form表单格式发送数据
以JSON格式接收数据
*@param type 请求方式
* 如：GET,POST
*@param url 请求路径
*@param data 将要发送的请求数据
*@return 返回响应数据（要求后端返回JSON格式数据）
*/
function sendRequest(type, url, data) { //post方法用于提交数据
var xmlobj; //定义XMLHttpRequest对象
if (window.ActiveXObject) { //如果当前浏览器支持Active Xobject，则创建ActiveXObject对象
try {
xmlobj = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlobj = new ActiveXObject("Microsoft.XMLHTTP");
} catch (E) {
xmlobj = false;
}
}
} else if (window.XMLHttpRequest) { //如果当前浏览器支持XMLHttpRequest，则创建XMLHttpRequest对象
xmlobj = new XMLHttpRequest();
}
if (!xmlobj) return;
//xmlobj.open("POST", location.protocol + "//mp.weixin.qq.com/mp/jsmonitor?", true);
xmlobj.open(type, url, true);
xmlobj.setRequestHeader("cache-control", "no-cache");
xmlobj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded; charset=UTF-8"); //设置请求头信息
xmlobj.setRequestHeader("X-Requested-With", "XMLHttpRequest");
xmlobj.send(data); //发送数据
return JSON.parse(xmlobj.responseText);
}
写在最后
哪位大佬如若发现文章存在纰漏之处或需要补充更多内容，欢迎留言！！！
相关推荐：
本文来自博客园，作者：Marydon，转载请注明原文链接：https://www.cnblogs.com/Marydon20170307/p/12612921.html
