如何使用 jQuery 从服务器检索 JSON 数据？
Posted
技术标签:
【中文标题】如何使用 jQuery 从服务器检索 JSON 数据？【英文标题】：How to retrieve JSON data from server using jQuery? 【发布时间】：2016-05-30 15:45:23 【问题描述】：我尝试了这个源的几种组合，但我是 jQuery 新手，我找不到我能理解的基本教程。
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
</head>
<body>
<script>
var sourceText = "car";
var transText = "";
$.getJSON("http://www.worldlingo.com/S000.1/api?wl_password=secret&wl_srclang=EN&wl_trglang=IT&wl_text=" + sourceText,
function(data)
alert("Data: " + data);
).error(function(jqXHR, textStatus, errorThrown)
console.log("ERR: %o" , jqXHR);
console.log("Result: %s" , jqXHR.responseText);
transText=jqXHR.responseText;
alert("Translation JSON data provided for '" + sourceText + "': '" + transText + "'");
)
</script>
</body>
</html>
我只想得到一个单词的翻译。
为什么我得到的翻译是错误而不是结果？
如果实际成功接收到数据，为什么执行永远不会到达警报（数据）？
编辑： 最终答案是：服务器没有提供 JSON 响应，因此上面的源工作正常，由于收到错误的 MIME 类型而触发错误。
【问题讨论】：
如果您看到浏览器控制台，您应该会看到一些错误，例如XMLHttpRequest cannot load http://www.worldlingo.com/S000.1/api?wl_password=secret&wl_srclang=EN&wl_trglang=IT&wl_text=car. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '....' is therefore not allowed access.
你问题的标题其实和你的问题无关。请解决这个问题。
@Arun P Johny ：我没有看到任何错误......这就是重点！确实，脚本成功地从服务器获取了结果！我还尝试注释掉“.error”部分：Chrome 控制台中仍然没有错误。
我在 FireFox 中收到此错误：跨源请求被阻止：同源策略不允许读取位于 worldlingo.com/S000.1/… 的远程资源。这可以通过将资源移动到同一个域或启用 CORS 来解决 所以我应该启用这个“CORS”......怎么样？！？为什么 chrome 不抱怨它并实际接收数据但触发错误，就像它没有一样？
解决方案：我使用的服务器没有提供 JSON 格式的数据！出于未知的原因（例如，我正在寻找提供 JSON 格式翻译的服务器......）我认为它确实做到了！
【参考方案1】：
看看我在 web 服务上的用途，它会返回你的 json 数据。
您的网络服务可能有错误，或者您在代码中做错了什么。
请检查您的服务器端是否有错误。
希望对你有帮助
var sourceText = "car";
var transText = "";
$.getJSON("http://jsonplaceholder.typicode.com/posts/1",
function(data)
alert("Data: " + data);
).error(function(jqXHR, textStatus, errorThrown)
console.log("ERR: %o", jqXHR);
console.log("Result: %s", jqXHR.responseText);
transText = jqXHR.responseText;
alert("Translation JSON data provided for '" + sourceText + "': '" + transText + "'");
)<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>【讨论】：
【参考方案2】：把你的代码放在try catch之间，可能会抛出一些错误。
try
/* YOUR CODE */
catch(error)
console.log(error.message);
【讨论】：
【参考方案3】：我使用的服务器实际上并不是以 JSON 格式提供结果，而是以纯文本格式提供结果，因此不需要 $.getJSON()。
此外，要使用的正确 URL 是： http://www.worldlingo.com/S000.1/api?wl_password=secret&wl_srclang=EN&wl_trglang=IT&wl_text=WORD_TO_TRANSLATE&wl_errorstyle=1
最后一个参数将阻止服务器在结果中提供“错误代码”，成功请求为 0，而是写入 HTML 标头。
我的最终来源是：
<!DOCTYPE html>
<html>
<head>
<script src="jquery.js"></script>
<script>
function myCall()
// Status text:
document.getElementById('progress').innerText="Please wait...";
// URL of your favourite online translation API (Google is no more free):
var URL= "http://www.worldlingo.com/S000.1/api?wl_errorstyle=1&wl_password=secret&wl_srclang=EN&wl_trglang=IT&wl_text=";
// Read text to translate:
sourceText = document.getElementById('source').value;
// Call translator
var jqxhr = $.get(URL + sourceText, function()
document.getElementById('result').innerText=jqxhr.responseText;
document.getElementById('progress').innerText="Done.";
)
.done(function()
// alert( "Finished." );
)
.fail(function(a,b,c)
alert( "An error occurred while contacting server '" + URL + "': '" + c + "'");
);
</script>
</head>
<body>
<textarea id="source">Write your word here</textarea><br>
<textarea id="result">Translation will appear here</textarea><br>
<input type="submit" value="translate" onclick="javascript:myCall()"><span id="progress">-</span><br>
</body>
</html>
【讨论】：
以上是关于如何使用 jQuery 从服务器检索 JSON 数据？的主要内容，如果未能解决你的问题，请参考以下文章
将多个 JSON 文件合二为一；使用 jQuery/getJSON() 检索
从通过 jQuery/jQueryMobile 中的 AJAX 调用检索到的 JSON 数据正确设置变量
dataType json 的 jQuery $.ajax 请求不会从 PHP 脚本中检索数据
Jquery从具有数组/ JSON值的多个数据属性中检索数据