• 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实现图片预览,但是却可以通过滤镜实现预览,具体见文末推荐。

    写在最后

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

     相关推荐:

  • 相关阅读:
    福大软工 · 第八次作业(课堂实战)- 项目UML设计(团队)
    福大软工1816 · 第六次作业
    福大软工1816 · 第五次作业
    福大软工1816
    福大软工1816 · 第三次作业
    alpha冲刺总结随笔
    alpha-咸鱼冲刺day8
    alpha-咸鱼冲刺day9
    alpha-咸鱼冲刺day7
    alpha-咸鱼冲刺day5
  • 原文地址:https://www.cnblogs.com/Marydon20170307/p/12612921.html
Copyright © 2020-2023  润新知