将 json 与 jquery Ajax 一起使用不会返回任何内容
Posted
技术标签:
【中文标题】将 json 与 jquery Ajax 一起使用不会返回任何内容【英文标题】：Using json with jquery Ajax doens't return anything 【发布时间】：2017-05-10 08:04:36 【问题描述】：我想学习如何将 JSON 与 jQuery 一起使用，因此我遵循了一个简单的视频教程。但是，在完成所有步骤并使用与视频中完全相同的代码后，在 console.log 之后我仍然看不到控制台中的任何内容。我做错了什么？
这是 html 页面：
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$.ajax(
url: 'articles.json',
dataType: 'json',
type: 'get',
cache: false,
succes: function(data)
$(data.articles).each(function(index, value)
console.log("success");
);
);
</script>
</body>
</html>
这是我尝试使用数据的 JSON 文件 (articles.json)：
"articles": [
"id": 1,
"name": "Article 1"
,
"id": 2,
"name": "Article 2"
,
"id": 3,
"name": "Article 3"
]
提前致谢！
【问题讨论】：
您拼写错误success。请参阅文档api.jquery.com/jQuery.ajax
你是在同一路径下创建html文件和json文件，然后通过浏览器打开页面吗？这是因为 XMLHttpRequest 无法通过文件位置加载文件。我建议您将这两个文件放在某个 web 项目下并通过 HTTP 访问它们。例如 localhost:8080/youAPP/page.html
@charlietfl 对不起，我的母语是这样写的 :)
属性名必须正确。可以在日志语句中拼错任何你想要的，这与问题无关
@charlietfl 哦，谢谢，我以为你在说 console.log("success"); ，但它并没有解决我的问题：/
【参考方案1】：
这是使用 jquery 在 javascript 中读取 json 数据的正确方法
<script>
$.ajax(
url: 'articles.json',
dataType: 'json',
type: 'get',
cache: false,
succes: function(data)
var jsonData = JSON.parse(data);
$.each(jsonData.articles, function(i, v)
console.log("id = "+ v.id);
console.log("name = " + v.name);
);
);
</script>【讨论】：
【参考方案2】：使用 $.getJSON
例子
$.getJSON( "articles.json", function( data )
$.each( data.articles, function( key, val )
console.log(val);
);
);http://api.jquery.com/jquery.getjson/
【讨论】：
虽然这是一个不同的解决方案，但它并不能解决 OP 拼错成功的问题。以上是关于将 json 与 jquery Ajax 一起使用不会返回任何内容的主要内容，如果未能解决你的问题，请参考以下文章
将 jquery 与 django rest api 放在一起
有没有办法将 json 文件与所有其他 js 文件一起加载？ [复制]