使用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提交表单

回答

相关问题