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

Question

What I want to be able to do: I have a page setup so that a table is populated with values from the database. 我希望能够做什么：我有一个页面设置，以便使用数据库中的值填充表。 I also generate a button for each of the rows on the table. 我还为表格中的每一行生成一个按钮。 The button is connected to the database to a field called status. 该按钮连接到数据库到名为status的字段。 It is initially at 0. When the button is clicked, I want to be able to update this value by incrementing it by 1.So after the button is clicked on the webpage, the database status value is incremented by 1. 它最初为0.当单击该按钮时，我希望能够通过将其递增1.更新此值。因此，在网页上单击按钮后，数据库状态值将增加1。

I have tried using AJAX for this, but I havent seemed to have much luck. 我曾尝试过使用AJAX，但我似乎没有多少运气。

view.php (Where the table is populated from the database) 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>

As you can see, for each row in the database the table is populated. 如您所见，对于数据库中的每一行，都会填充表。 Here is an image of the webpage: 这是网页的图片：

I did have this code for the AJAX. 我确实有这个代码用于AJAX。 It did give me the correct output in the console of the browser, but I wasnt able to get this value into the process.php page 它确实在浏览器的控制台中给出了正确的输出，但我无法将此值输入process.php页面

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

How would I have it so that as soon as the button is clicked, it updates the value and refreshes the page. 我如何拥有它，以便一旦单击按钮，它就会更新值并刷新页面。 Any help would be greatly appreciated 任何帮助将不胜感激

TLDR; TLDR; When I click the "Pending" button, a value in the database is incremented by 1. 单击“待定”按钮时，数据库中的值将增加1。

Answer 1

Your getStatus() function didn't have break statement. 你的getStatus()函数没有break语句。 for simple POST use $.post . 对于简单的POST使用$.post 。 I have added .status class to your button to use it as selector with jQuery 我已将.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>

In php/process.php 在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 个解决方案

解决方案1
0 2017-04-30 09:01:16

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

问题描述

1 个解决方案

解决方案1 0 2017-04-30 09:01:16

解决方案1
0 2017-04-30 09:01:16