vanilla js vs jQuery ajax 调用

Question

我想用 vanilla js 做一个 ajax 调用。

在jQuery 中，我有这个有效的 ajax 调用：

$.ajax({
    url:"/faq/ajax",
    datatype: 'json',
    type:"POST",
    data: {search:'banana'},
    success:function(r) {
    console.log(r['name'])
    }
});

香草JS：

var search = document.getElementById('searchbarfaq').value;
var r = new XMLHttpRequest();
r.open("POST", "/faq/ajax", true);
r.onreadystatechange = function () {
  if (r.readyState != 4 || r.status != 200) return;
  console.log("Success: " + JSON.parse(r.responseText));
  var a = JSON.parse(r.responseText);
  console.log(a.name); //also tried a['name']...
};
r.send("search=banana");

vanilla js 调用只是将其记录到控制台：

"Success: [object Object]" 
Array [  ]

有人能告诉我我做错了什么吗？

Answer 1

您还没有告诉服务器您如何对请求中的数据进行编码。

r.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

大概你用来处理数据的任何服务器端处理程序都没有正确解析它，所以没有找到它需要的数据，然后返回一个空白数组作为结果。

Answer 2

除了将r.responseText打印到控制台之外，您还可以检查来自内置于浏览器本身的开发工具的 HTTP 响应。

例如在 Firefox 上：

1. 工具 -> Web 开发人员 -> 网络（这将打开一个列出所有 HTTP 请求和响应的面板）
2. 完成用于执行 AJAX 调用的过程
3. 通过单击步骤 1 中显示的面板中列表中的项目查看相应的 HTTP 请求（右侧的面板应显示有关请求和后续响应的更多详细信息）

深入研究这些工具可以让您深入了解代码发出的 HTTP 请求以及它在响应中返回的值。

可以为所有主要浏览器执行类似的过程。

Answer 3

您可以使用以下语法使用这个简单且轻量级的 Ajax 模块：

import {ajax} from '/path/to/ajax.min.js';

ajax('https://api_url.com')
.data('key-1','Value-1')
.data('key-2','Value-2')
.send()
.then((data) => { console.log ('success', data) })
.catch((status) => { console.log ('failed', status)} );