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来使用表单提交。我创建了一个fiddle，可以正常使用并满足您的要求。另外，您需要将btn类型从preventDefault更改为简单的submit

button

Answer 2

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

$(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);
?>

通过AJAX提交html文件的表单

2 个答案: