vanilla js vs jQuery ajax call

时间:2014-12-04 14:36:59

标签: javascript ajax

我想和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 [  ]

有人能告诉我我做错了吗?

3 个答案:

答案 0 :(得分:4)

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

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

据推测,用于处理数据的服务器端处理程序无法正确解析,因此无法找到所需的数据,然后返回一个空白数组。

答案 1 :(得分:0)

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

在Firefox上,例如:

  1. 工具 - > Web开发人员 - >网络 (这应该打开一个列出所有HTTP请求和响应的面板)
  2. 完成用于执行AJAX调用的过程
  3. 通过单击步骤1中显示的面板中列表中的项目来查看相应的HTTP请求(右侧的面板应显示有关请求和后续响应的更多详细信息)
  4. 使用这些工具可以让您深入了解代码所发出的HTTP请求以及它在响应中获得的值。

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

答案 2 :(得分:-1)

您可以通过以下语法使用此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)} );