jQuery Ajax 请求失败，不知道为什么
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/13892529/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ajax request fails, can't see why
提问by holyredbeard
I've created an API that returns data in json, and now I'm creating an app to test the API by receive the data and use it on the page. However, my ajax code (se below) fails by some reason, and the error says just "error" (Error: error).
我已经创建了一个以 json 形式返回数据的 API，现在我正在创建一个应用程序，通过接收数据并在页面上使用它来测试 API。但是，我的 ajax 代码（如下所示）由于某种原因失败，并且错误仅显示“错误”（错误：错误）。
What can be wrong with the code?
代码有什么问题？
the code:
编码：
$.ajaxSetup ({
url: "http://localhost:8000/products", // <--- returns json
type: "GET",
headers:{
"Accept":"application/json",
"Content-type":"application/x-www-form-urlencoded"
}
})
$.ajax({
success: function(data){
console.log("You made it!");
},
error: function(xhr) {
console.log("Error: " + xhr.statusText);
}
}).done(function(data){
console.log(data);
})
This is the info I get in Chrome (Inspector -> Network):
这是我在 Chrome (Inspector -> Network) 中获得的信息：
Name:products localhost/, Method:GET, Status:(cancelled), Type:Pending, Initiator:jquery-latest.js:8434 Script, Size:13B 0B, Time:95ms 0.0 days
名称：products localhost/，方法：GET，状态：（已取消），类型：待定，发起者：jquery-latest.js:8434 脚本，大小：13B 0B，时间：95ms 0.0 days
回答by Tadeck
What is probably the problem
大概是什么问题
I think I know your problem here. Seemingly you are loading a page one some protocol+domain+port (eg. "http://localhost/"), but then invoke AJAX request to a different protocol, domain or port (in this case probably only port differs: "http://localhost:8000/products").
我想我知道你的问题在这里。似乎您正在加载某个协议+域+端口（例如“ http://localhost/”）的页面，但随后将 AJAX 请求调用到不同的协议、域或端口（在这种情况下可能只有端口不同：“ http://localhost:8000/products"）。
This way you are probably hitting Same Origin Policylimitation, which is security feature of your browser. In such cases browsers may indicate that specific request has been "cancelled" (because browser blocked it).
这样您可能会遇到同源策略限制，这是您浏览器的安全功能。在这种情况下，浏览器可能会指示特定请求已被“取消”（因为浏览器阻止了它）。
Solution
解决方案
There are multiple solutions to your problem:
您的问题有多种解决方案：
- (easiest) stick to the same protocol+domain+port for both original site and the endpoint requested by AJAX,
- (second easiest) build an end point on the server, so eg. "
http://localhost/products" will call "http://localhost:8000/products" in the background and will return its response (as a walkaround for SOP), - some more complex solutions like JSONP, CORS etc. (more here: https://stackoverflow.com/a/8467697/548696),
- （最简单的）对原始站点和 AJAX 请求的端点坚持相同的协议+域+端口，
- （第二个最简单的）在服务器上建立一个端点，例如。"
http://localhost/products" 将http://localhost:8000/products在后台调用 " " 并返回其响应（作为 SOP 的解决方案）， - 一些更复杂的解决方案，如 JSONP、CORS 等（更多在这里：https: //stackoverflow.com/a/8467697/548696），
回答by Pavel Hodek
$.ajax({
/* ajax options omitted */
error: function (xmlHttpRequest, textStatus, errorThrown) {
if(xmlHttpRequest.readyState == 0 || xmlHttpRequest.status == 0)
return; // it's not really an error
else
// Do normal error handling
});
回答by Sudhanshu Yadav
Try using just
尝试仅使用
$.ajax({
url: "http://localhost:8000/products",
dataType: 'json',
success: function(data){
console.log("You made it!");
},
error: function(xhr) {
console.log("Error: " + xhr.statusText);
}
});
Instead of using done callback , you can use code line inside success or complete callback. Its quite simple and cleaner.
您可以在成功或完成回调中使用代码行，而不是使用 done 回调。它非常简单和干净。
回答by Moiz
Why dont you try and merge the two ajax calls in one. and also try and change type = "POST"
为什么不尝试将两个 ajax 调用合二为一。并尝试改变type = "POST"
$.ajax({
type: "POST",
url: "http://localhost:8000/products",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(data){alert(data);},
error: function(errMsg) {
alert(errMsg);
}
});
回答by Jai
I think your browser cached the error, or may be there are problems in setting headers properly, so try adding this way over there in the $.ajaxsetup():
我认为您的浏览器缓存了错误，或者在正确设置标题时可能存在问题，所以尝试在那里添加这种方式$.ajaxsetup()：
$.ajaxSetup ({
url: "http://localhost:8000/products", // <--- returns json
type: "GET",
dataType: 'json',
cache: false,
contentType: "application/json"
});
try this way once and see if works.
尝试这种方式一次，看看是否有效。
