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


Posted in jQuery onAugust 08, 2018

自己学习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 相关文章推荐
如何编写jquery插件
Mar 29 jQuery
利用jquery正则表达式在页面验证url网址输入是否正确
Apr 04 jQuery
jquery.form.js异步提交表单详解
Apr 25 jQuery
jQuery zTree树插件动态加载实例代码
May 11 jQuery
jQuery实现简单的滑动导航代码(移动端)
May 22 jQuery
jQuery中ajax获取数据赋值给页面的实例
Dec 31 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
jQuery轮播图实例详解
Aug 15 jQuery
jQuery常见的遍历DOM操作详解
Sep 05 jQuery
jQuery简单实现根据日期计算星期几的方法
Jan 09 jQuery
基于ajax及jQuery实现局部刷新过程解析
Sep 12 jQuery
jquery实现穿梭框功能
Jan 19 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 #jQuery
解决jquery的ajax调取后端数据成功却渲染失败的问题
Aug 08 #jQuery
jquery 通过ajax请求获取后台数据显示在表格上的方法
Aug 08 #jQuery
浅析vue-router jquery和params传参(接收参数)$router $route的区别
Aug 03 #jQuery
jQuery 实现倒计时天,时,分,秒功能
Jul 31 #jQuery
jQuery实现点击自身以外区域关闭弹出层功能完整示例【改进版】
Jul 31 #jQuery
jQuery.extend 与 jQuery.fn.extend的用法及区别实例分析
Jul 25 #jQuery
You might like
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
PHP里的单例类写法实例
2015/06/25 PHP
php将一维数组转换为每3个连续值组成的二维数组
2016/05/06 PHP
[原创]PHP实现生成vcf vcard文件功能类定义与使用方法详解【附demo源码下载】
2017/09/02 PHP
Javascript 篱式条件判断
2008/08/22 Javascript
开源的javascript项目Kissy介绍
2014/11/28 Javascript
jQuery页面刷新(局部、全部)问题分析
2016/01/09 Javascript
动态加载JavaScript文件的两种方法
2016/04/22 Javascript
jQuery选择器及jquery案例详解(必看)
2016/05/20 Javascript
js动态获取子复选项并设计全选及提交的实现方法
2016/06/24 Javascript
ionic实现底部分享功能
2017/05/11 Javascript
详解vue+vueRouter+webpack的简单实例
2017/06/17 Javascript
基于JavaScript实现幸运抽奖页面
2020/07/05 Javascript
nodejs高大上的部署方式(PM2)
2018/09/11 NodeJs
node.js调用C++函数的方法示例
2018/09/21 Javascript
fetch 如何实现请求数据
2018/12/20 Javascript
基于vue-cli3创建libs库的实现方法
2019/12/04 Javascript
javascript 设计模式之组合模式原理与应用详解
2020/04/08 Javascript
vue实现几秒后跳转新页面代码
2020/09/09 Javascript
elementUI同一页面展示多个Dialog的实现
2020/11/19 Javascript
8个非常实用的Vue自定义指令
2020/12/15 Vue.js
[01:02:06]LGD vs Mineski Supermajor 胜者组 BO3 第二场 6.5
2018/06/06 DOTA
[53:50]CHAOS vs Mineski 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/18 DOTA
python list转dict示例分享
2014/01/28 Python
Python编程argparse入门浅析
2018/02/07 Python
python2与python3爬虫中get与post对比解析
2019/09/18 Python
python中线程和进程有何区别
2020/06/17 Python
django 获取字段最大值,最新的记录操作
2020/08/09 Python
python调用有道智云API实现文件批量翻译
2020/10/10 Python
法律专业应届生自荐信范文
2014/01/06 职场文书
护士自我介绍信
2014/01/13 职场文书
上课看小说检讨书
2014/02/22 职场文书
公开服务承诺制度
2014/03/26 职场文书
乌镇导游词
2015/02/02 职场文书
上课讲话检讨书范文
2015/05/07 职场文书
Navicat for MySQL的使用教程详解
2021/05/27 MySQL