使用AJAX提交表单时出错

Question

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

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

我希望输出成功/错误显示在第一个php文件中，因为点击任一提交按钮。 它需要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-没有-页面refreshm

https://www.formget.com/submit-form-using-ajax-php-and-jquery/

https://www.formget.com/form-submission-using-ajax-php-and-javascript/

，还有更多的例子，但没有工作！

<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; 

} 

Answer 1

变化这条线在第一JS $（ “表”）.submit（功能（事件）

和更改形式方法这一行= 'POST'