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

我有一个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

代码，我删除了

标题

行，并将它们替换为

echo（“某物”）

：

现在，当我单击insert按钮时，数据被正确地添加到MySQL数据库中，但是，应用程序仍然停留在insert.php和echo

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>   

选择
美元
D&D
卡
电话
行政协调会
账单
不需要
阿尔法
触碰
LBP
美元

将preventDefault添加到javascript函数中

    Function(e){

    e.preventDefault()

    ...

}

---

在

HTML

文件中，您在

标记中有

action='insert.php'

，并且您还在

按钮上调用一个函数

单击
具有
id
插入

两者都在做同样的事情——将值从
HTML
页面发送到
insert.php
。在
的情况下，页面会被刷新，所以选择
ajax
。
保留
单击
事件的脚本

从
标记中删除
action=“insert.php”
和
method=“post”
更改标签中的
type=“button”

希望这会有所帮助。
哪个文件是
insert.php
，应用程序如何“保持”在那里？您的意思是当您单击按钮时，它会重定向到insert.php吗？是的，数据已成功添加到db中，我们将停留在insert.php中，其中只包含php代码和echo“Done”。AJAX应该允许我停留在我的web表单不应停留在insert中的页面上。phpha您是否检查了使用浏览器控制台发送的内容？因为我看到jQuery函数中没有设置var postData。此外，您没有在post数据中发送“插入”。因此，代码不会输入if语句。您的表单中是否有
action
属性？如果有，则包括
返回false在javascript函数的末尾。是的，我有一个表单操作
    Function(e){

    e.preventDefault()

    ...

}