`
赵彦枝
  • 浏览: 50325 次
  • 性别: Icon_minigender_2
  • 来自: 河北
社区版块
存档分类
最新评论

jQuery中$.getJSON()方法详解

    博客分类:
  • 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);
       })
   })
}
 
 

 

 

 

  

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

       

分享到:
评论

相关推荐

    解决JQurey跨域问题$.get|$.post|$.getJSON等等统统可跨域

    本篇将详细介绍如何解决jQuery跨域问题,涉及的方法包括$.get、$.post和$.getJSON等。 首先,我们需要理解什么是跨域。同源策略是浏览器为保障安全而实施的一项机制,它规定JavaScript只能访问与当前页面同源(协议...

    jquery $.post()的用法 传递json文本 客户端和服务器端相互传递

    ### jQuery $.post() 方法详解与 JSON 数据交互 在现代 Web 开发中,客户端与服务器端的数据交换是非常重要的一个环节。jQuery 提供了多种 AJAX 方法来简化这一过程,其中 `$.post()` 是一种常用的方式来实现客户端...

    jQuery中$.ajax()和$.getJson()同步处理详解

    在jQuery中,$.ajax()和$.getJSON()是两种常见的用于发送Ajax请求的方法,它们主要用于与服务器进行异步数据交互。然而,在某些特定场景下,如处理表单提交前的验证,可能需要同步处理请求,确保数据正确无误后再...

    Ajax $.getJSON案例详解

    `$.getJSON` 是 `jQuery` 库中一个非常实用的方法,用于通过 `GET` 请求从服务器获取JSON格式的数据,然后将其转换为JavaScript对象。这篇案例详解将深入探讨 `$.getJSON` 的使用,并通过一个具体的例子来展示其工作...

    jQuery中$.get、$.post、$.getJSON和$.ajax的用法详解

    本文重点是来讲讲jQuery中调用ajax的4种方法:$.get、$.post、$getJSON、$ajax。如果读者没有javascript和jquery的知识,或者没有ajax的概念,那么请先去问问度娘,再来读本文。

    Jquery $when done then的用法详解

    对于$.ajax请求来说,如果层级比较多,程序看起来会比较乱,而为了解决这种问题,才有了$when…done…fail…then的封装,它将$.ajax这嵌套结构转成了顺序平行的结果,向下面的$.ajax写法,看起来很乱 $.ajax({ url...

    JQuery用$.ajax或$.getJSON跨域获取JSON数据的实现代码

    在Web开发中,由于浏览器的安全策略,JavaScript通常不能直接进行跨域请求,但jQuery提供了$.ajax和$.getJSON方法,通过JSONP(JSON with Padding)技术来实现在不同源之间获取JSON数据。下面将详细介绍如何使用...

    Jquery中$.ajax()方法参数详解

    JQuery中的$.ajax()方法是前端开发中常用的一种实现AJAX通信的方式,它提供了一种灵活而强大的途径来进行异步的HTTP请求。下面,我们将详细介绍$.ajax()方法的各个参数以及它们的作用和用法。 1. url:这是一个字符...

    jQuery中Ajax的get、post等方法详解.docx

    本文主要解析jQuery中的$.get()、$.post()等方法,以及相关的$.getScript()和$.getJSON()方法。 首先,$.get()方法是使用HTTP GET请求方式向服务器获取数据。其基本语法如下: ```javascript $.get(url, data, ...

    jQuery中Ajax的get、post等方法详解.pdf

    本文主要解析jQuery中的$.get()、$.post()等Ajax方法,以及相关的$.getScript()和$.getJSON()方法。 首先,$.get()方法是使用GET方式发送异步请求,基本语法如下: ```javascript $.get(url, data, callback, type...

    JQ中$.ajax()方法详解

    ### JQ中$.ajax()方法详解 在前端开发领域,jQuery因其简洁易用而深受开发者喜爱。其中,`$.ajax()`方法是实现异步数据请求的核心功能之一,它简化了与服务器交互的过程,使得前端页面无需刷新即可更新数据或状态。...

    $.ajax()方法详解

    总的来说,$.ajax()方法是jQuery中处理Ajax请求的核心工具,它的强大在于可以灵活地控制请求的各个阶段,适应各种不同的网络交互需求。熟练掌握$.ajax()方法的使用,能够极大地提高开发效率并提升用户体验。

    getjson()兼容性问题

    具体来说,在jQuery 1.4.2版本中,jQuery改变了JSON数据的解析方式,使用了更严格的`$.parseJSON()`方法来代替之前的`eval()`函数。 #### 三、案例分析 在案例中,开发者在使用jQuery处理Ajax请求时遇到了问题,即...

    jQuery中使用Ajax获取JSON格式数据示例代码.pdf

    总结来说,从给定文件的内容来看,介绍了 JSON 数据格式的特性,jQuery 中处理 Ajax 请求的基本方式,以及如何通过 jQuery 的 `$.ajax()` 和 `$.getJSON()` 方法获取和处理 JSON 数据。同时,还通过实际的代码示例,...

    jQuery1.12.4+jQuery中文手册.rar

    `$.getJSON()`则专门用于获取JSON数据。 6. **链式操作**:jQuery的所有方法都会返回jQuery对象,这使得我们可以连续调用多个方法,如`$(selector).css("color", "red").fadeIn(500)`。 **学习与应用** - 开发时...

    jquery.query.js

    例如,我们可以使用$.query.get()、$.query.set()等方法来获取或设置页面元素,同时提供了一套完整的筛选、排序和转换机制。 二、主要功能与方法 1. 查询与筛选:$.query.select()和$.query.filter()用于选择和...

    JQuery中$.ajax()方法参数详解及应用

    在JQuery众多功能中,$.ajax()方法是实现Ajax请求的重要方法。通过$.ajax(),开发者可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。本文将详细介绍$.ajax()方法的各个参数以及如何应用。 ...

    jQuery Ajax 实例详解 ($.ajax、$.post、$.get)

    以上就是关于 jQuery AJAX 的实例详解,包括 $.ajax, $.post 和 $.get 的使用方法以及一些实际应用场景。通过这些方法,我们可以轻松地在客户端与服务器之间进行数据交互,实现页面的无刷新更新。

Global site tag (gtag.js) - Google Analytics