使用ajax激活和停用產品

Question

每當用戶單擊它並更改數據庫時，我都嘗試使用ajax將按鈕從活動狀態更改為非活動狀態，反之亦然。 但是代碼似乎不起作用，每當我單擊按鈕時，就會出現錯誤：“某些事情無法正常進行。”。

$query = "SELECT * FROM product";    //query for getting the product from database.
$result = $mysqli->query($query); 
if (!$result) die ("Database access failed: " . mysql_error()); //error message.

$rows = mysqli_num_rows($result);  //getting number of row.

if ($rows > 0)  //Checking whether product exist in the database to shown.
{
    for ($i=0; $i < $rows; $i++)  //loop through all the row.
    { 
        $row = mysqli_fetch_row($result);
        echo '<div id="active">';
        if ($row[8] == 1) //product is actived display Deactive button.
        {
            echo '<form onclick="changeActive()" method="post" id="activeButton">';
            echo '<input type="hidden" name="deactive" value="yes"/>';
            echo '<input type="hidden" name="id"    value="'.$row[0].'" />';
            echo '<input type="hidden" name="image" value="$row[5]" />';
            echo '<input type="submit" name="deactive" value="DEACTIVE PRODUCT" />';
            echo '</form>';
        } // end if statement.
        else   //product is deactived display Active button.
        {
            echo '<form onclick="changeActive()" method="post" id="activeButton">';
            echo '<input type="hidden" name="active" value="yes"/>';
            echo '<input type="hidden" name="id"    value="'.$row[0].'" />';
            echo '<input type="hidden" name="image" value="$row[5]" />';
            echo '<input type="submit" name="active" value="ACTIVE PRODUCT" />';
            echo '</form>';
        } //end else statement
        echo '</div>';
    }
}

這是我的ajax代碼。

request = function(link, target, result)
{
    var changeListener;
    var xhr = new XMLHttpRequest();
    changeListener = function()
    {
        if(xhr.readyState === 4)
        {
            if(xhr.status == 200) 
            {
                target.innerHTML = xhr.responseText;
            } 
            else 
            {
                target.innerHTML = "<p>Something didn't work right.</p>";
            }
        }
        else
        {
            target.innerHTML = "<p>Hold Up...</p>";
        }
    }; 
    xhr.open("GET", link, true);
    xhr.onreadystatechange = changeListener;
    xhr.send(result);
};

changeActive = function()
{
var target;
target = document.getElementById('active');
request("active_deactive.php", target);
    };

和php文件：

<?php
include_once 'connect.php'; //connect to the database
if (isset($_POST['deactive']) && isset($_POST['id'])) //Check whether deactive button is pushed.
{
    $id = $_POST['id'];
    $query = "UPDATE Product SET Active = 0 WHERE ID = '$id'";
    $deactive = $mysqli->query($query);
    echo '<form onclick="changeActive()" method="post" id="activeButton")">';
    echo '<input type="hidden" name="deactive" value="yes"/>';
    echo '<input type="hidden" name="id"    value="'.$row[0].'" />';
    echo '<input type="hidden" name="image" value="$row[5]" />';
    echo '<input type="submit" name="deactive" value="DEACTIVE PRODUCT" />';
    echo '</form>';
}

if (isset($_POST['active']) && isset($_POST['id'])) //Active button is pushed.
{
    $id = $_POST['id'];  //getting the id.
    $query = "UPDATE Product SET Active = 1 WHERE ID = '$id'"; 
    //back for delete the picture file.
    $active = $mysqli->query($query);
    echo '<form onclick="changeActive()" method="post" id="activeButton")">';
    echo '<input type="hidden" name="active" value="yes"/>';
    echo '<input type="hidden" name="id"    value="'.$row[0].'" />';
    echo '<input type="hidden" name="image" value="$row[5]" />';
    echo '<input type="submit" name="active" value="ACTIVE PRODUCT" />';
    echo '</form>';
}

?>

Answer 1

也許您必須看到JQuery https://api.jquery.com/jQuery.ajax/的 AJAX API。這對您的工作如此簡單。 我建議將此API用於與ajax一起使用，而不是與本機XMLHttpRequest對象一起使用。