为不同的 HTML 按钮 (AJAX） 编写不同的 PHP 代码

Writing different PHP code for different HTML buttons (AJAX)

本文关键字：代码 PHP HTML 按钮 AJAX      更新时间：2023-09-26

我正在尝试为不同的HTML <button>元素编写不同的PHP代码，但显然它适用于页面上的所有按钮。这是我的一个按钮：

<button name="plus" id="plus" type="button" onclick="plus()">+</button>

这是我尝试制作的函数，它适用于页面上的所有按钮：

$(document).ready(function() {
    $("button").click(function() {
        $.ajax({
            type: 'POST',
            url: 'plus.php',
            success: function(data) {
                //
            }
        }); 
    }); 
});

问题：

  1. 如何为特定按钮编写函数？

  2. 为什么我必须编写 type="button" 才能让它们工作？

  3. 在哪里编写 AJAX 函数？在<head></head>或身体的任何地方？

1） 如何为特定按钮编写函数？

您可以通过在button元素上放置特定的 id 或类来执行此操作，以便您可以一次选择单个元素或组。例如，$('#plus')将仅面向 HTML 示例中的 id="plus" 元素。

2）为什么我必须写type="button"才能工作？

这是因为按钮的默认type是 submit 。因此，如果按钮在form它将在您的JS有时间完成之前提交表单。

3） 我在哪里编写 AJAX 函数？在头部或身体的任何部位？

两者都很好，但如果将其放在<head>请确保将代码放在 document.ready 处理程序中。

最后，我建议您删除HTML中的onclick="plus()"属性。您似乎没有使用它，即使您是，通过 JS 附加事件被认为是比使用过时事件属性更好的做法。

当然它将应用于所有按钮，因为您选择了所有按钮在Jquery中，当你选择一个特定的元素时，你必须使用一个id，为了选择一个id，在你的情况下，你可以这样做。

$(document).ready(function(){
    $("#plus").click(function(){
        $.ajax({
            type: 'POST',
            url: 'plus.php',
            success: function(data) {
                //
            }
        }); }); });

它现在可以工作

首先，您已经指定了单击按钮时要调用的方法，属性onclick执行此操作，因此当有人单击该按钮时，将调用函数 plus。

如果你想用jQuery做到这一点，请使用click(function(event){...});

下一个

为什么我必须编写 type="button" 才能让它们工作？

如果您不使用该type="button"不会有什么坏处，当您想使用它时会使用它 <button>...</button> ，对于提交表单，type的默认值仅为button，

在哪里编写 AJAX 函数？在<head></head>或身体的任何地方？

您需要在脚本中编写该 ajax 部分，您可以将<script></script>放在您的身体或头部，任何您想要的地方。

所以 ajax 的东西看起来像，

<script>
    $.ajax({
    ....
    });
</script>
相关文章：