关闭

jQuery获取json数据

标签: AjaxjQueryJSON
190人阅读 评论(0) 收藏 举报
首先,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;
	});
});
0
0
查看评论
发表评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场

jQuery获取JSON格式数据方法

getJSON方法: jQuery.getJSON(url,data,success(data,status,xhr)) $("button").click(function(){ $.ge...
  • u013474436
  • u013474436
  • 2015-06-02 23:26
  • 1918

jQuery AJAX获取JSON数据解析多种方式示例

本文出自:http://blog.csdn.net/haiqiao_2010/article/details/12653555 <html xmlns="h
  • zhoucheng05_13
  • zhoucheng05_13
  • 2016-12-13 15:12
  • 16016

将Table转换为Json(Jquery的Ajax方法读取)

1. 创建Users表  [sql]  view plaincopyprint? create table Users   (       Use...
  • my98800
  • my98800
  • 2016-10-11 08:35
  • 579

JQuery 获取JSON数据方法

简述: 使用jquery从后台获取JSON数据,显示 知识点: 1. 使用了require JS 框架 2. 用Jquery的两种方法获取后台数据 1)ajax 方法,传回的都是js...
  • anialy
  • anialy
  • 2013-02-15 21:26
  • 39422

jquery 获取服务器json 数据笔记

'5','title'=>'akhkah','mesage'=>'ajax数组'), array('id'=>'6','title'=>'...
  • a957651480
  • a957651480
  • 2014-05-03 23:50
  • 2805

jquery通过ajax方式获取json数据和解析

jquery通过ajax方式获取json数据和解析
  • actionzh
  • actionzh
  • 2017-07-28 17:50
  • 520

jQuery 向 servlet 发送和接受JSON数据。

(⊙o⊙)…文章关于jQuery 向 后台发送和接收JSON数据的 某些代码,应该有很多方式其他我还没用过。 一、发送JSON格式的数据 ★注意要用到 jquery.json 的 js文件。下载地址:...
  • u014195357
  • u014195357
  • 2016-05-05 11:24
  • 5329

jQuery中读取json文件

json文件是一种轻量级的数据交互格式。一般在jquery中使用getJSON()方法读取。 $.getJSON(url,[data],[callback]) url:加载的页面地址 data:...
  • abeetle
  • abeetle
  • 2013-05-10 12:23
  • 35800

jquery ajax获取json并解析,获取的json是object对象格式

jquery ajax获取json并解析,获取的json是object对象格式
  • twinkle2star
  • twinkle2star
  • 2017-07-18 18:13
  • 3440

jquery实现下拉菜单的二级联动,利用json对象从DB取值显示联动

利用struts2和Ajax实现json对象的传输,然后实现菜单的二级联动 下面是我的 js文件原码: var mail={ //初始化 init:{ //初始化数据 ini...
  • zhouren1314
  • zhouren1314
  • 2014-03-26 22:40
  • 1951
    个人资料
    • 访问:10739次
    • 积分:236
    • 等级:
    • 排名:千里之外
    • 原创:9篇
    • 转载:17篇
    • 译文:0篇
    • 评论:2条
    最新评论