vanilla js vs jQuery ajax call

问题描述 投票:0回答:3

我想用香草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 [  ]

有人可以告诉我我在做什么错吗?

javascript ajax
3个回答
4
投票

您尚未告诉服务器如何在请求中编码数据。

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

大概您用于处理数据的任何服务器端处理程序都无法正确解析数据,因此无法找到所需的数据,然后返回一个空白数组作为结果。


0
投票

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

例如,在Firefox上:

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

在这些工具中进行挖掘可以使您深入了解代码正在发出的HTTP请求以及响应中返回的值。

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


-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)} );
© www.soinside.com 2019 - 2024. All rights reserved.