Question

我正在尝试使用JQuery Ajax将联系表单值发送到php。但是当我点击提交按钮时，我能够收到成功消息，但是这些值在php中没有收到，也没有存储在数据库中。可能是什么问题？

这就是我所做的

HTML

                <form name="contact-form" id="contact-me-form" method="POST">
                    <div class="med-col form-element">
                        <label for="uname">Name</label><br>
                        <input type="text" class="form-input" name="uname" id="uname" required>
                    </div>

                    <div class="med-col form-element">
                        <label for="email">Email</label><br>
                        <input type="email" class="form-input" name="email" id="email" required>
                    </div>

                    <div class="lg-col form-element">
                        <label for="msg">Message</label><br>
                        <textarea name="msg" id="msg" class="comment-box" required></textarea>
                    </div>
                    <div class="med-col form-element">
                        <button class="contact-submit-button button button-black"><i class="fa fa-paper-plane-o" aria-hidden="true"></i> Send message</button>
                    </div>
                    <div class="space30"></div>
                </form>

PHP

<?php
    $username = $_POST['uname'];
    $email = $_POST['email'];
    $message = $_POST['msg'];

    $servername = "localhost";
    $username = "user";
    $password = "#userpass#";
    $dbname = "sample";
    $conn = mysqli_connect($servername, $username, $password, $dbname);
    if (!$conn) {
        die("Connection failed: " . mysqli_connect_error());
    }

    $sql = "INSERT INTO contactdb (username, email, message) VALUES ($username,$email,$message)";

    if (mysqli_query($conn, $sql)) {
        echo "New record created successfully";
    } else {
        echo "Error: " . $sql . "<br>" . mysqli_error($conn);
    }

    mysqli_close($conn);
?>

AJAX

    var form = $("#contact-me-form")
    var formdata = form.serialize()
    $('.contact-submit-button').click(function(){
        $.ajax({
          type: "POST",
          url: "contact-me.php",
          data: formdata,
          success: function(data) {
            alert("submitted successfully");
          }       
        });
        event.preventDefault();      
    })

Answer 1

您需要进行以下更改

<script>
$(document).ready(function(){

    $('.contact-submit-button').click(function(){
        var form = $("#contact-me-form")
        var formdata = form.serialize();
        $.ajax({
          type: "POST",
          url: "contact-me.php",
          data: formdata,
          success: function(data) {
            alert("submitted successfully");
          }       
        });
        event.preventDefault();      
    }) 
})
</script>

Answer 2

javascript代码存在各种问题，但主要问题是，您在click事件开始之前序列化数据，这样它将始终为空。这是一个更正版本：

var form = $("#contact-me-form");
// use submit event instead of click 
// to allow all kind of form submits
form.submit(function(event){
    // you'll need to pass the event as variable
    event.preventDefault();
    // and you need to serialize the data in the moment 
    // you need it, otherwise it will be empty
    var formdata = form.serialize()
    $.ajax({
      type: "POST",
      url: "contact-me.php",
      data: formdata,
      success: function(data) {
        alert("submitted successfully");
      }       
    });

})

确保在DOM准备就绪时加载所有内容，否则表单选择器可能为空。将代码放在文件末尾或将其包装在$(document).ready(function() {...});

中

Answer 3

在form.serialize()功能中使用click并在event.preventDefault();来电之前添加ajax

$('.contact-submit-button').click(function(event){
    event.preventDefault();
    var form = $("#contact-me-form");
    var formdata = form.serialize();

    $.ajax({
      type: "POST",
      url: "contact-me.php",
      data: formdata,
      success: function(data) {
        alert("submitted successfully");
      }       
    });

});

AJAX没有向php提交值

3 个答案: