香草js vs jQuery 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");

香草JS调用只需登录这个控制台：

"Success: [object Object]" 
Array [ ]

有人可以告诉我我做错了什么？

来源

2014-12-04 baao

你是ajax调用看起来很好。无论你的控制器在另一端发送什么都肯定是错误的。你应该打印出responseText文件，这样你就可以看到JSON.parse实际上是在解析什么 – 2014-12-04 14:42:58

r.responseText的值是什么？你在期待什么？ – 2014-12-04 14:51:34

你还没有告诉服务器你如何编码请求中的数据。

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

想必任何服务器端处理您所使用的处理数据没有被正确解析它，所以没有找到需要，然后返回一个空数组作为结果的数据。

来源

2014-12-04 14:42:54 Quentin

就是这样。非常感谢！ – baao 2014-12-04 14:49:57

除了向控制台输出r.responseText之外，还可以检查内置于浏览器本身的开发工具的HTTP响应。

在Firefox，比如：

工具 - > Web开发 - >网络（这应该打开一个面板列出了所有HTTP请求和响应）
去通过使用执行过程您的AJAX调用
看通过点击项目在步骤1中示出在面板中的列表中的相应的HTTP请求

（右侧面板应与有关请求和后续响应更多细节出现）

挖掘这些工具可以让你深入了解你的代码所做的HTTP请求以及返回响应的值。

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

来源

2014-12-04 14:53:42

香草js vs jQuery ajax调用

回答

相关问题