Question

我正在尝试创建送货状态页面，我想要一个非常基本的功能。我希望能够按下此页面上显示“Mark Shipped”的按钮。然后我希望按钮的文本更改为“已发货”。然后，我想要选择将其状态更改回“Mark Shipped”，但是在您点击Proceed或类似的东西之前，请先发出警告阻止它执行此操作。

我试图用php和ajax做这个。我之前从未使用过Ajax或过多使用过JS，所以我不太清楚如何同时使用这两个。

我创建了一个数据库表，它将保存“已发货”状态的状态，因此每当我点击“标记为已发货”按钮时，“已发货”一词将进入我的数据库表中，其中包含订单的ID和然后我希望发出的这个词回显到那个按钮并无限期地保留在那里。 php查询工作正常，直到我更改了Ajax脚本的操作。

所以这是我的桌子......

if( $result ){  
while($row = mysqli_fetch_assoc($result)) :
?>
                 <form method="POST" action="shippingStatus.php">
                    <tr>
                        <td class="tdproduct"><?php echo $row['order_id']; ?> </td>
                        <td class="tdproduct"><?php echo $row['date_ordered']; ?> </td> 
                        <td class="tdproduct"><?php echo $row['customer_name']; ?> </td>
                        <td class="tdproduct"><?php echo $row['streetline1'] . "<br />" . $row['streetline2'] . "<br />" . $row['city'] . ", " . $row['state'] . " " . $row['zipcode']; ?> </td>
                        <td class="tdproduct"><?php echo $row['product_name']; ?> </td>
                        <td class="tdproduct"><button data-text-swap="Shipped">Mark Shipped</button></td>
                        <input type="hidden" name="product_id" value="<? echo $row['id']; ?>"/>
                        <td class="tdproduct"><input name="delete" type="submit" value="DELETE "/></td>
                    </tr>
                </form>
<?php   
  endwhile; 
  }
?>
                </table>

这是我的Ajax脚本。起初我已经'运送'作为行动，但它没有保存状态。当我重新加载页面时，它会回到'Mark Shipped'。

<script>
$("button").on("click", function(e) {
    e.preventDefault()
    var el = $(this);
    $.ajax({
        url: "shippingStatusSend.php",
        data: {action: "<?php echo $shipped; ?>", order: order_id},
        type: "POST",
        dataType: "text"
        }).fail(function(e,t,m){
        console.log(e,t,m); 
    }).done(function(r){
        //Do your code for changing the button here.
        //Getting Shipping Status button to chance from 'mark as shipped' to 'shipped'
        el.text() == el.data("text-swap") 
        ? el.text(el.data("text-original")) 
        : el.text(el.data("text-swap"));
    });
});
</script>

我的php在一个名为shippingStatusSend的页面中：

<?php
//connection to db
$con = mysqli_connect("localhost", "root", "", "bfb"); 

//Check for errors  
if (mysqli_connect_errno()) {
    printf ("Connect failed: %s\n", mysqli_connect_error());
    exit();
}
        $order_id = trim($_POST['order_id'] );
        $status = trim($_POST['action'] );
        $shipped = "Shipped";
        $markshipped = "Mark Shipped";

    /* create a prepared statement */
    if ($stmt = mysqli_prepare($con, "INSERT INTO shippingStatus (order_id, status, date_Shipped) VALUES (?, ?, NOW())")) {

    /* bind parameters for markers */
                $stmt->bind_param('is', $order_id, $status);
            /* execute query */
            $stmt->execute();
            echo $shipped;

        /* close statement */
        mysqli_stmt_close($stmt);
            }

            while($row = mysqli_fetch_assoc($stmt)){
            $shipped = $row['status'];
            $markshipped = "Mark Shipped";
            }
            else 
            echo $markshipped;
   ?>

我不确定我做错了什么，有人能指出我的错误方向吗？这是我的PHP代码或我尝试使用Ajax或两者的方式。我的代码哪个区域错了？

使用ajax获取php数据库结果，然后在按钮中显示结果

0 个答案: