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

Posted 2023-05-09

【中文标题】如何使用 AJAX 和 php 从 HTML 提交表单

【英文标题】：How to submit a form from HTML using AJAX and php

【发布时间】：2019-06-15 19:37:51

【问题描述】：

我创建了一个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;

    );

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

【问题讨论】：

您遇到了什么错误？

控制台上的@DPS 显示“空响应”POST http://localhost:8383/Titan-master/php/contact.php net::ERR_EMPTY_RESPONSE send @ jquery.js:9536 ajax @ jquery.js:9143 (anonymous) @ main.js:460 dispatch @ jquery.js:5201 elemData.handle @ jquery.js:5009 同时提醒错误

【参考方案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;

    );

【讨论】：

// 发送请求（这可能会引发异常）xhr.send( options.hasContent && options.data || null ); net::ERR_EMPTY_RESPONSE 来自上述代码

【参考方案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);
?>

【讨论】：

警报数据产生[object object][object object][object object]

您好@avs 编辑了我的答案使用结果，您的成功（结果）并检查