2017-06-13 59 views
-1

我有一個輸入字段和2個按鈕來添加/刪除數據庫中的單詞。 我使用3個PHP文件。輸出html代碼的主要文件是addtag.php,它可以添加一個單詞,removetag.php文件可以刪除單詞。如何:PHP Ajax頁面更新

我想在點擊plus時調用addtag.php併發送輸入字段的內容。點擊減號時應調用removetag.php。

addtag.php和removetag.php應該在後臺運行,頁面應該只更新<tagboxtxt>

以下元素在同一頁上多次列出。有不同的鏈接和值,但元素是相同的。

<!-- language-all: lang-html --> 
<bdiv> 
<div> 
<a href="001.mp4"><img src="001.jpg" /></a> 
</div> 
<tagbox> 
<form> 
<input type="text" id="tag" name="tag"> 
<input type="hidden" id="hash" name="hash" value="23547"> 
<button class="button" type="submit" formaction="addtag.php" method="GET">+</button> 
<button class="button" type="submit" formaction="removetag.php">-</button> 
</form> 
<tagboxtxt>foo bar</tagboxtxt> 
</tagbox> 
</bdiv> 

<bdiv> 
<div> 
<a href="002.mp4"><img src="002.jpg" /></a> 
</div> 
<tagbox> 
<form> 
<input type="text" id="tag" name="tag"> 
<input type="hidden" id="hash" name="hash" value="67889"> 
<button class="button" type="submit" formaction="addtag.php" method="GET">+</button> 
<button class="button" type="submit" formaction="removetag.php">-</button> 
</form> 
<tagboxtxt>bla huh</tagboxtxt> 
</tagbox> 
</bdiv> 

我知道Ajax是要走的路,但我無法得到它的工作。

我試過使用下面的函數。我應該如何在我的例子中使用它?

function addtag() { 
     $.ajax({ 
     url:"addtag.php", 
     type: "POST", 
     success:function(result){ 
     alert(result); 
     } 
    }); 
} 
+0

能否請您發表你爲了送一個AJAX請求已經嘗試過的代碼? – StuntHacks

+0

@StuntHacks我已經添加了我用過的東西。我做了一些測試,但我想我錯過了一些技巧。 – MikeSkril

+0

什麼不起作用?警報中寫的是什麼? – StuntHacks

回答

-1

您錯過了JavaScript,它捕獲點擊「加號」按鈕並調用您的ajax函數。嘗試在粘貼函數低於這個javascriptsnippet:

//Execute on page ready 
$(function() { 
    $('body').on('click', '.plusSign', function() { 
     addTag(); 
    }); 
}); 
-1

我會叫一個js文件,並將它引用兩個添加和刪除PHP文件 - 我已經在輸出HTML中的主文件第一嘲笑這件事對你把這個

<head> 
    <script type='text/javascript'></script> 
    <script type="text/javascript" src="https://code.jquery.com/jquery-1.10.0.min.js"></script> 
    <script type="text/javascript" src="tag.js"></script> 
</head> 

<tagbox> 
    <input type="text" name="tag"> 
    <div class="cssCircle plusSign" id="plus">&#43; </div> 
    <div class="cssCircle minusSign" id="minus" style="position:absolute; top:20px; left:25px;">&#8211;</div> 

</tagbox> 

這將允許你調用js文件運行ajax。 js文件名爲tag.js應該是這樣的

$(document).ready(function() { 
$("#plus").click(function() { 
     $.ajax({ 
      type: "POST", 
      url: "addtag.php", 
      dataType: "json", 
      data: ({word: $("#tag").val(),}), 
      success:function(result){ 
       alert(result); 
            } 
     }); 

}); 

$("#minus").click(function() { 
     $.ajax({ 
      type: "POST", 
      url: "removetag.php", 
      dataType: "json", 
      data: ({word: $("#tag").val(),}), 
      success:function(result){ 
       alert(result); 
            } 
     }); 

}); 
}); 

這應該完成你所需要的

+0

謝謝!我已經更新了我的問題。這應該更好地解釋我在找什麼。 – MikeSkril