在表中显示 J 查询的结果

Question

我希望我的jquery的结果显示在我在另一个文件中的表中。我已尝试更改表的ID，但我的表来自引导程序，因此如果我更改 ID，css 会更改。我不知道还能做什么。这些是我的文件配置.php<?php    $servername = "localhost";$username = "root";$password = "";$db = "stock-stock-stock";// Create connection$conn = mysqli_connect($servername, $username, $password, $db );// Check connectionif (!$conn) {    die("Connection failed: " . mysqli_connect_error());}?>read_students.phpinclude_once('../config.php');$sql = "SELECT * FROM games WHERE status='available'";$query = $conn->query($sql);$result = array("data" => array());while($data = $query->fetch_assoc()){    $checkbox = '<input type="checkbox" class="checkbox" id="checkbox_' . $data['id'] . '" value="' . $data['id'] . '" name="groupCheckBox" onchange="enableDeleteAllButton(this)">';    $image = '<img width="100" height="100" class="" src="' . $data['game_pic'] . '">';    $buttons = '<a href="game-update.php?$id='. $data['id'] . '" class="btn btn-info btn-sm"><i class="fa fa-edit" aria-hidden="true"></i></a><a onclick="removeGame(' . $data['id'] . ')" class="btn btn-danger btn-sm"><i class="fa fa-trash" aria-hidden="true"></i></a>';    // need "data" string    $result["data"][] = array(        $checkbox,        $data['id'],        $data['game_name'],        $data['players'],        $data['game_descrip'],        $image,        $data['status'],        $buttons,    );}echo json_encode($result);?>

Answer 1

根据我对你的代码的理解，你的PHP代码正在返回这样的数据。

<?php

    $result["data"][] = array(

        'checkbox 1',

        'id 1',

        'game_name 1',

        'players 1',

        'game_descrip 1',

        'image 1' ,

        'status 1',

        'buttons 1'

    );

    $result["data"][] = array(

        'checkbox 2',

        'id 2',

        'game_name 2',

        'players 2',

        'game_descrip 2',

        'image 2' ,

        'status 2',

        'buttons 2'

    );

    echo json_encode($result); // returns data to ajax call

?>

我看到的问题也存在于您的ajax调用，格式中，请尝试像下面一样更改它。

$（document）.ready（函数（） { $.ajax（{ 类型： “POST”， url： “read_students.php”， 成功： 函数（响应） { var jsonData = 响应; 控制台.log（jsonData）; // 此数据将如下所示 game_descrip game_name game_descrip game_name。“按钮 2”]]} } }）;});

一旦你得到来自ajax调用的响应，现在让我们处理你的数据。

var jsonData = {"data":[["checkbox 1","id 1","game_name 1","players 1","game_descrip 1","image 1","status 1","buttons 1"],["checkbox 2","id 2","game_name 2","players 2","game_descrip 2","image 2","status 2","buttons 2"]]}

jsonData.data.forEach(function(v, i){

    var tbody = $("#myTables").find('tbody'); debugger;

  tbody.append("<tr><td>"+v[0]+"</td><td>"+v[1]+"</td><td>"+v[2]+"</td><td>"+v[3]+"</td><td>"+v[4]+"</td><td>"+v[5]+"</td><td>"+v[6]+"</td></tr>")

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<table class="table table-bordered" id="myTables" width="100%" cellspacing="0">

  <thead>

    <tr align="center">

      <th>Game ID</th>

      <th>Game Name</th>

      <th>Category</th>

      <th>Description</th>

      <th>Photo</th>

      <th>Availability</th>

      <th>Action</th>

    </tr>

  </thead>

  <tbody>

  </tbody>

</table>