Question

如果我单击提交（模态表单按钮），显然XMLHttpRequest会加倍，三倍，四倍等等。如果我点击关闭模态并再次点击联系我们，就会发生奇怪的事情。我真的需要你的帮助。

我想要的是：当我点击提交时，ajax已完成，模态关闭，我可以点击再次联系我们而不会给出那些该死的问题

Html文件：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>

<link href="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>

</head>
<body>
    <div id="thanks"><p><a data-toggle="modal" href="#form-content" class="btn btn-primary">Contact us</a></p></div>
    <!-- model content -->
    <div id="form-content" class="modal hide fade in" style="display: none; ">
            <div class="modal-header">
                  <a class="close" data-dismiss="modal">×</a>
                  <h3>Contact us</h3>
            </div>
        <div>
            <form class="contact">
            <fieldset>
                 <div class="modal-body">
                     <ul class="nav nav-list">
                <li class="nav-header">Name</li>
                <li><input class="input-xlarge" value=" krizna" type="text" name="name"></li>
                <li class="nav-header">Email</li>
                <li><input class="input-xlarge" value=" user@krizna.com" type="text" name="Email"></li>
                <li class="nav-header">Message</li>
                <li><textarea class="input-xlarge" name="sug" rows="3"> Thanks for the article and demo
                </textarea></li>
                </ul>
                </div>
            </fieldset>
            </form>
        </div>
         <div class="modal-footer">
             <button class="btn btn-success" id="submit">submit</button>
             <a href="#" class="btn" data-dismiss="modal">Close</a>
        </div>
    </div>


  <script>
   $(function() {
  //twitter bootstrap script
    $("button#submit").click(function(){
            $.ajax({
            type: "POST",
        url: "process.php",
        data: $('form.contact').serialize(),
            success: function(msg){
                    $("#thanks").html(msg)
                $("#form-content").modal('hide');
                },
        error: function(){
            alert("failure");
            }
                });
    });
  });
  </script>

PHP文件：

<?php
   if (isset($_POST['name'])) {
   $name = strip_tags($_POST['name']);
   $email = strip_tags($_POST['Email']);
   $sug = strip_tags($_POST['sug']);
   echo "Name       =".$name."</br>";
   echo "Email      =".$email."</br>";
   echo "Message        =".$sug."</br>";
   echo "<span class='label label-info' >your message has been submitted .. Thanks you</span>";
   header("Location: test.php");
 }

Answer 1

我不完全确定实际问题是什么，但这是根据您编辑的原始帖子通过AJAX发送和接收数据的解决方案。

如你所见，我做了一些改变。我没有将它们作为纯文本回显，而是将它们编码为JSON格式，这在数据和服务器之间交换数据时非常方便。我也不想将html和消息一起返回，所以我把它移到HTML部分。

希望这对你有所帮助。

<强> HTML

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title></title>

  <link href="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap-combined.min.css" rel="stylesheet">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
  <script src="http://www.bootstrapcdn.com/twitter-bootstrap/2.2.1/js/bootstrap.min.js"></script>

</head>
<body>
  <div id="thanks">
    <span class='label label-info feedback'></span>
    <p><a data-toggle="modal" href="#form-content" class="btn btn-primary">Contact us</a></p>
  </div>
  <!-- model content -->
  <div id="form-content" class="modal hide fade in" style="display: none; ">
    <div class="modal-header">
      <a class="close" data-dismiss="modal">×</a>
      <h3>Contact us</h3>
    </div>
    <div>
      <form class="contact">
        <fieldset>
         <div class="modal-body">
           <ul class="nav nav-list">
            <li class="nav-header">Name</li>
            <li><input class="input-xlarge" value=" krizna" type="text" name="name"></li>
            <li class="nav-header">Email</li>
            <li><input class="input-xlarge" value=" user@krizna.com" type="text" name="Email"></li>
            <li class="nav-header">Message</li>
            <li><textarea class="input-xlarge" name="sug" rows="3"> Thanks for the article and demo
            </textarea></li>
          </ul>
        </div>
      </fieldset>
    </form>
  </div>
  <div class="modal-footer">
   <button class="btn btn-success" id="submit">submit</button>
   <a href="#" class="btn" data-dismiss="modal">Close</a>
 </div>
</div>
</body>
</html>

<强> JS

<?php
if(isset($_POST['name'])) {
    $data = [];

    $name = strip_tags($_POST['name']);
    $email = strip_tags($_POST['Email']);
    $sug = strip_tags($_POST['sug']);

    $data['name'] = $name;
    $data['email'] = $email;
    $data['sug'] = $sug;
    $data['message'] = "Your message has been submitted. Thank you!";

    echo json_encode($data);
}

用ajax发送数据到php

1 个答案: