Question

我需要使用Jquery和AJAX来访问具有此关联数组的API-

{"1":"alamiz builder","2":"souroy builder","3":"vin selv builder","4":"gol mat builder","5":"sm dev builder","6":"zahi builder"}*

由于此数组具有数字作为键，因此我很难在表单元素中显示每个值。

我尝试使用$(selector).html(data["1"])，但这只是显示数据的第一个字符。

我当前的代码是-

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
      $.ajax({
         type: 'GET',
         url: 'https://interview.switchme.in/js/2019/builder_json.php',
         success: function(data){
                 $("#b1").html(data["1"]);    
         }
      });
</script>
</head>
<body>
    <div class='builder_checkbox'>
        <div>Builders Filter 2</div>
        <div id="b1"><input type="checkbox"></div>
        <div id="b2"><input type="checkbox"></div>
        <div id="b3"><input type="checkbox"></div>
        <div id="b4"><input type="checkbox" checked></div>
    </div>
</body>
</html>

我希望复选框动态显示API中的所有数据。这样-

<div id="b1"><input type="checkbox">alamiz builder</div>

Answer 1

您需要使用console.log（data）来获取有关数据结构的详细信息。

我尝试用您的JSON对象进行复制，它可以正常工作。

还需要添加Ajax调用

contentType: 'application/json',
 dataType: "json",

已更新：

使用$ .ajax（）时，CORS会出现问题

尝试使用$.getJSON()，它有效

    $.getJSON('https://interview.switchme.in/js/2019/builder_json.php',function(data){
         //console.log(data);
         $("#b1").html(data["1"]); 
})

<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>

      
 

$.getJSON('https://interview.switchme.in/js/2019/builder_json.php',function(data){
     //console.log(data);
     $("#b1").html(data["1"]); 
})
 </script>
</head>
<body>
    <div class='builder_checkbox'>
        <div>Builders Filter 2</div>
        <div id="b1"><input type="checkbox"></div>
        <div id="b2"><input type="checkbox"></div>
        <div id="b3"><input type="checkbox"></div>
        <div id="b4"><input type="checkbox" checked></div>
    </div>
</body>
</html>

Answer 2

您的$.ajax返回的JSON是一个字符串-您需要使代码将其视为JavaScript对象，因此请将dataType: "json"添加到options对象：

$.ajax({
  type: 'GET',
  url: 'https://interview.switchme.in/js/2019/builder_json.php',
  dataType: "json",
  success: function(data) {
    $("#b1").html(data["1"]);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<div class='builder_checkbox'>
  <div>Builders Filter 2</div>
  <div id="b1"><input type="checkbox"></div>
  <div id="b2"><input type="checkbox"></div>
  <div id="b3"><input type="checkbox"></div>
  <div id="b4"><input type="checkbox" checked></div>
</div>

Answer 3

尝试这种方式：（而且请记住，JavaScript代码必须在标记的上方）

    <div class='builder_checkbox'>
        <div>Builders Filter 2</div>
        <div id="b1"><input type="checkbox">
           <span></span> </div>
        <div id="b2"><input type="checkbox">            <span></span> 
       </div>
        <div id="b3"><input type="checkbox">            <span></span> 
       </div>
        <div id="b4"><input type="checkbox"checked>
           <span></span>
       </div>
    </div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
<script>
      $.ajax({
         type: 'GET',
         url: 'https://interview.switchme.in/js/2019/builder_json.php',
         success: function(value){
            
           var data = JSON.parse(value);
            
  
                 $("#b1 span").text(data["1"]);
              $("#b2 span").text(data["2"]);
              $("#b3 span").text(data["3"]);
              $("#b4 span").text(data["4"]);
            
         }
      });
</script>

如何使用具有关联数组的API填写表单？

3 个答案: