zoukankan      html  css  js  c++  java
  • jQuery获取JSON格式数据方法

    getJSON方法:

    jQuery.getJSON(url,data,success(data,status,xhr))
    $("button").click(function(){
      $.getJSON("demo_ajax_json.js",function(result_data){
        $.each(result_data, function(index, name_value){
          $("div").append(name_value + " ");
        });
      });
    });
    参数描述
    url 必需。规定将请求发送的哪个 URL。
    data 可选。规定连同请求发送到服务器的数据。
    success(data,status,xhr)

    可选。规定当请求成功时运行的函数。

    额外的参数:

    • response - 包含来自请求的结果数据
    • status - 包含请求的状态
    • xhr - 包含 XMLHttpRequest 对象

    该函数是简写的 Ajax 函数,等价于:

    $.ajax({
      url: url,
      data: data,
      success: callback,
      dataType: json
    });

     示例;

    JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。JSONM文件中包含了关于“名称”和“值”的信息。有时候我们需要读取JSON格式的数据文件,在jQuery中可以使用Ajax或者 $.getJSON()方法实现。

    下面就使用jQuery读取music.txt文件中的JSON数据格式信息。

    首先,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;  
            });  
        });  

     示例来自CSDN《jQuery中使用Ajax获取JSON格式数据

  • 相关阅读:
    stm32 输入捕获
    stm32 输入捕获
    stm32 窗口看门狗 WWDG
    stm32 窗口看门狗 WWDG
    stm32 独立看门狗 IWDG
    Linux开机启动chkconfig命令详解(让MySQL、Apache开机启动)
    linux命令之 用户和群组
    vmware
    linux下安装mysql手记
    wget
  • 原文地址:https://www.cnblogs.com/showersun/p/3742564.html
Copyright © 2011-2022 走看看