`
fireDragonpzy
  • 浏览: 462463 次
  • 性别: Icon_minigender_1
  • 来自: 济南
社区版块
存档分类
最新评论

jQuery中使用Ajax获取JSON格式数据

阅读更多
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;
	});
});

分享到:
评论

相关推荐

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

    ### jQuery中使用Ajax获取JSON格式数据的知识点详解 #### 1. JSON数据格式基础 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。JSON是基于...

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

    标题中提到的“jQuery中使用Ajax获取JSON格式数据示例代码”,这是指在网络编程领域中,如何在使用jQuery库的情况下,通过Ajax技术来获取JSON格式的数据。JSON是一种轻量级的数据交换格式,它易于人阅读和编写,同时...

    jQuery中ajax请求后台返回json数据并渲染HTML的方法

    本文介绍了如何在jQuery中通过AJAX请求从后台获取JSON格式的数据,并将这些数据动态地渲染到HTML中去。具体的知识点可以分为以下几个方面: 1. jQuery的AJAX方法:在文章中,通过使用jQuery提供的$.ajax()方法来...

    jQuery ajax读取json文件内容

    其中,使用jQuery的Ajax功能来读取JSON文件内容是前端开发中的常见需求,尤其在动态加载数据、实现异步交互方面发挥着重要作用。 ### 标题解析:“jQuery ajax读取json文件内容” 此标题直截了当,明确指出将通过...

    jQuery读取json数据

    关于"jQuery读取json数据"这个主题,我们将会深入探讨如何利用jQuery的Ajax功能来高效地加载和解析JSON格式的数据,以及这样做带来的优势。 JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它易于...

    SSH框架ajax获取的json格式数据处理过程

    在本文中,我们将详细讲解如何使用 SSH 框架中的 Ajax 获取的 JSON 格式数据处理过程,并且实现菜单联动下拉框的功能。 一、Ajax 中 response 返回的数据是一个二维数组 在 Ajax 中,response 返回的数据是一个二...

    jquery ajax Datatable与json之间数据转换

    jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换jquery ajax Datatable与json之间数据转换...

    使用jquery的方式通过ajax处理json格式的数据

    本教程将深入探讨如何使用jQuery通过Ajax处理JSON格式的数据。JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成,是Web服务和客户端之间交换数据的常用...

    php基于jquery的ajax技术传递json数据简单实例.docx

    jQuery 库可以帮助我们快速地开发网页应用程序,在本例中,我们使用 jQuery 库来实现 Ajax 功能。 POST 请求 POST 请求是一种 HTTP 请求方法,用于将数据从客户端发送到服务器端。在本例中,我们使用 POST 请求将...

    jQuery Ajax前后端使用JSON进行交互示例

    本篇文章主要介绍了jQuery Ajax前后端使用JSON进行交互示例,实现前端通过jQuery Ajax传输json到后端,后端接收json,对json进行处理,后端返回一个json给前端,有兴趣的可以了解一下。

    SSH1,JQuery的ajax返回json二维数组处理过程

    在本文中,我们将探讨如何使用SSH1框架与jQuery的AJAX功能来处理JSON二维数组,特别是在实现菜单联动下拉框的场景中。SSH1(Spring、Struts、Hibernate)是Java开发中的一个流行MVC框架组合,而jQuery的AJAX功能则...

    jQuery-ajax-json实现自动轮播图.rar

    然而,如果我们想要从服务器动态获取图片数据,我们可以使用ajax从后台获取json格式的图片列表。假设我们的json数据如下: ```json { "images": [ {"url": "image1.jpg", "title": "Image 1"}, {"url": "image2....

    ajax+json实例

    在这个例子中,服务器端通过`JsonResult`返回JSON格式的用户信息,客户端通过AJAX请求获取这些信息并解析显示。 **五、总结** AJAX+JSON在.NET环境中的应用大大提高了Web应用程序的交互性和效率,减少了不必要的...

    利用JQuery jsonp实现Ajax跨域请求json数据

    本篇文章将详细讲解如何利用jQuery的jsonp方法实现Ajax跨域请求,以及如何在服务器端使用.Net的*.handler和WebService来返回JSON数据。 首先,理解JSONP的基本原理。JSONP是一种非官方的协议,通过动态创建`...

    jQuery_Ajax_Json全解析

    jQuery的Ajax方法常用于从服务器获取JSON数据,实现页面动态更新。例如,使用`$.getJSON()`获取JSON数据并更新页面: ```javascript $.getJSON('data.json', function(data) { var html = ''; $.each(data.items,...

    struts2使用jquery整合ajax、json用户登录实例源码

    在jQuery中,我们可以使用$.ajax()方法发送登录请求,如下所示: ```javascript $.ajax({ url: 'login.action', type: 'POST', data: {username: $('#username').val(), password: $('#password').val()}, ...

    jquery的ajax传json对象数组到struts2的action

    在上述代码中,`contentType`设置为'application/json',告诉服务器我们发送的数据格式是JSON。`data`参数使用`JSON.stringify()`方法将JSON对象转换为字符串,以便于发送。 在Struts2 Action端,我们需要配置...

    struts2+jquery执行ajax并返回json类型数据(源码)

    在这个"struts2+jquery执行ajax并返回json类型数据"的示例中,我们将探讨如何通过Ajax技术在后台Struts2框架与前端jQuery库之间交换JSON格式的数据。 首先,Struts2是一个强大的MVC(Model-View-Controller)框架,...

Global site tag (gtag.js) - Google Analytics