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

我正在尝试创建一个shipping status页面，我想要一个真正基本的功能。我想能够按下这个页面上的一个按钮，上面写着“Mark Shipped”。然后我希望按钮的文本更改为“已发货”。然后，我希望该选项将其状态更改回“Mark Shipped”，但有一个警报阻止它这样做，直到您单击“继续”或类似的内容

我正试图用php和ajax来实现这一点。我以前从未使用过ajax，也没有使用过太多的JS，所以我不太确定如何同时使用这两种技术

我已经创建了一个数据库表，其中包含“已发货”状态的状态，因此每当我单击“标记为已发货”按钮时，“已发货”一词将进入我的db表，并带有订单id，然后我希望“已发货”一词回显到该按钮中，并无限期保留在该按钮中。php查询在我更改e 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>

如果（$result）{
而（$row=mysqli\u fetch\u assoc（$result））：
?>
唛头装运
输出为“已装运标记”的表已硬编码为“已装运标记”"因此重新加载不会显示db中的状态？我不确定如何使其显示为Mark Shipped，并在按其他键时更改。我认为还有一些错误。将为所有条目触发按钮
onclick
事件。因为表中没有明确触发哪个按钮的标识符。如何我可以阻止吗？您应该从表单中收集订单id并将其传递给ajax请求。给我一些时间，我会尝试发布正确的答案。
<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
//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;
   ?>