使用 AJAX 提交联系表

Question

我有一个联系表，我想用 AJAX 提交，因为我希望 PHP 文件中的回显消息直接显示在我的联系表下方。

这就是我得到的：

form.php

<form id="ContactForm" action="contact.php" method="POST" enctype="text">
    <table class="contact-form">
        <tr>
            <td>Name<font color="#d25911">*</font></td>
            <td>
                <input type="text" id="betreff" name="betreff" placeholder="Betreff" size="45"/>
                <input type="text" id="name" name="name" placeholder="Max Mustermann" size="45"/>                            
            </td>
        </tr> 
        <tr>
            <td>E-Mail<font color="#d25911">*</font></td>
            <td><input type="text" id="email" name="email" placeholder="max@mustermann.de" value="" size="45"/></td>
        </tr>
        <tr>    
            <td>Telefon:</td>
            <td><input type="text" id="telefon" name="telefon" placeholder="Optional" size="45"/></td>
        </tr> 
        <tr>
            <td>Nachricht<font color="#d25911">*</font></td>
            <td>
                <textarea id="nachricht2" name="nachricht2" placeholder="Ihre Nachricht"></textarea>
                <textarea id="nachricht1" name="nachricht1" placeholder="Ihre Nachricht"></textarea>
            </td>
        </tr>
        <tr>
            <td>&nbsp;</td>
            <td>
                <center>
                    <input type="submit" value="Senden" id="submit" name ="submit">
                    <!--<input type="reset" value="Leeren" id="reset" name ="reset">-->
                </center>
            </td>
        </tr>
        <tr>
            <td><div id="result"></div></td>    
        </tr>
    </table>
</form>

脚本，放在里面form.php

/* attach a submit handler to the form */
$("#ContactForm").submit(function(event) {

    /* stop form from submitting normally */
    event.preventDefault();

    /* get some values from elements on the page: */
    var $form = $(this),
    a_betreff = $form.find('input[name="betreff"]').val(),
       a_name = $form.find('input[name="name"]').val(),
      a_email = $form.find('input[name="email"]').val(),
    a_telefon = $form.find('input[name="telefon"]').val(),
    a_nachricht2 = $form.find('textarea[name="nachricht2"]').val(),
    a_nachricht1 = $form.find('textarea[name="nachricht1"]').val(),
                    url = $form.attr('action');

    /* Send the data using post */
    var posting = $.post(url, {
        betreff: a_betreff,
        name: a_name,
        email: a_email,
        telefon: a_telefon,
        nachricht2: a_nachricht2,
        nachricht1: a_nachricht1,
    });

    /* Put the results in a div */
    posting.done(function(data) {
        var content = $(data).find('#content');
        $("#result").empty().append(content);
    });
});

这是我的 contact.php

<?

// Assure that only via contact-form executable
if(!isset($_POST["submit"])){   
    exit;
}

// Returns true, if E-Mail is valid
function isValidEmail($email){ 
    return filter_var($email, FILTER_VALIDATE_EMAIL) !== false;
}

// Initialize Variables
$name = addslashes(htmlspecialchars($_POST["name"]));
$email = addslashes(htmlspecialchars($_POST["email"]));
$telefon = addslashes(htmlspecialchars($_POST["telefon"]));
$telefon = strtolower($telefon);
$nachricht2 = addslashes(htmlspecialchars($_POST["nachricht2"]));

$betreff = addslashes(htmlspecialchars($_POST["betreff"]));
$nachricht1 = addslashes(htmlspecialchars($_POST["nachricht1"]));

// Check if chatbot filled this input fields
if(($betreff != "") OR ($nachricht1 != "")){
    exit;
}

// Check if all required fields are field
if($name == ""){
    echo "Bitte Namen eingeben.";
    exit;
}

if($email == ""){
    echo "Bitte E-Mail eingeben.";
    exit;
}

if($nachricht2 == ""){
    echo "Bitte Nachricht eingeben.";
    exit;
}


$number = "/[0123456789]/";
if(preg_match($number, $name)) {
    echo "Der angegebene Name ist ung&uuml;ltig.";
    exit;
}

$digit = "/[a-z]/";
if(preg_match($digit, $telefon)) {
    echo "Die angegebene Telefonnummer ist ung&uuml;ltig.";
    exit;
}

if(!isValidEmail($email)){
    echo "Die angegebene E-Mail Adresse ist ung&uuml;ltig.";
    exit;
}

$message = "Guten Tag,\n\n";
$message .= "das Kontaktformular wurde am ".date("d.m.Y")." um ".date("H:i:s")." von:\n\nName: ".$name."\n";
$message .= "E-Mail: ".$email."\n";

if($telefon != ""){
    $message .= "Telefon: ".$telefon."\n";
}

$message .= "\nverwendet.\n\n";
$message .= "Die Nachricht lautet:\n'".$nachricht2."'";

if(mail("info@styledesign.de", "Nutzung des Kontaktformulars", $message)){
    echo "Vielen Dank f&uuml;r Ihre Nachricht. Sie werden in den n&auml;chsten Tagen eine Antwort erhalten.";
} else {
    echo "Es ist ein unerwarteter Fehler beim Versenden der E-Mail aufgetreten.";
}


?>

嗯..这现在完全没有用，我不知道为什么。有人可以告诉我我到底需要修复什么，因为显然我没有看到它。

Answer 1

现在有个问题：

posting.done(function(data) {
  var content = $(data).find('#content');
  $("#result").empty().append(content);
});

问题是因为您将返回的数据作为 jQuery 选择器字符串传递。选择器字符串引用现有的 DOM。所以我猜你想做这样的事情：

$("#result").empty().append(data);

或者，如果您正在考虑从返回的字符串中捕获特定元素，请尝试将其作为 JSON 或 XML 返回，或者使用 parseHTML() 方法。

编辑

那是错误编号 1。错误编号 2 在您的 PHP 文件中。你做到了：

if(!isset($_POST["submit"])){   
    exit;
}

现在您以 AJAX 的形式提交，您实际上是将名称-值对提交给您的 PHP 脚本，而不是表单本身，因此提交按钮不会与您的表单一起出现。去掉那段代码。

错误号3为返回数据。它被 jQuery 自动解释为 HTML，如果您在提交表单后检查您的控制台，您将看到 Syntax Error: Unrecognized expression ... + 任何您的 PHP 脚本回显。要解决此问题，请取消此行：

var content = $(data).find('#content');

或者使用我上面提到的parseHTML()方法：

var content = $($.parseHTML(data)).find('#content');

但是，完全取消它应该是最好的解决方案，因为我并没有真正看到它在那里的用途，因为错误实际上是从您的 PHP 脚本中以纯字符串而不是 HTML.

使用 AJAX 提交联系表

Submitting Contact Form with AJAX

php

forms

ajax

jquery

contact