1.application/x-www-form-urlencoded
序列化:encode
GET方式,会将表单中的数据(键值对)经过urlencode编码后追加到url中。
POST方式,会将表单中的数据经过urlencode编码后放在request body 中。
ajax 之POST请求,参数序列化
比如,我们在没有使用jquery的时候,没有$.post来让我们使用,那我们像下面这样直接发送:
var params1 = {
username: username,
passwrod: password
};
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = xhr.responseText;
data = JSON.prase(data);
console.log(data);
}
}
xhr.open("POST","/url",true);
xhr.setRequestHeader('Content-Type', 'multipart/x-www-form-urlencoded; charset=UTF-8');
xhr.send(params1);
这样发送,后台是接受不到数据的,,因为数据藏在Request的body中,而不是表单中,
所以我们前端就要对数据进行序列化,像jquery一样,$.params 一样对json序列化,这样后台就可以收到了
就像这样:
var params1 = {
username: username,
passwrod: password
};
function $params(obj) {
var str = [];
for (var p in obj) {
str.push(encodeURIComponent(p) + "=" + encodeURIComponent(obj[p]));
}
return str.join("&");
}
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
var data = xhr.responseText;
data = JSON.prase(data);
console.log(data);
}
}
xhr.open("POST","/url",true);
xhr.setRequestHeader('Content-Type', 'multipart/x-www-form-urlencoded; charset=UTF-8');
xhr.send($params(params1));
// post和get的区别
xmlhttp = new XMLHttpRequest();
//异步执行函数
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","target.php?tid=1",true);
xmlhttp.send();
//open里面函数值分别是“传值方式”、“目标网页”、“是否异步”,send中不用写任何东西
POST:
xmlhttp = new XMLHttpRequest();
//异步执行函数
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","target.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("user_id="+getCookie("user_id")+"&"+"user_pwd="+getCookie("user_pwd"));