Question

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

在 jQuery 中，我有一个工作ajax调用：

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

Vanilla 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上，例如：

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

使用这些工具可以让您深入了解代码所发出的HTTP请求以及它在响应中获得的值。

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

Answer 3

您可以通过以下语法使用此simple and lightweight Ajax module：

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)} );

vanilla js vs jQuery ajax call

3 个答案: