用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="[email protected]" 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 = "/[]/"; 
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("[email protected]", "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，并且如果您在提交表单后检查控制台，无论您的PHP脚本如何回应，都会看到Syntax Error: Unrecognized expression ... +。为了解决这个问题，无论是脱下这条线：

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

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

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

然而，把它完全关闭应该是最好的解决办法，因为我不真正看到它在那里的使用，因为错误实际上是作为普通字符串而不是HTML从你的PHP脚本回显出来的。