jQuery中$.getJSON()方法详解

最新推荐文章于 2022-08-16 10:30:57 发布

原创最新推荐文章于 2022-08-16 10:30:57 发布 · 1.8k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#json #javascript #ViewUI

json 专栏收录该内容

1 篇文章

订阅专栏

本文介绍如何使用jQuery的$.getJSON方法加载和解析JSON文件。详细解释了方法的语法、同步异步操作及如何通过示例代码获取JSON文件中的数据。

JSON 指的是 JavaScript 对象表示法（JavaScript Object Notation）,当我们建立一个JSON文件时，利用$.getJSON()方法可以调用该文件里的数据。下面是该方法的详解：

1.语法：

$.getJSON(url,[data],[callback]: )   //url为你建立的json文件或者是规定将请求发送的哪个 URL，必须写; data为可选，规定连同请求发送到服务器的数据;  function(){}为可选，为载入成功时的回调函数

2.$.getJSON()的同步异步问题：

$.getJson()本身是异步操作的方法，需要经过设置才能够同步，可以在执行之前加下面的代码语句将其改为同步执行。

$.ajaxSettings.async = false

3.实例：

（1）首先定义了一个名为promotionInfo的json文件，内容为：

  ["可口可乐", "雪碧", "方便面"]

在另一个js文件的函数中获取json文件中定义的数据：

//getJSON()方法的同步操作：
function computePromotionCount(goodsInfo) {
    $.ajaxSettings.async=false;    //将getJSO()方法设置为同步操作的方法
    $.getJSON("../js/promotionInfo.json",function(info){ //info为从json文件里获取到的所有数据
     _.each(goodsInfo, function (item){
         item.promotionCount = (info.indexOf(item.name)>-1) ? parseInt(item.count/3):0;
        })
    })                 //获取json文件里的数据，获取成功后执行function函数
    return goodsInfo;   
}

（2）定义了一个名为cartList.json的json文件，内容为：

[
{"classification": "饮料","name": "可口可乐","price": "3", "unit": "瓶" ,"id":"0"},
{"classification": "饮料","name": "雪碧", "price" : "3",  "unit": "瓶","id":"1"},
{"classification": "水果", "name": "苹果", "price" : "5.5", "unit": "斤","id":"2"},
{"classification": "水果", "name": "荔枝",  "price": "15",   "unit": "斤","id":"3"},
{"classification": "生活用品","name": "电池", "price" : "2", "unit": "个","id":"4"},
{"classification": "食品", "name": "方便面",  "price": "4.5", "unit": "袋","id":"5"}
]

在另一个js文件的函数中获取json文件中定义的数据：

//getJSON()方法的异步操作：
function addClickEvent(){
   $.getJSON("../js/cartList.json",function(info){    //info为从cartlist.json文件里获取到的数据
       var goodsName=JSON.parse(localStorage.getItem("goodsName"))||[ ];
       $(".button").click( function(){
           saveCount();
           var ID=this.id;
           var cartName=info[ID].name;
           addCartCount(ID,cartName,goodsName,info);
           addGoodsNameArray(ID,cartName,goodsName,info);
       })
   })
}