香草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調用

回答

相關問題