如何在单击按钮时使用Ajax异步执行PHP脚本？

一个简单的问题，我已经试着解决了十几个小时，但仍然被卡住了。我对PHP/Javascript相当陌生，所以它可能看起来有点愚蠢，但我自己无法做到这一点。对不起，我的英语不是我的母语

我有一个本地web服务器、MySQL数据库和一个名为index.php的表单，当服务器运行时，它会显示在我的Chrome选项卡中。表单上有一个按钮，用于异步在数据库中插入一些信息，即无需重新加载页面。谷歌说，为了做到这一点，我必须使用Ajax。因此，我做了以下工作：

1） 我在表单上按钮的“onClick”事件上放置了一个Ajax函数

2） 我将PHP“插入脚本”放入“提交”函数中，我将其放入index.PHP或单独的文件Submit.PHP中，其中只包含“插入脚本”

3） 当我点击按钮时，什么也没发生。实际上什么都没有。但是，如果我将一些JavaScript操作符放入Ajax函数本身（例如，一个简单的“alert”（“something”）），它就会工作，并且警报会显示在浏览器中

---

因此，我们的目标是：使用一些Ajax函数来执行PHP脚本，该脚本必须放在某个地方，并且应该使用Ajax调用，并且在不重新加载页面的情况下执行。如果有任何帮助，我们将不胜感激。

我只是给出了如何做的提示。因为我不知道您使用此功能的场景。您可以根据需要更改代码

html Insert.php

---

请发布您的代码。我们不能用你说你做过的事情的清单来工作。请先阅读本主题：您可以发布您的代码。您的PHP脚本
submit.PHP
似乎有一些问题。检查日志并找出问题所在。
<form id="form-search" method="post" action="<?php echo 
  $_SERVER['PHP_SELF'];?>">
    <input type="email" name="email" type="email" id="email" required/>

 <input type="submit" value="submit" id="save" class="submit" />

 $(document).on('click','#save',function(e) {
   e.preventDefault();
  var data = $("#form-search").serialize();
  $.ajax({
         data: data,
         type: "post",
         url: "insert.php",
         success: function(data){
              alert("Data Save: " + data);
         }
});
 });

<?php 
    if($_POST['email']!=""))
    {
    //make create connection variable here
    $con = mysqli_connect("localhost","my_user","my_password","my_db");
    $email=$_POST['email'];
    $sql="INSERT INTO tablename (email) VALUES ('$email')";
    $result=mysqli_query($con,$sql);
    if($result){
    echo "You have been successfully inserted.";
    }else{
        echo "not inserted";
    }
   }
    ?>