使用Javascript/JQuery获取JSON GET数据

JSON GET data using Javascript/JQuery

我要做的是，使用Javascript/JQuery get请求从MySQL数据库中获取数据，并将这些信息放在HTML表中，以显示哪些转换不包含用户ID。

我很难理解如何在页面上显示JSON get数据，以及如何将其放置在HTML页面的表中。

我在本地主机服务器上使用PHP来检索数据，并且能够检索JSON字符串中的信息。

实现这一点的功能在这里：

function marketplaceShifts(){
include ('config.php');
        $sql = "SELECT *
                FROM shift 
                WHERE user_id IS NULL";
        $result = $conn->query($sql)->fetchAll(PDO::FETCH_ASSOC);
        $return = array();
        foreach ($result as $row){
            $return[]=array('id'=>$row['shift_id'],
                            'User id'=>$row['user_id'],
                            'Date of shift'=>$row['date_shift'],
                            'Start of Shift'=>$row['start_time'],
                            'End of Shift'=>$row['finish_time']);   
        }
        $conn = null;
        header('Content-type: application/json');
        echo json_encode($return);
     }

这是一个函数，用于检索我正在查找的数据，并在使用Postman向我显示包含我所需信息的JSON字符串时起作用。

使用jQuery的$.getJSON()，您可以从URL获取JSON数据，并用它做您想做的事情，比如在页面上呈现它（您也可以在没有库的情况下这样做）。对于这种方法，请确保在页面中包含jQuery。

可以通过以下方式提出请求：

$(document).ready(function(){
    $.getJSON('path/to/your/json.php', displayData);
});

然后，只需创建一个displayData()函数即可完成以下工作：

function displayData(data){
    var table = $('<table></table>'),                 // Create a table element
        row = $('<tr></tr>'),                         // Create a row
        keys = Object.keys(data[0]);                  // Grab the headings
    for(var i=0, l=keys.length; i<l; i++){            // For each of them
        var cell = $('<th></th>').text(keys[i]);          // Create cell, insert text
        row.append(cell);                                 // Append cell to row
    }                                                 // End for
    table.append(row);                                // Append row to table
    for(var i=0, l=data.length; i<l; i++){            // For each data element
        row = $('<tr></tr>');                            // Create row
        for(var j=0, k=keys.length; j<k; j++){           // For each key
          var cell = $('<td></td>').text(data[i][keys[j]]);// Create cell, insert value
          row.append(cell);                                // Append cell to row
        }                                                // End for
        table.append(row);                               // Append row to table
    }                                                 // End for
    $('body').append(table);                          // Append table to body
}

JSON GET data using Javascript/JQuery

JS Fiddle演示