我的表單通過Ajax到PHP有什麼問題？

已經淘到這個網站，並找到許多AJAX PHP示例，但以下這些我不明白爲什麼地球上我的腳本不工作。我的表單通過Ajax到PHP有什麼問題？

我有一個帶有按鈕的HTML表單。你點擊它調用Bootstrap模式窗口的按鈕。你輸入一個電子郵件地址點擊提交。

它張貼到一個PHP文件，將通過電子郵件發送給我。

我使用AJAX實現的原因是因爲我不想在表單上提交ACTION和METHOD。我想通過AJAX提交，所以用戶不會被重定向到我的PHP頁面。

這裏是我的HTML：

<!DOCTYPE html> 
<html> 
<head> 
     <title>test</title> 
     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"> </script> 
     <link href="css/bootstrap.min.css" rel="stylesheet"> 
     <link href="css/styles.css" rel="stylesheet"> 

    <script> 
    $(document).ready(function() { 
     $("button#submit").click(function(){    
      $.ajax({ 
       type: "POST", 
       url: "email.php", // 
       data: $('form.icontact').serialize(), 
       success: function(msg){ 
        $("#thanks").html(msg) 
        $("#contact").modal('hide');  
       }, 
       error: function(){ 
        alert("failure"); 
       } 
      }); 
     }); 
    }); 
</script> 
</head> 
<body>   
     <div class="container"> <!-- numbers cannot total more than 12 for rows--> 
     <div id="thanks"><p><a href="#contact" data-toggle="modal" class="btn btn-success">Submit!</a></p></div>    

     </div> 

     <!--contact modal--> 
     <div class="modal fade"id="contact" role="dialog"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <form class ="form-horizontal" name="icontact" id="icontact"> 
         <div class="modal-header"> 
          <h4>testemail</h4> 
         </div> 
         <div class="modal-body"> 
         <p>Please enter your email address and click submit to receive  your free first chapter</p> 
         <div class="form-group"> 
          <label for ="contact-email" class="col-lg-2 control-label">Email: </label> 
          <div class="col-lg-10"> 
           <input type="email" class="form-control" id="fromaddress" placeholder="[email protected]" name="fromaddress" /> 
           <input type="hidden" id ="subject" value="enter in your email" name="subject" /> 
          </div> 
         </div> 

         </div> 
         <div class="modal-footer"> 
         <a class="btn btn-default" data-dismiss="modal">Cancel</a> 
         <button class="btn btn-primary" type="submit" id="submit">Send</button> 


         </div> 
        </form> 
       </div> 
      </div> 
     </div> 

     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"> </script> 
     <script src="js/bootstrap.js"></script> 
</body>

，這裏是PHP文件。我在運行它時遇到了失敗，並且它正在像GET一樣傳遞URL中的數據。我究竟做錯了什麼？

<?php 

function spamcheck($field) { 
    // Sanitize e-mail address 
    $field=filter_var($field, FILTER_SANITIZE_EMAIL); 
    // Validate e-mail address 
    if(filter_var($field, FILTER_VALIDATE_EMAIL)) { 
    return TRUE; 
    } else { 
    return FALSE; 
    } 
} 

if (isset($_POST["fromaddress"])) { 
    // Check if "from" email address is valid 
    $mailcheck = spamcheck($_POST["fromaddress"]); 
    if ($mailcheck==FALSE) { 
    echo "Invalid input"; 
    } else { 
     echo "<span class=\"alert alert-success\" >Your message has been received. Thanks!</span><br><br>"; 

    $from = strip_tags($_POST["fromaddress"]); // sender 
    $subject = strip_tags($_POST["subject"]); 
    $message = "Thanks."; 
    // message lines should not exceed 70 characters (PHP rule), so wrap it 
    $message = wordwrap($message, 70); 
    // send mail 
    mail("[email protected]",$subject,$message,"From: $from\n"); 

    } 
    } 


?>

來源

2014-07-19 user3856614

$（'form.icontact'）。serialize（）'應該是'$（'＃icontact'）。serialize（）'開始 –

'$（「button＃submit」）。click '你不應該依賴用戶點擊一個按鈕來提交表單 - 這不是表單提交的唯一方式，而是總是聽取提交'$（'＃icontact'）。submit（function（）{} ）' – Popnoodles

另一件事 - 你已經把你的javascript包含在他們屬於的地方，但是由於某種原因，它的''中的程序腳本屬於''之前的包含。 – Popnoodles

問題是，您的表單正在提交任一方式。您尚未阻止提交按鈕的默認行爲。即提交表單並重定向到表單操作。

做這樣的事情

$("button#submit").click(function(e){ 
    e.preventDefault(); // This line avoids the default submit event. 

    //Rest of stuff as you have it..... 
});

一個更好的選擇是做對.submit() AJAX調用，而不是在.click()如下

$("form#icontact").submit(function(e){ 
    e.preventDefault(); 

    //Proceed with other stuff as is... 

});

希望這有助於！ :)

來源

2014-07-19 20:08:51 varun1505

他們總是忘記e.preventDefault（）; :) –

感謝這真的幫了大忙！ – user3856614

我的表單通過Ajax到PHP有什麼問題？

回答

相關問題