使用Ajax和php提交表單

我是一名專注於前端的新愛好者編碼器。有人可以請幫助後端代碼。使用Ajax和php提交表單

我想使用Ajax接收表單提交後提交和關閉按鈕的模式中的成功消息嗎？

此外，任何形式安全的幫助將不勝感激:)

謝謝！

這裏是我的代碼：

HTML：

<!--Modal Contact Form--> 

<div class="modal fade" id="contact" role="dialog"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <form class="form-horizontal" action="process.php" method="post" name="contact_form"> 

     <div class="modal-header"> 
     <h3>Contact</h3> 
     </div> 

     <div class="modal-body"> 
      <div class="form-group"> 
       <label for="contact-name" class="col-lg-2 control-label">Name:</label> 
       <div class="col-lg-10"> 
       <input name="contact" type="text" class="form-control" id="contact-name" placeholder="Full Name"> 
       </div> 
       </div> 
      <div class="form-group"> 
       <label for="contact-email" class="col-lg-2 control-label">Email:</label> 
      <div class="col-lg-10"> 
        <input name="email" type="email" class="form-control" id="contact-email" placeholder="[email protected]"> 
      </div> 
      </div> 
      <div class="form-group"> 
       <label for="contact-message" class="col-lg-2 control-label">Message:</label> 
      <div class="col-lg-10"> 
       <textarea name="message" class="form-control" rows="8"></textarea> 
      </div> 
      </div> 

      <div class="modal-footer"> 
      <a class="btn btn-default" data-dismiss = "modal">Close</a> 
      <button style="background-color: grey;" class="btn btn-primary" type="submit">Submit</button> 
      </div> 
      </form> 
     </div> 
    </div> 
</div> 
</div> 

<!--End Contact Modal-->

PHP：

<?php 

$contact = $_POST['contact']; 
$email = $_POST['email']; 
$message = $_POST['message']; 
$to = '[email protected]'; 
$subject = 'New Message'; 

mail ($to, $subject, $message, "From: " . $email); 
echo "your message has been submitted .. Thanks you"; 

?>

來源

2015-02-12 Kat

AJAX幾乎是所有的JavaScript（使jQuery庫變得更容易）。你到目前爲止寫了哪些Javascript？ – 2015-02-12 03:59:55

IMO在SO中有很多ajax的例子。嘗試搜索它們 – 2015-02-12 04:02:47

@DanGoodspeed我其實並沒有寫很多javaScript :(我只在樹屋學習了六個月左右，我知道我還有很多東西要學，但是我覺得它非常有趣！ http://kararaina.com – Kat 2015-02-12 06:08:56

把成功的方法來應對。

$array = array("success" => true, "message" => "your message has been submitted .. Thanks you"); echo json_decode($array);

從Ajax請求的響應，你可以查身份證的成功是真實的，然後關閉模式。

$.ajax({ 
    url: "script.php", 
    type: "POST", 
    data: { id : menuId }, 
    dataType: "json", 
    success: function(response) { 
    if(response.success) { 
     // DO YOUR STUFF 
    } 
    } 
});

jquery ajax

來源

2015-02-12 04:21:47 Azadey

謝謝你的代碼@Azadey :) – Kat 2015-02-12 06:13:22

試試這個，

的index.html

<html> 
<head> 
<script type="text/javascript"> 
    function getHttpRequest() 
    { 
    if(window.XMLHttpRequest) 
    { 
    xmlhttp=new XMLHttpRequest(); 
    } 
    else 
    { 
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
    } 
    return xmlhttp; 
    } 
    function executeAction() 
    { 
    var contact=document.forms["contact_form"]["contact-name"].value; 
    var email=document.forms["contact_form"]["contact-email"].value; 
    var message=document.forms["contact_form"]["message"].value; 
    var xmlhttp; 
    if (email=="") 
     { 
     document.getElementById('alert').innerHTML = "Please type the email id!"; 
       return; 
     } 

    if (window.XMLHttpRequest) 
     { 
     xmlhttp=new XMLHttpRequest(); 
     } 
    else 
     { 
     xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
     } 
    xmlhttp.onreadystatechange=function() 
     { 
     if (xmlhttp.readyState==4 && xmlhttp.status==200) 
     { 
        document.getElementById('alert').innerHTML = xmlhttp.responseText; 
     } 
     } 
    xmlhttp.open("GET", "sendMail.php?contact="+contact+"&email="+email+"&message="+message, true); 

    xmlhttp.send(); 
    } 
    </script> 
</head> 
<body> 
<div class="modal fade" id="contact" role="dialog"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <form class="form-horizontal" action="#" method="POST" name="contact_form"> 

     <div class="modal-header"> 
     <h3>Contact</h3> 
     </div> 

     <div class="modal-body"> 
      <div class="form-group"> 
       <label for="contact-name" class="col-lg-2 control-label">Name:</label> 
       <div class="col-lg-10"> 
       <input name="contact" type="text" class="form-control" id="contact-name" placeholder="Full Name"> 
       </div> 
       </div> 
      <div class="form-group"> 
       <label for="contact-email" class="col-lg-2 control-label">Email:</label> 
      <div class="col-lg-10"> 
        <input name="email" type="email" class="form-control" id="contact-email" placeholder="[email protected]"> 
      </div> 
      </div> 
      <div class="form-group"> 
       <label for="contact-message" class="col-lg-2 control-label">Message:</label> 
      <div class="col-lg-10"> 
       <textarea name="message" class="form-control" rows="8"></textarea> 
      </div> 
      </div> 

      <div class="modal-footer"> 
      <a class="btn btn-default" data-dismiss = "modal">Close</a> 
      <button style="background-color: grey;" class="btn btn-primary" type="button" onClick="executeAction()">Submit</button> 
      </div> 
      </form> 
     </div> 
    </div> 
</div> 
</div> 

<div id="alert"></div> 
</body> 
</html>

sendMail.php

<?php 
$contact=$_GET["contact"]; 

$email = $_GET['email']; 
$message = $_GET['message']; 
$to = '[email protected]'; 
$subject = 'New Message'; 

mail ($to, $subject, $message, "From: " . $email); 
echo "your message has been submitted .. Thanks you"; 
?>

來源

2015-02-12 07:34:04

謝謝@ Shakila，它不適合我:( – Kat 2015-02-12 11:03:04

我不喜歡任何迴應爲止。這裏是你應該做的（希望它可以工作，因爲我沒有真正測試代碼）：

1）在表單標籤中添加一個ID。讓我們匹配名稱，所以只需添加屬性...

id="contact_form"

2）將jQuery和Javascript添加到HTML頁面的底部。此代碼應該位於正文結束標記的正上方。

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> 
<script> 
    $("#contact_form").submit(function(e) { 
    e.preventDefault(); // to stop the form from being submitted normally 
    var $this = $(this); // cache the form 
    $this.post($this.attr("action"),$this.serialize(),function(data) { 
     alert(data); 
     $("#contact").fadeOut(); 
    }); 
    }); 
</script>

而且應該這樣做。非常基本。安全性應該在PHP代碼中完成。

來源

2015-02-12 08:56:24

這一個要麼:( – Kat 2015-02-12 11:03:48

你可以把樣本頁在線某處，所以我們可以看到它？ – 2015-02-12 17:08:36

是的，去kararaina.com :)這是我的頁面試圖修復:) – Kat 2015-02-12 21:30:31

使用Ajax和php提交表單

回答

相關問題