Question

我对JSON和AJAX完全陌生。我正在尝试从MYSQL查询中获取结果并使用结果更新DIV。我使用的是在线找到的不同代码段，并且可以将结果JSON编码，但似乎无法对其进行任何操作？

要从MYSQL获取并以JSON输出的代码或文件名API.php是：

include 'db.php';  
$sth = mysqli_query($con,"SELECT * FROM $tableName");
$rows = array();
while($r = mysqli_fetch_assoc($sth)) {
    $rows[] = $r;
}

 echo json_encode($rows);

这样输出

[{"user_id":"320326","type":"BUSINESS","business":"Business name","f_name":"DAVE","l_name":"TEST","email":"test@test.com","token":"","l_number":"0","m_number":"","password":"work","joined":"2018-07-06","sms_opt":"","instant_opt":"","instant_id":"","email_opt":"","offers_opt":"]

页面上加载时更改的HTML是：

<div id="output">this element will be accessed by jquery and this text replaced</div>

加载并获取无用的信息的代码是：

$(function () 
  {
    $.ajax({                                      
      url: 'api.php',                  //the script to call to get data          
      data: "",                        //you can insert url argumnets here to pass to api.php
                                       //for example "id=5&parent=6"
      dataType: 'json',                //data format      
      success: function(data)          //on recieve of reply
      {
        var user_id = data[0];              //get id
        var f_name = data[2];           //get name

        $('#output').html("<b>id: </b>"+user_id+"<b> name: </b>"+f_name); //Set output element html
        //recommend reading up on jquery selectors they are awesome 

      } 
    });
  });

理想情况下，我想在单击按钮然后相应地使用数据时进行测试，我不知道我要去哪里，已经尝试了一些方法，但是许多在线示例太复杂了，这是非常基本的通过它的外观。预先感谢。

Answer 1

由于收到了大量物体，因此必须对其进行迭代：

var success = function(data) {
    var html = '';
    for (var i = 0; i<data.length; i++) {
      var obj = data[i];
      html += '<b>id: </b>'+obj.user_id+' <b>name: </b>'+obj.f_name+'<br>'
    }
    $('#output').html(html);
}

success([{"user_id":"320326","type":"BUSINESS","business":"Business name","f_name":"DAVE","l_name":"TEST","email":"test@test.com","token":"","l_number":"0","m_number":"","password":"work","joined":"2018-07-06","sms_opt":"","instant_opt":"","instant_id":"","email_opt":"","offers_opt":""}])

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="output">this element will be accessed by jquery and this text replaced</div>

所以您的JS看起来像这样：

$(function () 
  {
    $.ajax({                                      
      url: 'api.php',                  //the script to call to get data          
      data: "",                        //you can insert url argumnets here to pass to api.php
                                       //for example "id=5&parent=6"
      dataType: 'json',                //data format      
      success: function(data)          //on recieve of reply
      {
        var html = '';
        for (var i = 0; i<data.length; i++) {
           var obj = data[i];
           html += '<b>id: </b>' + obj.user_id +
                   ' <b>name: </b>' + obj.f_name + '<br>'
        }
        $('#output').html(html);
      } 
    });
  });

使用JSON从MYSQL获取结果并使用它

1 个答案: