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);
})
})
}
分享到:
相关推荐
本篇将详细介绍如何解决jQuery跨域问题,涉及的方法包括$.get、$.post和$.getJSON等。 首先,我们需要理解什么是跨域。同源策略是浏览器为保障安全而实施的一项机制,它规定JavaScript只能访问与当前页面同源(协议...
### jQuery $.post() 方法详解与 JSON 数据交互 在现代 Web 开发中,客户端与服务器端的数据交换是非常重要的一个环节。jQuery 提供了多种 AJAX 方法来简化这一过程,其中 `$.post()` 是一种常用的方式来实现客户端...
在jQuery中,$.ajax()和$.getJSON()是两种常见的用于发送Ajax请求的方法,它们主要用于与服务器进行异步数据交互。然而,在某些特定场景下,如处理表单提交前的验证,可能需要同步处理请求,确保数据正确无误后再...
`$.getJSON` 是 `jQuery` 库中一个非常实用的方法,用于通过 `GET` 请求从服务器获取JSON格式的数据,然后将其转换为JavaScript对象。这篇案例详解将深入探讨 `$.getJSON` 的使用,并通过一个具体的例子来展示其工作...
本文重点是来讲讲jQuery中调用ajax的4种方法:$.get、$.post、$getJSON、$ajax。如果读者没有javascript和jquery的知识,或者没有ajax的概念,那么请先去问问度娘,再来读本文。
对于$.ajax请求来说,如果层级比较多,程序看起来会比较乱,而为了解决这种问题,才有了$when…done…fail…then的封装,它将$.ajax这嵌套结构转成了顺序平行的结果,向下面的$.ajax写法,看起来很乱 $.ajax({ url...
在Web开发中,由于浏览器的安全策略,JavaScript通常不能直接进行跨域请求,但jQuery提供了$.ajax和$.getJSON方法,通过JSONP(JSON with Padding)技术来实现在不同源之间获取JSON数据。下面将详细介绍如何使用...
JQuery中的$.ajax()方法是前端开发中常用的一种实现AJAX通信的方式,它提供了一种灵活而强大的途径来进行异步的HTTP请求。下面,我们将详细介绍$.ajax()方法的各个参数以及它们的作用和用法。 1. url:这是一个字符...
本文主要解析jQuery中的$.get()、$.post()等方法,以及相关的$.getScript()和$.getJSON()方法。 首先,$.get()方法是使用HTTP GET请求方式向服务器获取数据。其基本语法如下: ```javascript $.get(url, data, ...
本文主要解析jQuery中的$.get()、$.post()等Ajax方法,以及相关的$.getScript()和$.getJSON()方法。 首先,$.get()方法是使用GET方式发送异步请求,基本语法如下: ```javascript $.get(url, data, callback, type...
### JQ中$.ajax()方法详解 在前端开发领域,jQuery因其简洁易用而深受开发者喜爱。其中,`$.ajax()`方法是实现异步数据请求的核心功能之一,它简化了与服务器交互的过程,使得前端页面无需刷新即可更新数据或状态。...
总的来说,$.ajax()方法是jQuery中处理Ajax请求的核心工具,它的强大在于可以灵活地控制请求的各个阶段,适应各种不同的网络交互需求。熟练掌握$.ajax()方法的使用,能够极大地提高开发效率并提升用户体验。
具体来说,在jQuery 1.4.2版本中,jQuery改变了JSON数据的解析方式,使用了更严格的`$.parseJSON()`方法来代替之前的`eval()`函数。 #### 三、案例分析 在案例中,开发者在使用jQuery处理Ajax请求时遇到了问题,即...
总结来说,从给定文件的内容来看,介绍了 JSON 数据格式的特性,jQuery 中处理 Ajax 请求的基本方式,以及如何通过 jQuery 的 `$.ajax()` 和 `$.getJSON()` 方法获取和处理 JSON 数据。同时,还通过实际的代码示例,...
`$.getJSON()`则专门用于获取JSON数据。 6. **链式操作**:jQuery的所有方法都会返回jQuery对象,这使得我们可以连续调用多个方法,如`$(selector).css("color", "red").fadeIn(500)`。 **学习与应用** - 开发时...
例如,我们可以使用$.query.get()、$.query.set()等方法来获取或设置页面元素,同时提供了一套完整的筛选、排序和转换机制。 二、主要功能与方法 1. 查询与筛选:$.query.select()和$.query.filter()用于选择和...
在JQuery众多功能中,$.ajax()方法是实现Ajax请求的重要方法。通过$.ajax(),开发者可以在不重新加载整个页面的情况下,与服务器交换数据并更新部分网页内容。本文将详细介绍$.ajax()方法的各个参数以及如何应用。 ...
以上就是关于 jQuery AJAX 的实例详解,包括 $.ajax, $.post 和 $.get 的使用方法以及一些实际应用场景。通过这些方法,我们可以轻松地在客户端与服务器之间进行数据交互,实现页面的无刷新更新。