<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. ie6 css 返回顶部图标固定在浏览器右下角

    比较常用记录一下. #e_float{ _position:absolute; _bottom:auto; _right:50%; _margin-right:-536px; _top:express ...

  2. Java利用Redis实现消息队列

    应用场景 为什么要用redis?二进制存储.java序列化传输.IO连接数高.连接频繁 一.序列化 这里编写了一个java序列化的工具,主要是将对象转化为byte数组,和根据byte数组反序列化成ja ...

  3. file.listFiles()按文件大小、名称、日期排序方法

    原文地址:http://blog.csdn.net/dezhihuang/article/details/53287602 按照文件大小排序 public static void orderByLen ...

  4. Java常用工具类之时间转换

    import java.text.DecimalFormat; import java.text.ParseException; import java.text.SimpleDateFormat; ...

  5. java反射，代码优化

    java的反射机制属实强大,能解决好些问题 在接手别人写的代码的时候,有一个bean类的get方法特别low,我都看不下去 重复代码写五遍,我都觉得太不合理.之后将其中代码抽取出来修改了下. publ ...

  6. 洛谷——P1821 [USACO07FEB]银牛派对Silver Cow Party

    P1821 [USACO07FEB]银牛派对Silver Cow Party 题目描述 One cow from each of N farms (1 ≤ N ≤ 1000) conveniently ...

  7. 【CF contest/792/problem/E】

    E. Colored Balls time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  8. 解决关于stack溢出的问题

    开发中经常遇到: 前端遇到Uncaught RangeError: Maximum call stack size exceeded错误 后台遇到java.lang.OutOfMemoryError: ...

  9. 【并查集】BZOJ1370- [Baltic2003]Gang团伙

    [题目大意] 在某城市里住着n个人,任何两个认识的人不是朋友就是敌人,而且满足: 1. 我朋友的朋友是我的朋友: 2. 我敌人的敌人是我的朋友: 所有是朋友的人组成一个团伙.告诉你关于这n个人的m条信 ...

  10. http隧道的研究

    1.reDuh为什么要bind一个udp,如何维持tcp的? 似乎只要不close,就不会关闭打开过的socket 2.如果web超时,或者脚本超时,是否意味着会断开连接. 似乎并不会 3.是否针对可 ...