Question

我是一位专注于前端的新发烧友。有人可以请求后端代码帮助。

我想使用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="you@example.com">
            </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 = 'myemail@gmail.com';
$subject = 'New Message';

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

?>

Answer 1

将成功方法用于回应。

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

从ajax请求响应中，您可以检查ID成功是否为真，然后关闭您的模态。

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

jquery ajax

Answer 2

试试这个，

的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="you@example.com">
            </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 = 'myemail@gmail.com';
$subject = 'New Message';

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

Answer 3

到目前为止，我都不喜欢这两种回应。这是你应该做的（希望它能起作用，因为我实际上没有测试代码）：

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代码中完成。

使用Ajax和php提交表单

3 个答案: