添加到数据库后，保持在同一页面而不刷新它

Question

I have PHP web page where I need to insert some information to my database. When insert is done, it refresh the same page. But I've been told that this process is not practical because you are loading all HTML, CSS, and JS of your page every time. And I should you AJAX to do that.

I search for it, and tried this code:

$("#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

And here is my PHP-PDO code where I removed the header lines and replaced them with 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());

        }


    }
}

Now, when I click on insert button, the data are added correctly to MySQL database, but, the app stay in insert.php and echo Done. What I need is to stay in the same page. Any help is appreciated.

EDIT

$("#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

Still the same problem. And here is my HTML form:

<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

Add preventDefault to your javascript function

    Function(e){

    e.preventDefault()

    ...

}