weixin_33711647 2016-04-06 20:16 采纳率: 0%
浏览 29

Ajax调用json

I am having 2 questions 1st : I am trying to run this file but it is not even giving any error not showing result please tell what is the problem 2. I want to get the names in the dropdown as well so i have put select tag but I don't know how to use it to get the list of names...please suggest

My html file

<!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>");
    });

    });
    });

My json file

[{
  "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条回答 默认 最新

  • weixin_33743248 2016-04-06 20:30
    关注
    1. It was not giving error because you've forgot to put "(closing inverted comma) end of type/javascript.

    I've tested this one. Its working with your Json file.

    <!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>

    Now in your script.js

    $(document).ready(function(){
    $.getJSON("data.json",function(obj) {
        $.each(obj, function(key, value){
            $ ("select").append("<option>"+value.name +"</option>");
        });

    });
})
    1. You were using ul and li instead of option tag.

    Update : As you asked in comment.

    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>");
            });
        })
    })
})

    and in html

    <body>
    <button>Click Me</button>
    <select id="dropdown1"></select> 
    <select id="dropdown2"></select> 
</body>
    评论

报告相同问题？

悬赏问题

  • ¥15 关于#matlab#的问题：在模糊控制器中选出线路信息，在simulink中根据线路信息生成速度时间目标曲线（初速度为20m/s，15秒后减为0的速度时间图像）我想问线路信息是什么
  • ¥15 banner广告展示设置多少时间不怎么会消耗用户价值
  • ¥16 mybatis的代理对象无法通过@Autowired装填
  • ¥15 可见光定位matlab仿真
  • ¥15 arduino 四自由度机械臂
  • ¥15 wordpress 产品图片 GIF 没法显示
  • ¥15 求三国群英传pl国战时间的修改方法
  • ¥15 matlab代码代写，需写出详细代码，代价私
  • ¥15 ROS系统搭建请教（跨境电商用途）
  • ¥15 AIC3204的示例代码有吗，想用AIC3204测量血氧，找不到相关的代码。