Ajax发送Post请求
前言
今天在使用AJAX向服务器发送POST请求时,我按照网上很多人说的,把请求内容写入JSON,但服务端却不能正确地解析。
错误描述
var xhr = new XMLHttpRequest();
……
xhr.send(JSON.stringify({
“usr” : “zcc”,
“pwd” : “123456”
}));
服务端收到的内容为
array(1) { ["{"usr":"zcc","pwd":"123456"}"]=> string(0) "" }
JSON没有正确解析
最后发现是Content-Type的问题,默认为x-www-form-urlencoded,接收key1=val1&key2=val2…这种格式,若传入json可能不能正常解析。
AJAX发送POST请求
var url = "..." //要访问的url
var request = new XMLHttpRequest(); //实例化XMLHttpRequest
request.open("POST", url,true); //以异步的方式向url发送POST请求
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); //设置请求头
var msg = "usr=zcc&pwd=123456"; //请求的内容
request.send(msg); //发送请求
服务端收到的请求内容
array(2) { ["usr"]=> string(3) "zcc" ["pwd"]=> string(6) "123456" }
同步异步
同步:意为程序会等待当前函数或方法的返回值,引起阻塞的现象,只有收到结果才会继续执行下面的步骤。
异步:不会引起阻塞,当函数或方法得到返回值时,系统会通知程序进行处理。
XMLHttpRequest 对象如果要用于 AJAX 的话,其 open() 方法的 async 参数必须设置为 true。
通过 AJAX,JavaScript 无需等待服务器的响应,而是:
- 在等待服务器响应时执行其他脚本
- 当响应就绪后对响应进行处理
设置请求头
如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头
request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
有时不设置请求头,服务端收到的POST请求内容会为空。
POST请求内容
var msg = "usr=zcc&pwd=123456"; //请求的内容
$key和$value之间用’=‘表示键值对,’&'作为分隔符,区分键值对。