使用Ajax和PHP將結果插入我的數據庫中，然后顯示它

Question

我正在嘗試創建運輸狀態頁面，並且我希望一個真正的基本功能能夠正常工作。 我希望能夠按此頁面上顯示“已發貨標記”的按鈕。 然后，我希望按鈕的文本更改為“ Shipped”。 然后，我希望該選項將其狀態更改回“標記為已發貨”，但有一個警報阻止它執行此操作，直到您單擊“繼續”或類似的操作。

我試圖用php和ajax做到這一點。 我以前從未使用過Ajax或使用過太多的JS，因此我不太確定如何同時使用兩者。

我已經創建了一個數據庫表，其中包含“已發貨”狀態的狀態，因此，每當我單擊“標記為已發貨”按鈕時，單詞“已發貨”都將進入帶有訂單ID的數據庫表中，然后我要這個詞運回了那個按鈕，並無限期地停留在那里。 直到我更改了Ajax腳本的操作，PHP查詢的效果都很好。

這是我的桌子。

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腳本。 起初，我以“裝運”為行動，但並沒有保存狀態。 當我重新加載頁面時，它將返回到“標記為已發貨”。

<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或兩者兼而有之的方式。 我的代碼的哪個區域錯誤？

Answer 1

這似乎不正確。

 data: {action: "<?php echo $shipped; ?>", order: order_id},

我會嘗試將參數添加到ajax腳本中，並將其用於POST，而不是嘗試直接訪問php變量。

    function insert(anAction, anOrder){
        $.ajax({
           url: 'shippingStatusSend.php',
           dataType: 'json',
           type: "POST",
           data: ({action: anAction, order: anOrder}),
        });
    }   

然后，在按鈕中，我將在onclick中調用該函數

<button id="some_button" onclick="insert(<?php echo $row['action'] . ',' . $row['order_id']; ?>)"

Answer 2

如果您要使用JQuery / Ajax，我將嘗試擺脫使用內嵌JavaScript（例如onclick =“”）的麻煩

我會去使用這樣的東西

Ajax的JSON對象：

$( "#buttonID" ).on( "click", function() {
     var newObject = {};
     newObject.order_id = "newOrderID";

     $.post("phpFile", 
     {
         action: "newAction",
         sendObject: JSON.stringify(newObject)
     })
     .success(function(data) 
     {
        // Returned data, you can use this to display whatever you need
        // on the page
        console.log(data);
     });
});

PHP代碼：

    $action = $_POST['action'];

    if ($action == 'newAction') 
    {
        $receivedObject = json_decode($_POST['sendObject'], true);
        $orderID = $receivedObject['order_id'];

        echo $orderID;
    }

現在，您只需要使用此代碼並將其用於更新數據或將數據插入數據庫，這是使用Ajax將其發送到php的基本代碼