Ajax 表单处理不起作用答案

【问题标题】：Ajax form handling is not workingAjax 表单处理不起作用
【发布时间】：2015-11-19 00:12:02
【问题描述】：

我喜欢处理 Ajax 的联系表单。该脚本应防止重定向，在提交后清除所有输入字段，并应提醒一些消息。

我的表格：

<form id="contact-form-edc" method="post" action="contact-form.php">
              <div class="full-row fly-in-animation">
                  <div class="large-4 kontakt_left small-12 columns">
                      <label>Anrede
                          <input type="radio" name="anrede" value="Herr" id="herr"><label for="herr">Herr</label>
                          <input type="radio" name="anrede" value="Frau" id="frau"><label for="frau">Frau</label>
                      </label>
                      <label>Name*
                          <input type="text" required name="name">
                      </label>
                      <label>Vorname*
                          <input type="text" required name="vorname">
                      </label>
                      <label>E-Mail*
                          <input type="text" required name="email">
                      </label>
                  </div>
                  <div class="large-4 small-12 columns">
                      <label>Ihre Nachricht*
                          <textarea rows="10" required name="nachricht"></textarea>
                      </label>
                  </div>
                  <div class="large-4 small-12 columns">
                      <label><a href="#" data-reveal-id="datenschutzModal">Datenschutz</a> akzeptieren*
                          <input type="checkbox" required name="datenschutz">
                      </label>
                      <input type="submit" class="button radius" value="Abschicken">
                  </div>
              </div>
          </form>

这是我的 Ajax 脚本：

$(function() {

    // Kontakt-Formular in das Script laden
    var form = $('#contact-form-edc');

    $(form).submit(function(e) {
        // Den Weiterleitung stoppen
        e.preventDefault();

        // Die Kontakt-Formular Daten in das Script laden
        var formData = $(form).serialize();

        // Das Kontakt-Formular absenden
        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
        })

        return false;

            .done(function(response) {
            // Erfolgreiche Meldung
            alert("erfolg");

            // Das Kontakt-Formular leeren
            $('input').val('');
            $('textarea').val('');
            $('.button').val('Absenden')
        })
            .fail(function(data) {
            // Fehler Meldung
            alert("error");
        });

    });

});

在其他网站上，这个代码 sn-ps 工作得很好。你可以看看我的site...

【问题讨论】：

您的 form 变量是一个 jQuery 对象。你不需要做$(form)
谢谢！还是不行……
发生了什么？我明白你说他应该继续下去，但它在做什么呢？有任何错误信息吗？
没有错误 - 没有。表单重定向到 PHP 页面并且没有出现警告。
您应该将return false 移动到函数的末尾。看起来你把它放在一个完全错误的地方。

标签： php jquery ajax forms

【解决方案1】：

您的代码运行良好。只需从 jQuery 脚本中删除 return false;。

这是我的测试。

我在表单末尾为服务器响应添加了一个 div。

form.php:

<form id="contact-form-edc" method="post" action="contact-form.php">
              <div class="full-row fly-in-animation">
                  <div class="large-4 kontakt_left small-12 columns">
                      <label>Anrede
                          <input type="radio" name="anrede" value="Herr" id="herr"><label for="herr">Herr</label>
                          <input type="radio" name="anrede" value="Frau" id="frau"><label for="frau">Frau</label>
                      </label>
                      <label>Name*
                          <input type="text" required name="name">
                      </label>
                      <label>Vorname*
                          <input type="text" required name="vorname">
                      </label>
                      <label>E-Mail*
                          <input type="text" required name="email">
                      </label>
                  </div>
                  <div class="large-4 small-12 columns">
                      <label>Ihre Nachricht*
                          <textarea rows="10" required name="nachricht"></textarea>
                      </label>
                  </div>
                  <div class="large-4 small-12 columns">
                      <label><a href="#" data-reveal-id="datenschutzModal">Datenschutz</a> akzeptieren*
                          <input type="checkbox" required name="datenschutz">
                      </label>
                      <input type="submit" class="button radius" value="Abschicken">
                  </div>
                  <div id="res">response: </div>
              </div>
          </form>

jQuery:

$(function() {

    // Kontakt-Formular in das Script laden
    var form = $('#contact-form-edc');

    $(form).submit(function(e) {
        // Den Weiterleitung stoppen
        e.preventDefault();

        // Die Kontakt-Formular Daten in das Script laden
        var formData = $(form).serialize();

        // Das Kontakt-Formular absenden
        $.ajax({
            type: 'POST',
            url: $(form).attr('action'),
            data: formData
        })



            .done(function(response) {
            // Erfolgreiche Meldung
            alert("OK!");
            $('div#res').append(response); /*THIS LINE ADDED*/

            // Das Kontakt-Formular leeren
            $('input').val('');
            $('textarea').val('');
            $('.button').val('Absenden')
        })
            .fail(function(data) {
            // Fehler Meldung
            alert("error");
        });

    });

});

最后，contact-form.php 只是简单的一行：

<?php
echo $_POST['name'];
?>

它有效！

【讨论】：