为不同的 HTML 按钮编写不同的 PHP 代码 (AJAX)答案

【问题标题】：Writing different PHP code for different HTML buttons (AJAX)为不同的 HTML 按钮编写不同的 PHP 代码 (AJAX)
【发布时间】：2016-03-12 15:15:46
【问题描述】：

我正在尝试为不同的 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) {
                //
            }
        }); 
    }); 
});

问题：

如何为特定按钮编写函数？
为什么我必须写 type="button" 才能让它们工作？
在哪里编写 AJAX 函数？在<head></head> 或身体的任何地方？

【问题讨论】：

如果你想写一个函数到一个特定的按钮，你必须使用属性 ID 然后在 js 中使用像这样的 id 选择器 $('#id').click(function( ){........});事实上，你可以将函数直接放在 html 中：然后在你的 js 中你必须声明函数： function plus( ){...做一些事情.....} 我认为您的 js 代码的最佳实践是创建一个文件 jsfunctions.js 并包含一个标签

标签： javascript php jquery html ajax

【解决方案1】：

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

您可以通过在 button 元素上放置特定的 id 或类来做到这一点，这样您就可以一次选择单个元素或它们的组。例如，$('#plus') 将仅定位 HTML 示例中的 id="plus" 元素。

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

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

3) 我在哪里编写 AJAX 函数？是在头部还是在身体的任何部位？

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

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

【讨论】：

【解决方案2】：

肯定会应用到所有按钮，因为您选择了所有按钮在 Jquery 中，当您选择特定元素时，您必须使用 id 并在您的情况下选择 ID，您可以这样做

$(document).ready(function(){
    $("#plus").click(function(){

        $.ajax({
            type: 'POST',
            url: 'plus.php',
            success: function(data) {
                //

            }
        }); }); });

现在可以使用了

【讨论】：

【解决方案3】：

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

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

接下来，

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

不使用type="button"也没什么坏处，当你想使用<button>...</button>时使用它，用于提交表单，type的默认值仅为button，

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

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

所以 ajax 看起来像，

<script>
    $.ajax({
    ....
    });
</script>

【讨论】：