如何在ajax中设置contentType,contentType常见的几种情况

灰太狼 2023-01-11 01:22 606阅读 0赞

最近在开发中遇到ajax提交参数，后台无法获取到参数的问题,先整理下ajax的几种常见属性

**1 .contentType常见的几种情况**  
`application/json; charset=utf-8` 要求data必须是json串

"text/html"  对于html
    "text/xml " 对于xml

`application/x-www-form-urlencoded` (默认值)  
使用contentType时候要求data数据相对应,contentType同时里面可以设置数据的编码方式  
**2. ajax提交数据时,data传参的几种方式**  
1 设置为类似于 `name=zs&sex=1`  
2 设置为json对象 `{key:value,key:value}` 的格式 这个格式的数据`$.ajax()`内部会调用`$.param()`方法拼接为上面格式的数据  
*上面两种都不用设置contentType ,使用默认的就行，不管是post 还是get方式*  
serializeArray()可以获取json对象，在调用$.param()方法可以转为序列化的字符串  
**3.提交方式get提交和post提交**  
post提交:

$.ajax({
    		type:'post',
    		url: '/erongDemo/bankServlet',
    		data:{"name":$("#sname").val(),"sex":$("#sex").val()},
    		contentType:'application/json;charset=utf-8',
    		dataType:'json',
    		success:function(data){
    			
    		}
    	});

post 提交，设置contentType为application/json，数据也是json对象，在servlet中无法获取到值，在浏览器上看了下，  
数据已经被序列化了，可是request无法获取到值，最后解决方案是改为contentType为默认值,

![在这里插入图片描述][20210125172825606.png]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDYyNjk4_size_16_color_FFFFFF_t_70]  
get提交:

$.ajax({
    		type:'get',
    		url: '/erongDemo/bankServlet',
    		data:{"name":$("#sname").val(),"sex":$("#sex").val()},
    		contentType:'application/json',
    		dataType:'json',
    		success:function(data){
    		}
    	});

这次使用get提交，contentType同样设置为application/json，看下浏览器,头信息里面并没有contentType这个属性，  
应该是get提交参数是不放在请求实体中，是拼接在url后面.

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDYyNjk4_size_16_color_FFFFFF_t_70 1]  
这次提交数据将contentType去掉，同样请求头中没有这个属性，可以不设置contentType

结论: ajax post提交不设置contentType 使用默认值 application/x-www-form-urlencoded适用于提交data为json对象的情况

而get提交不用设置contentType

[借鉴][Link 1]

[20210125172825606.png]: /images/20221119/99809f5f360a4e8e9ac44d62081cb13c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDYyNjk4_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20210125172848352.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDYyNjk4,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDYyNjk4_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20210125172931783.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM0NDYyNjk4,size_16,color_FFFFFF,t_70
[Link 1]: https://blog.csdn.net/Ditto_zhou/article/details/73198886