用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

回答

相關問題