<body>

    <div>点击按钮获取音乐列表</div>

    <input type="button" id="button" value="确定" />

    <div id="result"></div>

    <div>添加新的音乐</div>

    <input type="text" name="" id="" value="" />

    <input type="button" id="button2" value="添加" />

</body>
<script type="text/javascript">

    $(document).ready(function(){

        $('#button').click(function(){

            $.ajax({ 

                type:"GET", 

                url:"json/music.txt", //路径

                dataType:"json", 

                success:function(data){ 

                var music="<h2>"; 

                //i表示在data中的索引位置，n表示包含的信息的对象 

                $.each(data,function(i,n){ 

                    //获取对象中属性为optionsValue的值 

                    music+="<div>"+n["optionValue"]+"</div>"; 

                }); 

                music+="</h2>"; 

                    $('#result').append(music); 

                } 

            }); 

            return false; 

        }); 

    }); 

</script>
[

{"optionKey":"1", "optionValue":"Need you now"},

{"optionKey":"2", "optionValue":"According to you"},

{"optionKey":"3", "optionValue":"Thriller"},

{"optionKey":"4", "optionValue":"dreadful"}

]

jQuery调用ajax获取json格式数据的更多相关文章

  1. 通过Jquery中Ajax获取json文件数据

    1. JSON(JavaScript Object Notation): javaScript对象表示法: 是存储和交换文本信息的语法,比xml更小,更快,更易解析. 2. JSON基本书写格式 : ...

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

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式.JSONM文件中包含了关于“名称”和“值”的信息.有时候我们需要读取JSON格式的数据文件,在jQuery中 ...

  3. jQuery获取JSON格式数据方法

    getJSON方法: jQuery.getJSON(url,data,success(data,status,xhr)) $("button").click(function(){ ...

  4. springmvc4.0配置ajax请求json格式数据

    1.导入相关jar包:jackson-annotation-2.5.4.jar,jackson-core-2.5.4.jar,jackson-databind-2.5.4.jar. 2.spring- ...

  5. qt qml ajax 获取 json 天气数据示例

    依赖ajax.js类库,以下代码很简单的实现了获取天气json数据并展示的任务 [TestAjax.qml] import QtQuick 2.0 import "ajax.js" ...

  6. var dataObj=eval("("+data+")");//转换为json对象（解决在ajax返回json格式数据的时候明明正确的获取了返回值但是却就是进不去success方法的问题。格式错误）

    一,原理 1.1,解析1 将字符串解析为JavaScript代码,比如:var a = "alert('a');";这里的a就只是一个字符串而已,输出的话也是alert(a);这句 ...

  7. SpringMvc+ajax 实现json格式数据传递

    传JSON对象 前端 function test () { var param = {username : "yitop"}; $.ajax({ timeout : 20000, ...

  8. ajax 提交 json格式数据到后台

    例子:$.ajax({ type: 'POST', url: "/ROOT/modify.do", contentType: "application/json" ...

  9. 发ajax响应json格式数据

    1.maven依赖 <?xml version="1.0" encoding="UTF-8"?> <project xmlns="h ...

随机推荐

  1. bzoj 1880 最短路径图

    #include<bits/stdc++.h> #define LL long long #define fi first #define se second #define mk mak ...

  2. CSS3 之媒体查询Media Query

    Media Queries是CSS3有关媒体查询的属性,有了CSS3 之媒体查询Media Queries就可以进行媒体查询,针对每个不同的媒体进行不同的样式编写.传说中的Web响应式布局就可以毫无压 ...

  3. 湖南大学ACM程序设计新生杯大赛（同步赛）B - Build

    题目描述 In country  A, some roads are to be built to connect the cities.However, due to limited funds, ...

  4. 洛谷P2812 校园网络[数据加强版] [Tarjan]

    题目传送门 校园网络 题目背景 浙江省的几所OI强校的神犇发明了一种人工智能,可以AC任何题目,所以他们决定建立一个网络来共享这个软件.但是由于他们脑力劳动过多导致全身无力身体被♂掏♂空,他们来找你帮 ...

  5. Android Service AIDL

    http://blog.csdn.net/liuhe688/article/details/6400385 在Android中,如果我们需要在不同进程间实现通信,就需要用到AIDL技术去完成. AID ...

  6. PBR Step by Step（ 五）Phong反射模型

    Lamertian模型描述了当光源直接照射到粗糙物体表面时,反射光线的分布情况.在现实中,除了直接光照,还有来自周围环境的间接光照. 直接照射到物体表面的光照,又称为局部光照: 间接照射到物体表面的光 ...

  7. [转]iOS开发new与alloc/init的区别

    1.在实际开发中很少会用到new,一般创建对象咱们看到的全是[[className alloc] init] 但是并不意味着你不会接触到new,在一些代码中还是会看到[className new], ...

  8. React Native 系列(六)

    前言 本系列是基于React Native版本号0.44.3写的.在我们之前的通过props实现组件间传值的时候,大家有没有发现在父组件传递值过去,在子控件获取props的时候没有提示,那么如何能实现 ...

  9. BZOJ4530 BJOI 2014 大融合

    对LCT子树大小进行维护. size表示实子树大小,sz表示虚子树大小. 具体操作是体现在link和splay中,可以看代码. 注意每次做完都要update. By:大奕哥 #include<b ...

  10. [bzoj3625][Codeforces 250 E]The Child and Binary Tree（生成函数＋多项式运算＋FFT）

    3625: [Codeforces Round #250]小朋友和二叉树 Time Limit: 40 Sec  Memory Limit: 256 MBSubmit: 650  Solved: 28 ...