Ajax请求中Content-Type的几种类型

HTTP 协议是以 ASCII 码传输,建立在 TCP/IP 协议之上的应用层规范。规范把 HTTP 请求分为三个部分:状态行、请求头、消息主体。协议规定 POST 提交的数据必须放在消息主体(entity-body)中,但协议并没有规定数据必须使用什么编码方式。实际上,开发者完全可以自己决定消息主体的格式,只要最后发送的 HTTP 请求满足上面的格式就可以。

1. 表单格式

form的enctype属性可以用于指定编码方式,常用有两种表单编码方式(即contentType的两种取值):

  • application/x-www-form-urlencoded

    默认为application/x-www-form-urlencoded。 当action为get时候,浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串(name1=value1&name2=value2…),然后把这个字串append到url后面,用?分割,加载这个新的url。 当action为post时候,浏览器把form数据封装到http body中,然后发送到server。

    • Request Header

      在这里插入图片描述

    • 传输的参数:在这里插入图片描述

    • 点击view source 显示源码后:在这里插入图片描述

  • multipart/form-data

    如果没有type=file的控件,用默认的application/x-www-form-urlencoded就可以了。 但是如果有type=file的话,就要用到multipart/form-data了。浏览器会把整个表单以控件为单位分割,并为每个部分加上Content-Disposition(form-data或者file),Content-Type(默认为text/plain),name(控件name)等信息,并加上分割符(boundary).

    multipart/form-data会随机生成一个分界符,用这个分解符来分隔参数。其目的是防止上传文件中出现分界符导致服务器无法正确识别文件起始位置。

    如果使用application/x-www-form-urlencoded或者multipart/form-data格式提交文件,浏览器控制台会报错:Illegal invocation

    在这里插入图片描述

    遇到此情况可以参考Illegal invocation
    将ajax添加如下设置:

    	contentType: false,
    	// 告诉jQuery不要去设置Content-Type请求头
    	processData: false,
    	// 告诉jQuery不要去处理发送的数据
    

    contentType

    如果为true的时候,jq就会去操作multipart/form-data生成的分界符,导致后台服务器无法操作数据而请求失败。

    processData

    默认为true,规定通过请求发送的数据是否转换为查询字符串,默认情况下,通过data选项传递进来的数据,如果是一个对象(技术上讲只要不是字符串),都会处理转化成一个查询字符串,以配合默认内容类型"application/x-www-form-urlencoded"。如果要发送 DOM 树信息或其它不希望转换的信息,请设置为 false。

2. JSON格式

参数contentType为: application/json

请求头信息及请求参数:

在这里插入图片描述

将数据以json数据传输到后端。后端不能通过简单地request.getParameter(key);来获取参数,而是需要通过req.getInputStream()在输入流中获取。具体可以看之后的代码实现动态获取参数部分:获取前端传输的json数据,以json返回

JavaWeb的doPut、doDelete方法只支持接收JSON数据,建议除GET外的所有方式的数据都统一以JSON传输

在使用ajax传输json数据时,需要使用 JSON.stringify函数,将参数转化为json数据

$.ajax({
    type: "PUT",
    url: "/student",          
    dataType: 'json',
    contentType: 'application/json;charset=UTF-8',
    data: JSON.stringify({
        id: 1,
        name: "小明",
        score: 98
    }),
    error: function(request) {
       layer.alert('修改学生信息失败');
    },
    success: function(result) {
       layer.msg('修改学生信息成功');
    }
});
3. text/xml

XML的特点:

  1. 必须要有一个根
  2. 标签名自定义
  3. 对大小写敏感
  4. 有开始就要有结束
  5. 同一级别下只能有一个标签名
<nation>
<n1>
<code>n001</code>
<name>汉族</name>
</n1>
<n2>
<code>n002</code>
<name>回族</name>
</n2>
</nation>

参考:

Ajax请求中Content-Type的几种类型

application/x-www-form-urlencoded与application/json

Illegal invocation

  • 6
    点赞
  • 28
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值