如何：PHP Ajax 页面更新答案

【问题标题】：How to: PHP Ajax page update如何：PHP Ajax 页面更新
【发布时间】：2017-06-16 21:30:23
【问题描述】：

我有一个输入字段和 2 个按钮来从数据库中添加/删除单词。我正在使用 3 个 php 文件。输出html代码的主文件addtag.php，可以添加一个词，removetag.php文件可以删除一个词。

我想在单击加号时调用 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);
       }
     });
 }

【问题讨论】：

您能否发布您已经尝试过的代码以发送 AJAX 请求？
@StuntHacks 我已经添加了我用过的东西。我对此进行了一些测试，但我想我缺少一些技能。
什么不起作用？警报中写了什么？
您忘记提及您使用的是 jQuery。您已经描述了您希望 ti 如何工作，但根本没有提供有关您实现的代码的行为方式的信息。就目前而言，这个问题无法回答。
@symcbean 我不知道 JQuery 是否是最好的解决方案。首先，我需要将输入字段的值发送到 php 文件，该文件将值放入变量并在后台运行。

标签： javascript php jquery html ajax

【解决方案1】：

您缺少捕获单击“加号”按钮并调用您的 ajax 函数的 javascript。尝试将此 javascriptsn-p 粘贴到您的函数下方：

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

【讨论】：

【解决方案2】：

我会调用一个 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。名为 tag.js 的 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);
                                    }
        });

});
});

这应该可以满足您的需要

【讨论】：

谢谢！我已经更新了我的问题。这应该可以更好地解释我在寻找什么。