Js Ajax相同语法执行不同

Question

下面三段js的ajax代码，都是传入username和password访问路径来获取请求，为什么只有第一段代码能正确获取到数据，但是第二段和第三段代码能访问到路径，但是返回的数据显示missing username
/** 能正确获取数据的代码 */
var settings = {
"url": "http://xxxxxxx/get_data.php?action=projectdata&project=test",
"method":"POST",
"headers":{
"Content-Type":"text/plain"
},
"data":"{\"username\":\"xxxxx\",\"password\":\"xxxxx\"}"
}
$.ajax(settings).done(function (response) {
console.log(response);
})

    /** 代码2 **/
    $.ajax({
    url:"http://xxxxxxx/get_data.php?action=projectdata&project=test",
    type:"POST",

    data: {
    "username": "xxxxxx",
    "password": "xxxxxx"
},
    dataType:'json',
    success: function (data) {
        console.log(data);
    },
    error: function (err) {
        console.log(err);
    }

});

    /** 代码块 3 **/
    var xhr = new XMLHttpRequest();
xhr.open("post","http://xxxxxxx/get_data.php?action=projectdata&project=test");
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")
var sender = "{\"username\":\"xxxxx\",\"password\":\"******\"}";
//var sender = {"username":"xxxxx","password":"xxxxx"};
xhr.send(sender);
xhr.onreadystatechange = function () {
    // 这步为判断服务器是否正确响应
    if (xhr.readyState == 4 && xhr.status == 200) {
        console.log(xhr.responseText);
    }
};

    这三段代码有什么区别吗

Answer 1

第一个Content-Type为 text/plain ：纯文本格式

第二个Content-Type为 text/html ： HTML格式
第三个Content-Type为application/x-www-form-urlencoded ：

中默认的encType，form表单数据被编码为key/value格式发送到服务器（表单默认的提交数据的格式）