Question

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

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

我想在第一个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

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中更改此行 $（＆＃34; form＆＃34;）。submit（function（event）

并在表格方法中更改此行=＆＃39; post＆＃39;

使用AJAX

1 个答案: