用ajax发送数据到php

如果我点击提交（模式表单按钮），显然XMLHttpRequest是doubled，tripled，quadrupled等等。如果我点击关闭模式，然后再次点击联系我们，会发生奇怪的事情。我真的需要你的帮助。用ajax发送数据到php

我想要什么：当我点击提交，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=" [email protected]" 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"); 
}

来源

2016-08-30 Cesar

那么你就必须表现出一定的HTML代码，因为只是你的jQuery并没有告诉我们太多.. – Naruto

完成..我编辑了我的帖子。 – Cesar

为什么每次点击都会绑定到'ready'和'click'？ –

我一个米不完全确定实际问题是什么，但这里是通过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=" [email protected]" 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>

<?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); 
}

来源

2016-08-30 22:01:35

用ajax发送数据到php

回答

相关问题