通过jquery的ajax请求本地的json文件方法

来源：懂视网责编：小采时间：2020-11-27 22:10:25

通过jquery的ajax请求本地的json文件方法

通过jquery的ajax请求本地的json文件方法:自己学习jquery的ajax的经历，记录一下 ajaxTestDemo.html 在body里面放一个id为test的div <div id=test></div> 第一步还是要先加载jquery文件 jquery.min.js <script> $(function(){ $.

推荐度：

点击下载本文 文档为doc格式

导读通过jquery的ajax请求本地的json文件方法:自己学习jquery的ajax的经历，记录一下 ajaxTestDemo.html 在body里面放一个id为test的div <div id=test></div> 第一步还是要先加载jquery文件 jquery.min.js <script> $(function(){ $.

自己学习jquery的ajax的经历，记录一下

ajaxTestDemo.html

在body里面放一个id为test的div

<div id="test"></div>

第一步还是要先加载jquery文件 jquery.min.js

<script>
 $(function(){
 $.ajax({
 //请求方式为get
 type:"GET",
 //json文件位置
 url:"./data/shuju.json",
 //返回数据格式为json
 dataType: "json",
 //请求成功完成后要执行的方法
 success: function(data){
 //使用$.each方法遍历返回的数据date,插入到id为#result中
 var str="<ul>";
 $.each(data.list,function(i,n){
 str+="<li>"+n["item"]+"</li>";
 })
 str+="</ul>";
 $("#test").append(str);
 }
 });
 });
</script>

shuju.json文件

{
 "list":[
 {"item":"审计管理"},
 {"item":"菜单管理"},
 {"item":"订单管理"},
 {"item":"合同管理"},
 {"item":"物流管理"},
 {"item":"行政管理"},
 {"item":"人事管理"},
 {"item":"购物管理"},
 {"item":"批发管理"},
 {"item":"安全管理"},
 {"item":"账号管理"},
 {"item":"财务管理"},
 {"item":"其他管理"}
 ]
}

/* json文件里竟然不能有这样的注释，因为困扰了几个小时！*/

完整的页面代码

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>测试jquey的ajax方法</title>
 <style>
 *{
 padding:0;
 margin:0;
 }
 #test{
 padding: 0;
 margin: 0 auto;
 width:200px;
 height: 400px;
 }
 #test li{
 list-style: none;
 width:200px;
 text-align: center;
 height:30px;
 line-height:30px;
 border:1px dashed lightgrey;
 }
 </style>
</head>
<body>

<div id="test"></div>
<script src="js/jquery.min.js"></script>
<script>
 $(function(){
 alert(1);
 $.ajax({
 //请求方式为get
 type:"GET",
 //json文件位置
 url:"./data/shuju.json",
 //返回数据格式为json
 dataType: "json",
 //请求成功完成后要执行的方法
 success: function(data){
 //使用$.each方法遍历返回的数据date,插入到id为#result中
 var str="<ul>";
 $.each(data.list,function(i,n){
 str+="<li>"+n["item"]+"</li>";
 })
 str+="</ul>";
 $("#test").append(str);
 }
 });
 });
</script>
</body>
</html>

还可以通过$.getJSON来获取本地json文件

/* getJSON*/
$(function(){
 $.getJSON("./data/shuju.json",function(data){
 var str="<ul>";
 $.each(data.list,function(i,n){
 str+="<li>"+n["item"]+"</li>";
 })
 str+="</ul>";
 $("#test").append(str);
 });
});

以上这篇通过jquery的ajax请求本地的json文件方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持脚本之家。

通过jquery的ajax请求本地的json文件方法

推荐度：

点击下载本文 文档为doc格式

标签：请求 json json文件

热门焦点

通过jquery的ajax请求本地的json文件方法

通过jquery的ajax请求本地的json文件方法

通过jquery的ajax请求本地的json文件方法

最新推荐

猜你喜欢

热门推荐