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&param2=value2&...,所以,我们可以去掉data属性,直接在url后面拼接参数即可。例如:

var param = "name=Marydon&work=" + 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也一样。

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);
    }
}

  方式二:$.ajaxFileUpload

  准备工作:jQuery.js和ajaxfileupload.js

$.ajaxFileUpload({
                fileElementId: fileId,    //需要上传的文件域的ID,即<input type="file">的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实现图片预览,但是却可以通过滤镜实现预览,具体见文末推荐。

写在最后

  哪位大佬如若发现文章存在纰漏之处或需要补充更多内容,欢迎留言!!!

 相关推荐:

原文地址:https://www.cnblogs.com/Marydon20170307/p/12612921.html