jQuery ajax读取本地json文件

Posted 明叶师兄。

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了jQuery ajax读取本地json文件相关的知识，希望对你有一定的参考价值。

jQuery ajax读取本地json文件

  • ceshi.json

      {
  	"first": [
  		{
  			"name": "张三",
  			"sex": "男"
  		}, {
  			"name": "李思",
  			"sex": "女"
  		}, {
  			"name": "王五",
  			"sex": "男"
  		}, {
  			"name": "赵柳",
  			"sex": "女"
  		}
  			]
  }

  • 源码：

      <!DOCTYPE html>
  <html>

  <head>
  <meta charset="UTF-8">
  <script type="text/javascript" src="js/jquery.js"></script>

  <script>
  	//方法一
  	function ajax_test() {
  		$.ajax({
  			url: "ceshi.json", //json文件位置
  			type: "GET", //请求方式为get
  			dataType: "json", //返回数据格式为json
  			success: function(data) { //请求成功完成后要执行的方法 
  				alert(data.first[0].name);
  				//each循环 使用$.each方法遍历返回的数据date
  				$.each(data.first, function(i, item) {
  					var str = \'<div>姓名:\' + item.name + \'性别：\' + item.sex + \'</div>\';
  					document.write(str);
  				})
  			}
  		})
  	}
  	ajax_test(); //执行函数

  	//方法二:
  	//jQuery.getJSON()是jQuery.ajax()函数的简写形式.
  	// jQuery.getJSON( url [, data ] [, success ] )
  	$.getJSON("ceshi.json", "", function(data) {　 //each循环 使用$.each方法遍历返回的数据date
  		$.each(data.first, function(i, item) {
  			var str = \'<br/><div>姓名:\' + item.name + \'性别：\' + item.sex + \'</div>\';
  			document.write(str);
  		})
  	});
  	</script>

  	<title>ajax获取json测试</title>
  	</head>
  	测试
  	<body>
  	</body>

  	</html>

  • 效果

以上是关于jQuery ajax读取本地json文件的主要内容，如果未能解决你的问题，请参考以下文章

js 读取 json文件

php，JavaScript 如何读取并修改json文件?

jQuery中读取本地json文件

jquery+ajax怎样读取json文件的内容？

在 jQuery $.ajax 中读取 Laravel JSON 响应

JQuery ajax