Php 使用AJAX提交表单时出错

我创建了一个包含表单的php文件。表单接受输入，它有4个按钮来添加、显示、更新和删除数据库中的记录

然后单击另一个php文件，该文件读取用户数据并根据提交按钮进行操作

我希望在单击submit按钮时，在第一个php文件中显示输出Success/Error。 它需要AJAX，但我对它还不熟悉，不知道如何让它工作

另外，如果从服务器端php文件接收的数据是json格式的，如何在第一个php文件中读取它

<form id="form" class="col s12"><!--  action="submit.php">-->
  <div class="row">
    <div class="input-field col s12">
      <input id="id" name="id" type="text" class="validate">
      <label for="id">ID:</label>
    </div>
  </div>
<div class="row">
    <div class="input-field col s12 m6">
      <input id="firstname" name="firstname" type="text" class="validate">
      <label for="firstname">FIRST NAME:</label>
    </div>
    <div class="input-field col s12 m6">
      <input id="lastname" name="lastname" type="text" class="validate">
      <label for="lastname">LAST NAME:</label>
    </div>
  </div>
<div class="row">
    <div class="col s12 m3">
       <input type="submit" value="Add" name="add" id="add" class="btn waves-effect" >
    </div>
    <div class="col s12 m3">
       <input type="submit" value="Display" name="display" id="display" class="btn waves-effect">
    </div>
    <div class="col s12 m3">
       <input type="submit" value="Update" name="update" id="update" class="btn waves-effect">
    </div>
    <div class="col s12 m3">
       <input type="submit" value="Delete" name="delete" id="delete" class="btn waves-effect">
    </div>
  </div>
</form>

这是表格

我试过：

blog.teamtreehouse.com/create-ajax-contact-forhttp://stackoverflow.com/questions/16616250/form-submit-with-ajax-passing-form-data-to-php-without-page-refreshm

还有更多的例子，但没有一个有效

<script>

$(document).ready(function(){
            $("#form").submit(function(){
//                      event.preventDefault();

            $.ajax({
                    url: "submit.php",
                    type: "POST",
                    data: $("#form").serialize(),
                    dataType: "json",
                    success: function(response)
                    {
                            var data = $.parseJSON(response);
//                              var data = JSON.parse(response);
//                              console.log(data);
                            alert(data.msg);
                    },
                    error: function(xhr, status, thrown)
                    {
//                              alert(status);
                            console.log("xhr= " + xhr);
                            console.log("status= " + status);
                            console.log("error= " + thrown);
//                              console.log(response);
                    }
            });
            });
            return false;
       });
</script>

此外，php文件只发送json格式的数据

if(isset($_POST['add']) AND !empty($id))
{

try {

    $conn = $GLOBALS['pdo'];

    $stmt = $conn->prepare("INSERT INTO user (id, firstname, lastname, email, reg_date) VALUES (:id, :firstname, :lastname, :email, :reg_date)");

    $stmt->bindParam(':id', intval($id));
    $stmt->bindParam(':firstname', $firstname);
    $stmt->bindParam(':lastname', $lastname);
    $stmt->bindParam(':email', $email);
    $stmt->bindParam(':reg_date', $reg_date);

    $stmt->execute();
    if($stmt)
    {
//              echo "<script type='text/javascript'>alert('Successfully Added!');</script>";
            return json_encode(array('error' => 0, 'msg' => 'Added user'));
//              return true;
    }
    else
    {
            return json_encode(array('error' => 1, 'msg' => 'Failed to add user!'));
//              return false;
    }
}
catch(PDOException $e)
{
    echo "ERROR! " . $e->getMessage ;
}
$conn = null;

}

---

在js中首先更改这一行 $form.submitfunction事件

---

然后在form method='post'

Yo中更改这一行，代码在哪里？那么，为什么您认为即使在这里为您提供了一个示例，另一个示例也会起作用呢？@yourcomsense我添加了代码！我已经阅读和尝试了4-5个小时了。我将感谢任何帮助@samayo我添加了代码！在控制台中：xhr=[object object]status=parserrror error=SyntaxError:JSON.parse:JSON数据网络的第1行第1列出现意外的数据结尾错误：发生网络错误。现在：xhr=[object object]status=error error=Internal Server error