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

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。JSONM文件中包含了关于“名称”和“值”的信息。有时候我们需要读取JSON格式的数据文件,在jQuery中可以使用Ajax或者 $.getJSON()方法实现。

下面就使用jQuery读取music.txt文件中的JSON数据格式信息。
首先,music.txt中的内容如下:

复制代码 代码如下:

[
{"optionKey":"1", "optionValue":"Canon in D"},
{"optionKey":"2", "optionValue":"Wind Song"},
{"optionKey":"3", "optionValue":"Wings"}
]

下来是HTML代码:

复制代码 代码如下:

<div>点击按钮获取JSON数据</div>
<input type="button" id="button" value="确定" />
<div id="result"></div>

使用Ajax获取JSON数据的jQuery代码:

复制代码 代码如下:

$(document).ready(function(){
$('#button').click(function(){
$.ajax({
type:"GET",
url:"music.txt",
dataType:"json",
success:function(data){
var music="<ul>";
//i表示在data中的索引位置,n表示包含的信息的对象
$.each(data,function(i,n){
//获取对象中属性为optionsValue的值
music+="<li>"+n["optionValue"]+"</li>";
});
music+="</ul>";
$('#result').append(music);
}
});
return false;
});
});

当然,也可以使用$.getJSON()方法,代码简洁一点:

复制代码 代码如下:

$(document).ready(function(){
$('#button').click(function(){
$.getJSON('music.txt',function(data){
var music="<ul>";
$.each(data,function(i,n){
music+="<li>"+n["optionValue"]+"</li>";
});
music+="</ul>";
$('#result').append(music);
});
return false;
});
});

时间: 2025-01-30 18:19:04

jQuery中使用Ajax获取JSON格式数据示例代码_jquery的相关文章

Jquery解析Json格式数据过程代码_jquery

今天稍微学习了一下Json,JSON (JavaScript Object Notation) 是一种轻量级的数据交换格式. 易于人阅读和编写.同时也易于机器解析和生成. JSON采用完全独立于语言的文本格式,但是也使用了类似于C语言家族的习惯(包括C, C++, C#, Java, JavaScript, Perl, Python等). 这些特性使JSON成为理想的数据交换语言. JSON建构于两种结构: "名称/值"对的集合(A collection of name/value p

jquery使用each方法遍历json格式数据实例_jquery

本文实例讲述了jquery使用each方法遍历json格式数据的方法.分享给大家供大家参考.具体实现方法如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml&q

jquery使用each方法遍历json格式数据实例

  本文实例讲述了jquery使用each方法遍历json格式数据的方法.分享给大家供大家参考.具体实现方法如下: ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> &l

jQuery使用Ajax操作JSON格式数据说明

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSON存储了以"Key-Value"为结构的数据.有时候我们需要读取JSON格式的数据文件,在jQuery中可以使用Ajax或者 $.getJSON()方法实现. 先看看API中对$.ajax()的介绍 jQuery.ajax(url,[settings]) 概述 通过 HTTP 请求加载远程数据. jQuery 底层 AJAX 实现.简单易用的高层实现见 $.get, $.post 等.$.

jQuery向后台传入json格式数据的方法_jquery

本文实例讲述了jQuery向后台传入json格式数据的方法.分享给大家供大家参考.具体分析如下: 前后台数据交互一般都用json格式,后台可以直接将json对应转化为实体对象.方便以后的操作.jQuery向后台传数据的时候,我们会发现他会自动转化成查询字符串,不能真正传入一个json.而且用jquery对表单序列化的时候,返回的格式是一个数组,还需要作进一步转换.其实只要我们在ajax方法中配置一些东西就可以完成.代码如下: <form id="ff"> <input

jQuery解析json格式数据简单实例_jquery

本文实例讲述了jQuery解析json格式数据的方法.分享给大家供大家参考,具体如下: 我用的jquery版本是1.7.2,整合了json数据的解析功能,很早的版本是没有的,我记得那个时候,要么用js的for in来读取json字符串里面的数据,要么加载一个专门用来解析json字符串的JS文件. 例子: <html> <head> <script type="text/javascript" src="jquery-1.7.2.min.js&qu

jQuery中的ajax async同步和异步详解_jquery

项目中有这样一个需求,使用ajax加载数据返回页面并赋值,然后前端取出该值 这其中涉及到代码的顺序问题,有时后台还未返回数据,但已执行后面代码, 所以就会造成取不到值 $.ajax({ type: "post", url: "admin/PfmOptionRuleItem.do", success: function(data){ $("#ruleItem").val(data.ruleItem); //① } }); return $(&quo

PHP生成和获取XML格式数据实现代码

生成XML格式数据 我们假设系统中有一张学生信息表student,需要提供给第三方调用,并有id,name,sex,age分别记录学生的姓名.性别.年龄等信息.  代码如下 复制代码 CREATE TABLE `student` (    `id` int(11) NOT NULL auto_increment,    `name` varchar(50) NOT NULL,    `sex` varchar(10) NOT NULL,    `age` smallint(3) NOT NULL

android解析json格式数据实现代码

普通形式的: 服务器端返回的json数据格式如下:  代码如下 复制代码 {"userbean":{"Uid":"100196","Showname":"u75afu72c2u7684u7334u5b50","Avtar":null,"State":1}} 分析代码如下:  代码如下 复制代码 // TODO 状态处理 500 200