通过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插件HighCharts绘制简单2D折线图效果示例【附demo源码】
Mar 21 jQuery
如何编写jquery插件
Mar 29 jQuery
jquery将标签元素的高设为屏幕的百分比
Apr 19 jQuery
jQuery层级选择器_动力节点节点Java学院整理
Jul 04 jQuery
基于jQuery的左滑出现删除按钮的示例
Aug 29 jQuery
jQuery EasyUI开发技巧总结
Sep 26 jQuery
jQuery中ajax请求后台返回json数据并渲染HTML的方法
Aug 08 jQuery
jQuery实现的简单拖拽功能示例【测试可用】
Aug 14 jQuery
jQuery AJAX与jQuery事件的分析讲解
Feb 18 jQuery
js/jquery遍历对象和数组的方法分析【forEach,map与each方法】
Feb 27 jQuery
jquery实现动态创建form并提交的方法示例
May 27 jQuery
jQuery弹框插件使用方法详解
May 26 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 smarty截取中文字符乱码问题?gb2312/utf-8
2011/11/07 PHP
将博客园(cnblogs.com)数据导入到wordpress的代码
2013/01/06 PHP
ThinkPHP自定义函数解决模板标签加减运算的方法
2015/07/03 PHP
PHP数学运算与数据处理实例分析
2016/04/01 PHP
PHP连接MySQL进行增、删、改、查操作
2017/02/19 PHP
php+resumablejs实现的分块上传 断点续传功能示例
2017/04/18 PHP
关于IE7 IE8弹出窗口顶上
2008/12/22 Javascript
JavaScript isPrototypeOf和hasOwnProperty使用区别
2010/03/04 Javascript
jquery $.each 和for怎么跳出循环终止本次循环
2013/09/27 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
js中settimeout方法加参数
2014/02/28 Javascript
10个很棒的jQuery代码片段
2015/09/24 Javascript
Jquery easyui 实现动态树
2015/11/17 Javascript
jQuery对html元素的取值与赋值实例详解
2015/12/18 Javascript
Three.js学习之几何形状
2016/08/01 Javascript
基于JS设计12306登录页面
2016/12/28 Javascript
JavaScript实现QQ聊天消息展示和评论提交功能
2017/05/22 Javascript
深入理解react-router 路由的实现原理
2018/09/26 Javascript
手把手教你使用TypeScript开发Node.js应用
2019/05/06 Javascript
JavaScript实现矩形块大小任意缩放
2020/08/25 Javascript
Python中字符编码简介、方法及使用建议
2015/01/08 Python
Python的Twisted框架上手前所必须了解的异步编程思想
2016/05/25 Python
详解supervisor使用教程
2017/11/21 Python
pyqt5简介及安装方法介绍
2018/01/31 Python
一文带你了解Python中的字符串是什么
2018/11/20 Python
对python实现合并两个排序链表的方法详解
2019/01/23 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
CSS3制作日历实现代码
2012/01/21 HTML / CSS
写一个方法1000的阶乘
2012/11/21 面试题
生产管理的三大手法
2013/11/11 职场文书
快餐店的创业计划书范文
2014/01/29 职场文书
《鸟岛》教学反思
2014/04/26 职场文书
一般党员对照检查材料
2014/09/24 职场文书
介绍信怎么写
2015/05/05 职场文书
2016年“我们的节日·重阳节”主题活动总结
2016/04/01 职场文书
python实现调用摄像头并拍照发邮箱
2021/04/27 Python