对json的Ajax调用

Ajax call to json

本文关键字：调用 Ajax json      更新时间：2024-01-30

我有两个问题第一：我试图运行这个文件，但它甚至没有给出任何错误，没有显示结果请告诉我问题出在哪里2.我也想在下拉列表中得到名字，所以我放了select标签，但我不知道如何使用它来获得名字列表。。。请推荐

我的html文件

<!doctype html>
<html>
    <head>
        <meta charset="UTF-8">
        <meta content="utf-8" http-equiv="encoding">
        <title>D3</title>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
        <script src="my_script.js" type="text/javascript></script>
     </head>

    <body>
 <button type="button">Click Me!</button> 
         <select>
          </select> 
            </body>
    </html>
My script.js file
    $("button").click(function() {
    $.getJSON("data.json",function(obj) {
    $.each(obj, function(key, value){
    $ ("ul").append("<li>"+value.name +"</li>");
    });
    });
    });

我的json文件

[{
  "name": "obs",
  "date": "1458834026000"
  "attr001": "brs1"
  "attr002": "crs1"
  "attr003": "drs1"
}, {
  "name": "hid",
  "date": "1458774000000"
  "attr001": "ffrs1"
  "attr002": "grrs1"
  "attr003": "mno1"
}, {
  "name": "qwe",
  "date": "1425744000000"
  "attr001": "klm1"
  "attr002": "wer1"
  "attr003": "iop1"
}, {
  "name": "rty",
  "date": "1458774000000"
  "attr001": "yrs1"
  "attr002": "qws1"
  "attr003": "prs1"
}]
  1. 它并没有给出错误，因为您忘记了在type/javascript的末尾放"（闭合的倒逗号）

我测试过这个。它正在处理您的Json文件。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <meta content="utf-8" http-equiv="encoding">
    <title>D3</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
    <script src="my_script.js" type="text/javascript"></script>
</head>
<body>
    <button>Click Me</button>
    <select>
    </select> 
</body>
</html>

现在在您的script.js 中

$(document).ready(function(){
    $.getJSON("data.json",function(obj) {
        $.each(obj, function(key, value){
            $ ("select").append("<option>"+value.name +"</option>");
        });
    });
})
  1. 您使用的是ul和li，而不是option标记

更新：如您在评论中所问。

script.js

jQuery(function(){
    $(document).on("click","button",function() {
    // alert('hi')
        $.getJSON("data.json",function(obj) {
            $.each(obj, function(key, value){
                $ ("#dropdown1").append("<option value="+key+">"+value.name +"</option>");
            });
        });
    });
    $(document).on('change','#dropdown1',function(){
        //do some ajax call and put the data into another dropdown e.g.,
        $.get('data.json',function(obj){
            obj = JSON.parse(obj)
            $.each(obj, function(key, value){
                $ ("#dropdown2").append("<option value="+key+">"+value.name +"</option>");
            });
        })
    })
})

和在html 中

<body>
    <button>Click Me</button>
    <select id="dropdown1"></select> 
    <select id="dropdown2"></select> 
</body>
相关文章：