HTTP请求参数的编码和平化解码

在MVC调控器(这里是TestController)下有1个CreateOrder的Action方法

Jquery Ajax 提交json数据,jqueryjson

在MVC调节器(这里是TestController)下有叁个CreateOrder的Action方法

[HttpPost]
public ActionResult CreateOrder(List<Person> model)
{
    return View();
}

其中Person类如下:

public class Person
{
    public string Name { get; set; }

    public string IDCard { get; set; }
}

这里就像购买高铁票的1个情景,购买票的时候供给提供具备乘车人的音信(姓名、身份证编号)

前台湾电视中心图的代码如下:

皇家赌场手机版 1

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>CreateOrder</title>
</head>
<body>
    <input type="button" value="提交订单" id="btnSubmit" />
    @Scripts.Render("~/bundles/jquery")
    <script type="text/javascript">
        var persons = [{ Name: "张三", IDCard:"44111111"},{Name:"姣婆莲",IDCard:"33222222"}];
        $(function () {
            $("#btnSubmit").click(function () {
                $.ajax({
                    url: '@Url.Action("CreateOrder","Test")',
                    type: 'POST',
                    data: persons,
                    success: function (responseText) {

                    }
                });
            });
        });
    </script>
</body>
</html>

View Code

点击开关时发起Ajax请求,提交json数据,json数据包括了两位游客音讯(这里只是演示数据的提交,不研究身份证号码的合法性)

当点击按键时,在开拓职职员和工人具中看看发起了Ajax请求,可是表单数据不是json数据

皇家赌场手机版 2

 

 

而在调节和测试中也能够监视到参数model是null

皇家赌场手机版 3

 

从开拓职职员和工人具中得以见见,请求头是Content-Type:application/x-www-form-urlencoded;
charset=UTF-捌 ,而实际应该是Content-Type:application/json; charset=UTF-8

于是对视图作修改:

皇家赌场手机版 4

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>CreateOrder</title>
</head>
<body>
    <input type="button" value="提交订单" id="btnSubmit" />
    @Scripts.Render("~/bundles/jquery")
    <script type="text/javascript">
        var persons = [{ Name: "张三", IDCard:"44111111"},{Name:"姣婆莲",IDCard:"33222222"}];
        $(function () {
            $("#btnSubmit").click(function () {
                $.ajax({
                    url: '@Url.Action("CreateOrder","Test")',
                    type: 'POST',
                    data:JSON.stringify(persons),
                    contentType:"application/json;charset=utf-8",
                    success: function (responseText) {

                    }
                });
            });
        });
    </script>
</body>
</html>

View Code

修改视图后,刷新页面,点击按键再一次发起呼吁

皇家赌场手机版 5

 

皇家赌场手机版 6

 

皇家赌场手机版 7

成功。

留意:jquery
ajax请求中设置了contentType之后,要求将参数data设置为json字符串,使用JSON.stringify()
,不然提交时会提醒如下:

皇家赌场手机版 8

 

Ajax 提交json数据,jqueryjson
在MVC调节器(这里是TestController)下有2个CreateOrder的Action方法
[HttpPost] public ActionResult CreateOrder(ListPerson model…

HTTP请求参数的编码和平化解码。采纳浏览器,查看页面,点击开关提交音信,实际上是贰回次http请求。浏览器在发送那几个请求时,是要求对请求参数中的特殊字符做编码的,服务端须要对参数解码,技术清楚参数的原有内容,再实行拍卖。不相同的风貌,编码格局是存在出入的。

[HttpPost]
public ActionResult CreateOrder(List<Person> model)
{
    return View();
}

GET请求

皇家赌场手机版,get请求的参数会在U奥迪Q3L的中,在“?”的末尾。一般的话,UCR-VL只可以使用英文字母、阿拉伯数字和某个标点符号,不能够动用其它文字和符号。比方,世界上有英文字母的网站
http://www.abc.com,不过从未中文网址
http://www.笔者是网址.com。

那是因为互连网正式LX570FC 173八做了硬性规定:

“唯有字母和数字[0-9a-zA-Z]、一些特殊符号”-_.!*'()+”[不包涵双引号],和保留字(&,?之类的)才方可不经过编码直接用来USportageL。”

其一编码是由HTTP请求参数的编码和平化解码。浏览器姣好的,编码格局叫做“U中华VL编码”

其中Person类如下:

气象:点击链接

小心参数name含有空格

<a href="/?name=前  ++端">前端</a>

抓包拿走:

GET /?name=%E5%89%8D%20%20++%E7%AB%AF HTTP/1.1

浏览器html文件中head标签中的页面编码方式 utf-8

<meta content="text/html; charset=utf-8" http-equiv="content-type">

把汉语的“前端” 用 utf-8字符集的十陆进制 “E589八D”(前),
“E7ABAF”(端),然后用”%“分割,空格转化成了“%20”

public class Person
{
    public string Name { get; set; }

    public string IDCard { get; set; }
}

情景:form表单提交,method默感到“get”,enctype编码格局私下认可为“application/x-www-form-urlencoded”

“application/x-www-form-urlencoded”,特殊字符编码格局和“点击链接”场景是同一的,唯一的界别是空格会转化为“+”,内容中的
“+”url编码为“%2B”

例如:

value值为“前 ++端”含有空格和+

        <h2>get</h2>
        <form action="/">
            <label>name</label><input name="name" value="前  ++端"/>
            <input type="submit" id="submit" value="提交"/>
        </form>

点击提交表单,抓包得到:

GET /?name=%E5%89%8D++%2B%2B%E7%AB%AF HTTP/1.1

这里仿佛购买火车票的二个风貌,购买票的时候供给提供具备乘车人的音信(姓名、身份证编号)

ajax异步提交

let xhr = new XMLHttpRequest()
xhr.open('get', '/?name=前  ++端', true)
xhr.send()

抓包拿走:

GET /?name=%E5%89%8D%20%20++%E7%AB%AF HTTP/1.1

编码的结果和点击链接场景是平等的。

前台湾电视机中心图的代码如下:

结论:除了form表单的get方式交给的编码格局区别等,其余的都无差距。

皇家赌场手机版 9皇家赌场手机版 10

POST请求

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>CreateOrder</title>
</head>
<body>
    <input type="button" value="提交订单" id="btnSubmit" />
    @Scripts.Render("~/bundles/jquery")
    <script type="text/javascript">
        var persons = [{ Name: "张三", IDCard:"44111111"},{Name:"姣婆莲",IDCard:"33222222"}];
        $(function () {
            $("#btnSubmit").click(function () {
                $.ajax({
                    url: '@Url.Action("CreateOrder","Test")',
                    type: 'POST',
                    data: persons,
                    success: function (responseText) {

                    }
                });
            });
        });
    </script>
</body>
</html>

form表单提交

View
Code

非文件表单项提交

默认的enctype=”application/x-www-form-urlencoded”

        <h2>post</h2>
        <form action="/post" method="post">
            <label>name</label><input name="name" value="前  ++端"/>
            <input type="submit" id="submit" value="提交"/>
        </form>

点击提交后,抓包拿走:

POST /post HTTP/1.1
Host: localhost:3001
Content-Length: 31
Pragma: no-cache
Cache-Control: no-cache
Origin: http://localhost:3001
Upgrade-Insecure-Requests: 1
**Content-Type: application/x-www-form-urlencoded**
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8
DNT: 1
Accept-Encoding: gzip, deflate, br

**name=%E5%89%8D++%2B%2B%E7%AB%AF**

post请求传输的参数在请求体中,编码成了
“name=%E5%89%八D++%二B%贰B%E7%AB%AF”,表达使用enctype=”application/x-www-form-urlencoded”情势
编码,get和post的结果是1律的。

其它post提交须求关心“Content-Type”那几个请求头,这么些请求头告诉服务端,小编请求体内容和编码格式。

点击按键时发起Ajax请求,提交json数据,json数据包罗了两位旅客新闻(这里只是演示数据的交由,不钻探身份证号码的合法性)

文件上传

文本上传必须选取enctype=”multipart/form-data”,表示请求体内容不做U奇骏L编码,原作传输

        <h2>file</h2>
        <form action="/post" id="fileupload" method="post" enctype="multipart/form-data">
            <label>name</label><input name="name" value="前  ++端"/>
            <label>file</label><input type="file" name="file"/>
            <input type="submit" id="submit" value="提交"/>
        </form>

点击提交按键后,抓包拿走:

皇家赌场手机版 11

alt

注意:Content-Type为: multipart/form-data;
boundary=—-WebKitFormBoundaryIAobIVW9hww2sV7i
代表编码是multipart/form-data,而且每3个表单项使用“—-WebKitFormBoundaryIAobIVW九hww2sV7i”作为分割线。
然后name的值“前 ++端”,也未有做编码处理。

当点击按键时,在开发职职员和工人具中看出发起了Ajax请求,不过表单数据不是json数据

ajax异步提交

皇家赌场手机版 12

原生ajax

xhr.open('post', '/post', true)
xhr.send(JSON.stringify({name:'前  ++端'}))

抓包得到:

POST /post HTTP/1.1
Host: localhost:3001
Content-Length: 21
Pragma: no-cache
Cache-Control: no-cache
Origin: http://localhost:3001
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36
Content-Type: text/plain;charset=UTF-8
Accept: */*
DNT: 1

{"name":"前  ++端"}

ajax原生post请求,浏览器对请求体不做任何编码管理,Content-Type:
text/plain;charset=UTF-八

 

Jquery

$.ajax({
    url: '/post',
    method: 'post',
    data: {
        name: '前  ++端',
    }
})

jquery对于ajax的伸手内容的拍卖,暗中同意的编码方式application/x-www-form-urlencoded;

POST /post HTTP/1.1
Host: localhost:3001
Content-Length: 31
Pragma: no-cache
Cache-Control: no-cache
Accept: */*
Origin: http://localhost:3001
X-Requested-With: XMLHttpRequest
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
DNT: 1

name=%E5%89%8D++%2B%2B%E7%AB%AF

因为jquery暗中认可是application/x-www-form-urlencoded,然则对于使用formdata做图片上传的话,他不可能自动识别出formdata,要求利用enctype=”multipart/form-data”,只好手动调节参数processData,contentType来消除这些难点:

let formdata = new FormData(document.querySelector("form"));
$.ajax({
  url: "/post",
  type: "post",
  data: formdata,
  processData: false,  // 不处理数据
  contentType: false   // 不设置内容类型
});

 

axios

axios是近年在前者圈内相近使用的ajax框架,功效强悍,能够自动google找出。

axios.post('/post', {
    name: '前  ++端',
})

得到:

POST /post HTTP/1.1
Host: localhost:3001
Content-Length: 21
Pragma: no-cache
Cache-Control: no-cache
Accept: application/json, text/plain, */*
Origin: http://localhost:3001
User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_13_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/64.0.3282.186 Safari/537.36
Content-Type: application/json;charset=UTF-8
DNT: 1

{"name":"前  ++端"}

axios暗许编码方式是将请求体内容json stringfy,然后设置Content-Type:
application/json;charset=UTF-8

在联调是,会现经典多服务端不支持json格式的数码的管理,只协助守旧的application/x-www-form-urlencoded,和古板的表单提交同样的格式

此刻就须要运用QS框架了

import qs from 'qs'

axios.post('/post', qs.stringify({
    name: '前  ++端'
}))

那般能够提交application/x-www-form-urlencoded编码的数目。

axios能够智能推断必要付出的多寡,如若是formdata,会自动切换来接纳multipart/form-data编码

let formdata = new FormData(document.querySelector("form"));
axios.post('/post', formdata) //不要做任何处理,这个很赞!!

而在调整中也能够监视到参数model是null

服务端解码

脚下接纳nodejs框架koa和koa-body中间件做post请求参数的解码,其余语言框架的拍卖思维也是一样的。

皇家赌场手机版 13

GET请求

decodeURIComponent(str.replace(/\+/g, ' '));

将选拔form表单get请求,使用‘application/x-www-form-urlencoded’编码后的’+’,转化成空格,再U汉兰达L解码

so easy!!!

 

POST请求

皇家赌场手机版 14

alt

ctx.is 是做剖断,进入差异的拍卖逻辑,ctx.js是什么?

var value = req.headers['content-type’]
return typeis(value, types)

ctx.js是服务端取请求头中content-type,做项目判定。

因而1旦 content-type 和
请求体内容科学的顺序对应,那么服务端就能够科学的解码出浏览器传输过来的剧情

json字符串:Content-Type: application/json;charset=UTF-8

皇家赌场手机版 15

alt

表单提交,U奇骏L编码:Content-Type: application/x-www-form-urlencoded;
charset=UTF-八

皇家赌场手机版 16

alt

文本上传:Content-Type为: multipart/form-data;
boundary=—-WebKitFormBoundaryIAobIVW玖hww二sV七i

皇家赌场手机版 17

alt

从开荒人士工具中得以看来,请求头是Content-Type:application/x-www-form-urlencoded;
charset=UTF-捌 ,而实际应该是Content-Type:application/json;
charset=UTF-八

于是对视图作修改:

皇家赌场手机版 18皇家赌场手机版 19

@{
    Layout = null;
}
<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width" />
    <title>CreateOrder</title>
</head>
<body>
    <input type="button" value="提交订单" id="btnSubmit" />
    @Scripts.Render("~/bundles/jquery")
    <script type="text/javascript">
        var persons = [{ Name: "张三", IDCard:"44111111"},{Name:"姣婆莲",IDCard:"33222222"}];
        $(function () {
            $("#btnSubmit").click(function () {
                $.ajax({
                    url: '@Url.Action("CreateOrder","Test")',
                    type: 'POST',
                    data:JSON.stringify(persons),
                    contentType:"application/json;charset=utf-8",
                    success: function (responseText) {

                    }
                });
            });
        });
    </script>
</body>
</html>

View
Code

修改视图后,刷新页面,点击按键再次发起呼吁

皇家赌场手机版 20

 

皇家赌场手机版 21

 

皇家赌场手机版 22

成功。

专注:jquery
ajax请求中设置了contentType之后,供给将参数data设置为json字符串,使用JSON.stringify()
,不然提交时会提醒如下:

皇家赌场手机版 23

 

Leave a Comment.