为了账号安全,请及时绑定邮箱和手机立即绑定

在表中显示 J 查询的结果

在表中显示 J 查询的结果

慕桂英3389331 2022-09-23 09:56:19

我希望我的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 connection

if (!$conn) {

    die("Connection failed: " . mysqli_connect_error());

}

?>


read_students.php


include_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);


?>



查看完整描述

1 回答

?
跃然一笑

TA贡献1485条经验 获得超6个赞

根据我对你的代码的理解,你的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>


查看完整回答
反对 回复 2022-09-23
  • 1 回答
  • 0 关注
  • 7 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信