Question

我希望能做什么：我有一个页面设置，以便使用数据库中的值填充表。我还为表格中的每一行生成一个按钮。该按钮连接到数据库到名为status的字段。它最初为0.当单击该按钮时，我希望能够通过将其递增1.更新此值。因此，在网页上单击按钮后，数据库状态值将增加1.

我尝试过使用AJAX，但我似乎没有多少运气。

view.php（表格从数据库中填充）

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>View</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
  </head>

  <body>
    <?php
      include 'php/connect.php';
      include 'php/status.php';

      function getStatus($num){
        $status = "";
        switch ($num) {
          case ($num == 0):
            $status = "Pending";
          case ($num == 1):
            $status = "Completed";
          default:
            $status = "Pending";
        }
        return $status;
      }
    ?>
    <div class="container">
      <div class="row">
        <div class="col-md-12 center-block">
          <h1>View the Commissions</h1>
          <div class="panel panel-default">
            <div class="panel-heading">Commissions</div>
            <div class="panel-body">
              <p></p>
            </div>
            <table class="table">
              <thead>
                <tr>
                  <th>#</th>
                  <th>Alias</th>
                  <th>Description</th>
                  <th>Price</th>
                  <th>Status</th>
                </tr>
              </thead>
              <tbody>
                <?php
                $query = mysqli_query($connect, "SELECT * FROM orders") or die(mysql_error());
                while ($row = mysqli_fetch_array($query)) {
                  echo "<tr>";
                  echo "<th scope=\"row\">";
                  echo $row['orderID'];
                  echo "</th>";
                  echo "<th>".$row['alias']."</th>";
                  echo "<th>".$row['description']."</th>";
                  echo "<th>$".$row['price']."</th>";
                  echo "<th><button type=\"button\" class=\"btn btn-default btn-info\" name=\"" .$row['orderID']. "\">".getStatus($row['status'])."</button></th>";
                  echo "</tr>";
                }
                ?>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
    <script type="text/javascript">

    </script>
</html>

如您所见，对于数据库中的每一行，都会填充表。这是网页的图片：

我确实有这个代码用于AJAX。它确实在浏览器的控制台中给出了正确的输出，但我无法将此值输入process.php页面

$.ajax({
  url: 'php/process.php',
  type: 'POST',
  data: {
    orderID: obj.id
  },
  success: function (data) {
    console.log(data);
  }
});

我如何拥有它，以便在单击按钮后，它会更新值并刷新页面。任何帮助将不胜感激

TLDR;当我点击＆＃34;待定＆＃34;按钮，数据库中的值增加1。

Answer 1

您的getStatus()函数没有break声明。简单POST使用$.post。我已将.status类添加到您的按钮，以将其用作jQuery

的选择器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>View</title>
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/bootstrap.css">
</head>

<body>
<?php
include 'php/connect.php';
include 'php/status.php';

// fixed this function by adding break and removing $num from case statement
function getStatus($num)
{
    $status = "";
    switch ($num) {
        case 0:
            $status = "Pending";
            break;
        case 1:
            $status = "Completed";
            break;
        default:
            $status = "Pending";
    }
    return $status;
}

?>
<div class="container">
    <div class="row">
        <div class="col-md-12 center-block">
            <h1>View the Commissions</h1>
            <div class="panel panel-default">
                <div class="panel-heading">Commissions</div>
                <div class="panel-body">
                    <p></p>
                </div>
                <table class="table">
                    <thead>
                    <tr>
                        <th>#</th>
                        <th>Alias</th>
                        <th>Description</th>
                        <th>Price</th>
                        <th>Status</th>
                    </tr>
                    </thead>
                    <tbody>
                    <?php
                    $query = mysqli_query($connect, "SELECT * FROM orders") or die(mysql_error());
                    while ($row = mysqli_fetch_array($query)) : ?>
                        <tr>
                            <th scope="row"><?php echo $row['orderID']; ?></th>
                            <th><?php echo $row['alias']; ?></th>
                            <th><?php echo $row['description']; ?></th>
                            <th><?php echo $row['price']; ?></th>
                            <th>
                                // added .status class here
                                <button type="button" class="btn btn-default btn-info status"
                                        name="<?php echo $row['orderID']; ?>"><?php echo getStatus($row['status']); ?></button>
                            </th>
                        </tr>
                    <?php endwhile; ?>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript">
    // the AJAX for updating the status
    $('.status').on('click', function () {
        var id = $(this).attr('name');
        var btn = $(this);
        $.post('php/process.php', {orderId: id}, function (response) {
            var res = JSON.parse(response);
            if (res.results == true) {
                btn.html('Completed');
            }
        })
    })
</script>
</html>

在php/process.php

<?php

include 'php/connect.php';

if (isset($_POST['orderId'])) {
    $orderId = $_POST['orderId'];
    $sql = "UPDATE `orders` SET `status`= 1 WHERE `orderID` = $orderId";
    if (mysqli_query($connect, $sql)) {
        echo json_encode(['results' => true]); // when update is ok
    }else {
        echo json_encode(['results' => false]); // when update fail
    }
}

在生成的按钮单击时增加数据库中的值

1 个答案: