添加到數據庫后停留在同一頁面而不刷新它

Question

我有PHP網頁，需要在其中插入一些信息到數據庫中。 插入完成后，它將刷新同一頁面。 但有人告訴我，此過程不切實際，因為您每次都加載頁面的所有HTML ， CSS和JS 。 我應該讓AJAX做到這一點。

我搜索它，並嘗試了以下代碼：

$("#insert").click(function(){
 //get the form values
 var selectType = $('#selectW').val();
 var selectcom = $('#select_at').val();
 var pay = $('#pay').val();     
 var facture = $('#facture').val();     
 var selectcur = $('#select').val(); 

 //make the postdata
 //var postData = 'username='+username+'&name='+name+'&brand='+brand;

 //call your input.php script in the background, when it returns it will call the success function if the request was successful or the error one if there was an issue (like a 404, 500 or any other error status)

     $.ajax({
        url : "insert.php",
        type: "POST",
        data : postData,
        success: function(data,status, xhr)
        {
            //if success then just output the text to the status div then clear the form inputs to prepare for new data
            $("#section2").html(data);
            $('#pay').val('');
            $('#selectcur').val('');
        },
        error: function (jqXHR, status, errorThrown)
        {
            //if fail show error and server status
            $("#section2").html('there was an error ' + errorThrown + ' with status ' + textStatus);
        }
    });// JavaScript Document

這是我的PHP-PDO代碼，在其中刪除了header行，並用echo("something")替換了它們：

if(isset($_POST['insert'])){
    $selectOpt1 = $_POST['currency'];
    if($selectOpt1=="9"){
        $type = $_POST['type'];
        $provider = $_POST['alfa_touch'];
        $pay = $_POST['pay'];
        $facture = $_POST['facture'];
        try{
            $query = "INSERT INTO sales
            (type, provider, pay, facture, date_now, time_now) 
            VALUES
            (:type, :provider, :pay, :facture, :date, now())";
            $stmt = $conn->prepare($query);
            $stmt->bindValue(":type", $type);
            $stmt->bindValue(":provider", $provider);
            $stmt->bindValue(":pay", $pay);  
            $stmt->bindValue(":facture", $facture);
            $stmt->bindValue(":date", date("y-m-d"));
            $count = $stmt->execute();
            //header("location: home.php");
            echo ("Done");
        }
        catch(PDOException $e) {
            echo $e->getMessage();
            //header("location: ../pages/insert_false.php?id=".$projid);
            print_r($conn->errorInfo());

        }


    }
}

現在，當我單擊插入按鈕時，數據已正確添加到MySQL數據庫，但是應用程序保留在insert.php中，並回顯了Done 。 我需要留在同一頁面上。 任何幫助表示贊賞。

編輯

$("#insert").click(function(){
 //get the form values
 var selectType = $('#selectW').val();
 var selectcom = $('#select_at').val();
 var pay = $('#pay').val();     
 var facture = $('#facture').val();     
 var selectcur = $('#select').val(); 

 //make the postdata
 var postData = 'username='+username+'&name='+name+'&brand='+brand;

 //call your input.php script in the background, when it returns it will call the success function if the request was successful or the error one if there was an issue (like a 404, 500 or any other error status)

 $.ajax({
    url : "insert.php",
    type: "POST",
    data : postData,
    success: function(data,status, xhr)
    {
        //if success then just output the text to the status div then clear the form inputs to prepare for new data
        $("#section2").html(data);
        $('#pay').val('');
        $('#selectcur').val('');
    },
    error: function (jqXHR, status, errorThrown)
    {
        //if fail show error and server status
        $("#section2").html('there was an error ' + errorThrown + ' with status ' + textStatus);
    }

});
return false;
});// JavaScript Document

還是一樣的問題。 這是我的HTML表單：

<form name="insertForm" action="insert.php" method="post">

    <tr>
        <td align="center">
          <select id="selectW" name="type">
            <option value="Choose">Choose</option>
            <option value="Dollars">Dollars</option>
            <option value="D & D">D & D</option>
            <option value="Cards">Cards</option>
            <option value="Phones">Phones</option>
            <option value="Acc">Acc</option>
            <option value="Bills">Bills</option>
          </select>
          <!--<select>
          <?php foreach($result5 as $rows){ ?>
            <option value="<?php echo $rows['item_name'] ?>"><?php echo $rows['item_name'] ?></option>
            <?php } ?>
          </select>-->
          </td>
        <td align="center"><select id="select_at" name="alfa_touch">
            <option value="Undefined">Not Required</option>
            <option value="Alfa">Alfa</option>
            <option value="Touch">Touch</option></select></td>
        <td align="center"><input type="text" id="pay" name="pay"/></td>
        <td align="center"><input type="text" id="facture" name="facture" placeholder="في حال دفع الفواتير عبر omt"/></td>
        <td align="center"><select id="select" name="currency">
            <option value="9">LBP</option>
            <option value="10">Dollars</option>
            </select></td>

        <td align="center"><input type="submit" id="insert" name="insert" value="insert" />

      </td>

      </tr>
      </form>   

Answer 1

將preventDefault添加到您的javascript函數中

    Function(e){

    e.preventDefault()

    ...

}

Answer 2

在您的HTML文件中，您在<form>標記中具有action = 'insert.php' ，並且您還click具有id insert button調用了一個函數。

兩者都在做同樣的事情-將值從HTML頁面發送到insert.php 。 如果<form> ，頁面會刷新，因此請使用ajax 。 保留click事件腳本。

1. 從<form>標記中刪除action="insert.php"和method="post" 。
2. 在<button>標簽中更改type = "button" 。

希望這會有所幫助。