發送數據從HTML到PHP頁面不離開頁面

我已經使用了大量的時間在堆棧溢出和谷歌搜索，但沒有爲我工作。發送數據從HTML到PHP頁面不離開頁面

我在html中有一個表單，我需要將數據發送到php而不離開頁面。我使用ajax和javascript.I可以通過離開頁面來發布數據，但是我不想離開頁面。

這裏是我的html：

<html> 
<head> 
    <meta charset="utf-8" /> 
    <meta name="format-detection" content="telephone=no" /> 
    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" /> 
    <link rel="stylesheet" type="text/css" href="css/topcoat-mobile-light.css" /> 
    <link rel="stylesheet" type="text/css" href="css/styles.css" /> 
    <script src = "js/jquery.js"></script> 
    <script type="text/javascript" src = "js/index.js"></script>   
    <meta name="msapplication-tap-highlight" content="no" /> 
    <title>Title</title> 
</head> 
<body> 
    <div class="topcoat-navigation-bar"> 
     <div class="topcoat-navigation-bar__item center full"> 
     <h1 class="topcoat-navigation-bar__title">Header</h1> 
     </div> 
    </div> 
    <div class = "content text-input"> 
    <form id = "form" name = "form" action="http://localhost/index.php" method = "post"> 
     <p>Please fill the details. 
     <p> Name</p> 
     <input type="text" class="topcoat-text-input" placeholder="text" value="" id = "name" name = "name"> 
     <input id = "submit" type="submit" class="topcoat-button" value = "Submit"> 
    </form> 
    <script type="text/javascript"> 
    var frm = $('#form'); 
    frm.submit(function (ev) { 
     $.ajax({ 
     type: frm.attr('method'), 
     url: frm.attr('action'), 
     data: frm.serialize(), 
     success: function (data) { 
      alert('ok'); 
     } 
    }); 

    ev.preventDefault(); 
}); 
</script> 
    </div> 
</body> 
</html>

我可以用PHP通過後留下頁面訪問「名」，所以我不敢在這裏張貼的PHP。任何幫助將不勝感激。如果有人需要澄清我在這裏。

來源

2014-09-20 Asim K T

我不知道如何，但這對我工作。謝謝你的答案。

當我將它放在index.php所在的相同目錄（即localhost：/）時，html表單工作。如果它在另一個地方它沒有工作。我不知道爲什麼，但我正在計算出來。

來源

2014-09-23 04:39:22

雖然您的輸入有一個ID，但它們沒有名稱屬性。序列化使用名稱爲數據創建鍵值對。

參見：http://api.jquery.com/serialize/

注意：只有「成功控制」被序列化到字符串。由於未使用按鈕提交表單，所以沒有提交按鈕值被序列化。對於包含在序列化字符串中的表單元素的值，元素必須具有名稱屬性。僅當檢查複選框和單選按鈕（「收音機」或「複選框」類型的輸入）時，纔會包含這些值。來自文件選擇元素的數據不會被序列化。

更改您的輸入：

<input type="text" class="topcoat-text-input" placeholder="text" value="" id="name" name="name"/>

來源

2014-09-20 09:43:35 jme11

謝謝，我添加了名稱屬性，但仍然無法正常工作。 – 2014-09-20 10:00:34

你需要的是在這裏 http://malsup.com/jquery/form/

它提交整個形式並不會離開當前頁面。

來源

2014-09-20 09:51:27 andrex

我想在javascript文件<script src = "js/jquery.js"></script>中可能會出現一些錯誤。我試過你的代碼。當我更改JavaScript文件時它工作。試用
<script src = "http://code.jquery.com/jquery-1.11.0.min.js"></script>
它已經爲我工作。

來源

2014-09-20 10:15:42 Salini

你應該把目標屬性在您選擇的形式，以便它看起來就像是：

<form id = "form" name = "form" action="http://localhost/index.php" method = "post" target="some_name">

，並把「some_name」作爲一個iframe

<iframe id="some_name" name="some_name" style="display:none position:absulote; z-index:-100"></iframe>

應該做的作業

來源

2014-09-20 10:20:30 benjah

用這段代碼改變腳本部分....你需要撥打ev.preventDefault();之前阿賈克斯調用....

<script type="text/javascript"> 
var frm = $('#form'); 
frm.submit(function (ev) { 
    ev.preventDefault(); 
    $.ajax({ 
     type: frm.attr('method'), 
     url: frm.attr('action'), 
     data: frm.serialize(), 
     success: function (data) { 
      alert('ok'); 

     } 
    }); 
}); 
</script>

來源

2014-09-20 10:32:24

發送數據從HTML到PHP頁面不離開頁面

回答

相關問題