通过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实现返回顶部按钮和scroll滚动功能[带动画效果]
Jul 05 jQuery
jQuery 中msgTips 顶部弹窗效果实现代码
Aug 14 jQuery
jQuery实现简单的计时器功能实例分析
Aug 29 jQuery
jQuery中 DOM节点操作方法大全
Oct 12 jQuery
jQuery实现输入框的放大和缩小功能示例
Jul 21 jQuery
jQuery实现的模仿雨滴下落动画效果
Dec 11 jQuery
基于 jQuery 实现键盘事件监听控件
Apr 04 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
使用jquery-easyui的布局layout写后台管理页面的代码详解
Jun 19 jQuery
jQuery单页面文字搜索插件jquery.fullsearch.js的使用方法
Feb 04 jQuery
jquery实现简单自动轮播图效果
Jul 29 jQuery
jQuery-App输入框实现实时搜索
Nov 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
SONY ICF-SW07收音机电路分析
2021/03/02 无线电
PHP程序员编程注意事项
2008/04/10 PHP
PHP及Zend Engine的线程安全模型分析
2011/11/10 PHP
在wamp集成环境下升级php版本(实现方法)
2013/07/01 PHP
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
8个必备的PHP功能开发
2015/10/02 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
基于PHP实现短信验证码接口(容联运通讯)
2016/09/06 PHP
php表单文件iframe异步上传实例讲解
2017/07/26 PHP
浅谈PHP实现大流量下抢购方案
2017/12/15 PHP
PHP实现简易图形计算器
2020/08/28 PHP
jquery中ajax跨域方法实例分析
2015/12/18 Javascript
EasyUi中的Combogrid 实现分页和动态搜索远程数据
2016/04/01 Javascript
jquery的 filter()方法使用教程
2018/03/22 jQuery
使用vue打包时vendor文件过大或者是app.js文件很大的问题
2018/06/29 Javascript
vue中Element-ui 输入银行账号每四位加一个空格的实现代码
2018/09/14 Javascript
vue router动态路由设置参数可选问题
2019/08/21 Javascript
jQuery+ThinkPHP实现图片上传
2020/07/23 jQuery
[02:10]探秘浦东源深体育馆 DOTA2 Supermajor不见不散
2018/05/17 DOTA
深入Python函数编程的一些特性
2015/04/13 Python
Python第三方库xlrd/xlwt的安装与读写Excel表格
2017/01/21 Python
详解PyCharm安装MicroPython插件的教程
2019/06/24 Python
对Python _取log的几种方式小结
2019/07/25 Python
Anaconda之conda常用命令介绍(安装、更新、删除)
2019/10/06 Python
Django中modelform组件实例用法总结
2020/02/10 Python
一款纯css3实现的动画加载导航
2014/10/08 HTML / CSS
Simons官方网站:加拿大时尚零售商
2020/02/20 全球购物
荷兰家电销售网站:Welhof
2020/12/08 全球购物
Java工程师面试集锦之Spring框架
2013/06/16 面试题
运动会通讯稿50字
2014/01/30 职场文书
社区戒毒工作方案
2014/06/04 职场文书
地球一小时宣传标语
2014/06/24 职场文书
公务员中国梦演讲稿
2014/08/19 职场文书
少先队活动总结
2014/08/29 职场文书
导游词之丽江普济寺
2019/10/22 职场文书
爱心捐款倡议书:点燃希望,传递温暖
2019/11/04 职场文书