<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 1112 treap树

    思路:我们只要check一遍每个长度为k的区间就好啦,对于一个区间来说的最优值显然是中位数,我们显然要动态求 第k大,所以需要一个二叉搜索树,用treap就好啦. #include<bits/s ...

  2. ubuntu16.04 内核源码编译

    1)下载 首先看一下自己的内核版本 apt-cache search linux-source下载内核代码:sudo apt-get install linux-source-4.10.0 2)解压: ...

  3. phpstorm配置关联php手册

    最近发现有些编辑器可以 选中函数名,通过相应的快捷键就可以调用 浏览器 打开相应 函数的 在线帮助文档. 一番查找,我终于发现 phpStorm 也有相应的功能. 一.自带功能 在编辑器中选中函数名, ...

  4. GeneXus项目启动

    使用GeneXus产品开发项目时,在开始,有一些属性我会经常改一下.我现在使用的GeneXus版本是GeneXus U3,由于在做手机应用的开发,所以一般使用最新的版本,老外那边差不多两个月会有一个u ...

  5. spring完成自动装配

    让spring完成自动装配 Autowiring 解决标签为javaBean注入时难以维护而实现的 下面是几种autowire type的说明: 1,byname:试图在容器中寻找和需要自动装配的属性 ...

  6. 详解Ubuntu Server下启动/停止/重启MySQL数据库的三种方式(ubuntu 16.04)

    启动mysql: 方式一:sudo /etc/init.d/mysql start 方式二:sudo service mysql start 停止mysql: 方式一:sudo /etc/init.d ...

  7. [APIO2018]铁人两项 --- 圆方树

     [APIO2018] 铁人两项 题目大意: 给定一张图,问有多少三元组(a,b,c)(a,b,c 互不相等)满足存在一条点不重复的以a为起点,经过b,终点为c的路径 如果你不会圆方树 ------- ...

  8. [Codeforces #514] Tutorial

    Link: Codeforces #514 传送门 很简单的一场比赛打崩了也是菜得令人无话可说…… D: 一眼二分,发现对于固定的半径和点,能包含该点的圆的圆心一定在一个区间内,求出区间判断即可 此题 ...

  9. 【贪心】【高精度】zoj3987 Numbers

    题意:给你一个数n,让你找m个非负整数,使得它们的和为n,并且按位或起来以后的值最小化.输出这个值. 从高位到低位枚举最终结果,假设当前是第i位,如果m*(2^i-1)<n的话,那么说明这一位如 ...

  10. 什么是ClassLoader

    ClassLoader 做什么的? 顾名思义,它是用来加载 Class 的.它负责将 Class 的字节码形式转换成内存形式的 Class 对象.字节码可以来自于磁盘文件 *.class,也可以是 j ...