个人中心
gpt4 book ai didi

javascript - 单击生成的按钮时数据库中的增量值

转载 作者：行者123 更新时间：2023-11-30 22:00:04 25 4
gpt4 key购买 nike

我想做的事情:我有一个页面设置，以便用数据库中的值填充一个表。我还为表格中的每一行生成一个按钮。该按钮连接到数据库的一个名为状态的字段。它最初为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>

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

enter image description here

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

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

我该怎么做才能在单击按钮后立即更新值并刷新页面。任何帮助将不胜感激

TLDR；当我单击“待处理”按钮时，数据库中的值会增加 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
    }
}

关于javascript - 单击生成的按钮时数据库中的增量值，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/43681945/

25 4 0
文章推荐： mysql - 区分大小写
文章推荐： mysql - 标准中的锁定模式 PESSIMISTIC_WRITE 与选择更新
文章推荐： mysql - 在 MariaDB 5.5.52 中使用生成列
文章推荐： mysql - spring boot 1.5.2 和 EntityScan 有冲突
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com