通过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操作DOM_动力节点Java学院整理
Jul 04 jQuery
jquery版轮播图效果和extend扩展
Jul 18 jQuery
JQuery 获取多个select标签option的text内容(实例)
Sep 07 jQuery
jQuery实现的简单无刷新评论功能示例
Nov 08 jQuery
基于jQuery使用Ajax动态执行模糊查询功能
Jul 05 jQuery
jquery获取select选中值的文本,并赋值给另一个输入框的方法
Aug 21 jQuery
jQuery实现的自定义轮播图功能详解
Dec 28 jQuery
Jquery的Ajax技术使用方法
Jan 21 jQuery
jquery-ui 进度条功能示例【测试可用】
Jul 25 jQuery
jquery+css3实现的经典弹出层效果示例
May 16 jQuery
jquery.validate自定义验证用法实例分析【成功提示与择要提示】
Jun 06 jQuery
Jquery 获取相同NAME 或者id删除行操作
Aug 24 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
【星际争霸1】人族1v7家ZBath
2020/03/04 星际争霸
十大“创意”战术!
2020/03/04 星际争霸
编译PHP报错configure error Cannot find libmysqlclient under usr的解决方法
2014/06/27 PHP
函数中使用require_once问题深入探讨 优雅的配置文件定义方法推荐
2014/07/02 PHP
php利用fsockopen GET/POST提交表单及上传文件
2017/05/22 PHP
弹出模态框modal的实现方法及实例
2017/09/19 PHP
js表数据排序 sort table data
2009/02/18 Javascript
使用JavaScript switch case 另类写法
2010/03/14 Javascript
关于js中window.location.href,location.href,parent.location.href,top.location.href的用法与区别
2010/10/18 Javascript
浅谈nodeName,nodeValue,nodeType,typeof 的区别
2015/01/13 Javascript
浅谈bootstrap源码分析之tab(选项卡)
2016/06/06 Javascript
利用js查找数组中指定元素并返回该元素的所有索引示例
2017/03/29 Javascript
jquery获取元素到屏幕四周可视距离的方法
2018/09/05 jQuery
使用Taro实现小程序商城的购物车功能模块的实例代码
2020/06/05 Javascript
Webpack5正式发布,有哪些新特性
2020/10/12 Javascript
vue vant中picker组件的使用
2020/11/03 Javascript
Python中的元类编程入门指引
2015/04/15 Python
python下MySQLdb用法实例分析
2015/06/08 Python
Python3实现抓取javascript动态生成的html网页功能示例
2017/08/22 Python
Python绘制3D图形
2018/05/03 Python
实例详解Python装饰器与闭包
2019/07/29 Python
在macOS上搭建python环境的实现方法
2019/08/13 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
纯CSS打造(无图像无js)的非常流行的讲话(语音)气泡效果
2012/12/28 HTML / CSS
Omio荷兰:预订火车、巴士和机票
2018/11/04 全球购物
游戏商店:Eneba
2020/04/25 全球购物
公立医院改革实施方案
2014/03/14 职场文书
中介业务员岗位职责
2014/04/09 职场文书
捐款倡议书
2014/04/14 职场文书
2014年党务公开方案
2014/05/08 职场文书
计算机专业自荐信范文
2014/05/28 职场文书
党性观念心得体会
2014/09/03 职场文书
企业财务总监岗位职责
2015/04/03 职场文书
2015选调生工作总结
2015/07/24 职场文书
2016春节放假通知范文
2015/08/18 职场文书
mysql sql常用语句大全
2022/06/21 MySQL