<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. 报错org.springframework.dao.InvalidDataAccessResourceUsageException: could not extract ResultSet; SQL [n/a]; nested exception is org.hibernate.exception.SQLGrammarException: could not extract ResultSet"

    org.springframework.dao.InvalidDataAccessResourceUsageException: could not extract ResultSet; SQL [n ...

  2. Good Bye 2014 F - New Year Shopping

    F - New Year Shopping 对于一种特殊的不可逆的dp的拆分方法.. 也可以用分治写哒. #include<bits/stdc++.h> #define LL long l ...

  3. karma+seajs

    下面的介绍以karma能正常运行为前提,看karma系列文章:http://www.cnblogs.com/laixiangran/tag/Karma/ 目录结构 步骤 安装 npm install ...

  4. Java线程池使用和常用参数（待续）

    线程池怎么实现的,核心参数讲一讲? Executors是线程池的工厂类,通过调用它的静态方法如下: Executors.newCachedThreadPool(); Executors.newFixe ...

  5. Linux中磁盘还有空间，但创建文件时提示空间不足

    首先需要知道创建文件时,需要满足两个条件:1.磁盘上还有空间:2.inode号还有剩余. 这两个条件可以分别使用"df -h"以及"df -i"查看使用情况 [ ...

  6. Python实现图片转文字并翻译至剪切板

    一.环境搭建: 1.PySimpleGUI: pip3 install pysimplegui 2.pytesseract需要有tesseract环境才行: 1. 先搭建tesseract: brew ...

  7. ubuntu 安装qq 及解决安装完搜狗输入法不显示键盘的方法

    安装qq: https://zhuanlan.zhihu.com/p/27549700 解决搜狗输入法不显示的问题: http://blog.csdn.net/crystal_zero/article ...

  8. Python中yield和yield from的用法

    yield python中yield的用法很像return,都是提供一个返回值,但是yield和return的最大区别在于,return一旦返回,则代码段执行结束,但是yield在返回值以后,会交出C ...

  9. 【BZOJ 2946】 2946: [Poi2000]公共串 （SAM）

    2946: [Poi2000]公共串 Time Limit: 3 Sec  Memory Limit: 128 MBSubmit: 1063  Solved: 469 Description      ...

  10. android 启动流程

    韩梦飞沙  韩亚飞  313134555@qq.com  yue31313  han_meng_fei_sha adb shell 后  用 ps 命令 回车 可以看到 运行的进程. 如下结果: ct ...