如何使用 AJAX 和 php 从 HTML 提交表单

Question

我创建了一个contact.html 文件，其中包含与我们联系的表格。包含姓名、电子邮件和消息字段以及提交按钮的表单。

<section class="module" id="contact" > <!---->
          <div class="container">
            <div class="row">
              <div class="col-sm-6 col-sm-offset-3">
                <h2 class="module-title font-alt">Get in touch</h2>
                <div class="module-subtitle font-serif"></div>
              </div>
            </div>
            <div class="row">
              <div class="col-sm-6 col-sm-offset-3">
                  <form  id="contactForm" role="form" method="post" action="php/contact.php"> <!---->
                  <div class="form-group">
                    <label class="sr-only" for="name">Name</label>
                    <input class="form-control" type="text" id="name" name="name" placeholder="Your Name*" required="required" data-validation-required-message="Please enter your name."/>
                    <p class="help-block text-danger"></p>
                  </div>
                  <div class="form-group">
                    <label class="sr-only" for="email">Email</label>
                    <input class="form-control" type="email" id="email" name="email" placeholder="Your Email*" required="required" data-validation-required-message="Please enter your email address."/>
                    <p class="help-block text-danger"></p>
                  </div>
                  <div class="form-group">
                    <textarea class="form-control" rows="7" id="message" name="message" placeholder="Your Message*" required="required" data-validation-required-message="Please enter your message."></textarea>
                    <p class="help-block text-danger"></p>
                  </div>
                  <div class="text-center">
                    <button class="btn btn-block btn-round btn-d"  id="cfsubmit" name ="cfsubmit" type="submit">Submit</button><!---->
                  </div>
                </form>
                <div class="ajax-response font-alt" id="contactFormResponse"></div>
              </div>
            </div>
          </div>
        </section>

这是 html 文件。在 php 文件夹中还有一个名为 contact.php 的 php 文件作为 html 页面的操作。包含一行代码的 php 文件来警告。这是一个测试。

联系表单的 JQUERY 代码是

$("#contactForm").submit(function (e) {

        e.preventDefault();
        var $ = jQuery;

        var postData = $(this).serializeArray(),
            formURL = $(this).attr("action"),
            $cfResponse = $('#contactFormResponse'),
            $cfsubmit = $("#cfsubmit"),
            cfsubmitText = $cfsubmit.text();
            alert(cfsubmitText);
        $cfsubmit.text("Sending...");


        $.ajax(
            {
                url: formURL,
                type: "POST",
                data: postData,
                success: function (data) {
                    $cfResponse.html(data);
                    $cfsubmit.text(cfsubmitText);
                    $('#contactForm input[name=name]').val('');
                    $('#contactForm input[name=email]').val('');
                    $('#contactForm textarea[name=message]').val('');
                },
                error: function ( data ) {
                    alert("Error occurd! Please try again");
                }
            });

        return false;

    });

此代码效果不佳。请给出解决方案。

Answer 1

使用您的 html，我建议您使用 btn click 提交表单，而不是使用 submit 方法和 preventDefault。我创建了一个fiddle，它应该可以正常工作并满足您的要求。您还需要将 btn 类型从 submit 更改为简单的 button

<button class="btn btn-block btn-round btn-d" id="cfsubmit" name ="cfsubmit" type="button">Submit</button>

$("#cfsubmit").on('click', function (e) {

                const $thisBtn = $(this),
              $form = $('#contactForm'),
                    $cfResponse = $('#contactFormResponse'),
                    formData = $form.serialize();

        $thisBtn.text("Sending...");

        $.ajax({
                url: 'php/contact.php',
                type: "POST",
                data: formData,
                success: function (data) {
                    $cfResponse.html(data);
                    $thisBtn.text('Send');
                    $form.find(':input').val('');
                },
                error: function ( data ) {
                    alert("Error occurd! Please try again");
                }
            });

        return false;

    });

Answer 2

请检查jQuery 的以下代码，以便在POST 中通过AJAX 传递数据。

$(document).ready(function(){
    $("#contactForm").submit(function(event){
        event.preventDefault();
        var formData = new FormData(this);
          $.ajax({
             url: 'php/contact.php',
             type: 'POST',
             data: formData,
             async: false,
             success: function(result) {
               alert(result);
            },
            cache: false,
            contentType: false,
            processData: false
        });
     });
});

请移除Form中的action属性。

并在php/contact.php 中检查代码。

<?php
print_r($_POST);
?>