Jquery - 对多个请求使用相同的功能答案

【问题标题】：Jquery - use the same function for multiple requestsJquery - 对多个请求使用相同的功能
【发布时间】：2014-02-18 04:29:42
【问题描述】：

我有一个适用于特定 HTML 按钮的 CLICK 函数。我想在多个按钮上使用它，但是每个按钮都需要将不同的变量传递给同一页面。

按钮

<input type="button" id="scs" value="TEST" />

JQUERY

$("#scs").click(function() {
    $("#status").html("<p>Please Wait! TESTING</p>");
$.ajax({
  url: 'go.php?ab=1',
  success: function(data, textStatus, xhr) {
  alert (data);
}
});
});

如果我有 4 个以上的按钮，每个按钮都使用该功能，调用相同的页面但使用唯一值，我该如何调整？

EG：

<input type="button" id="update" value="update" /> Calls go.php?up=1
<input type="button" id="new" value="new" />  Calls go.php?new=1

等等……

谢谢

【问题讨论】：

标签： php jquery ajax button load

【解决方案1】：

为您的按钮提供相同的类并使用类名调用代码，并为每个按钮添加数据属性以检索单独的值。

试试这个：

<input type="button" class="clickButton" data-value="go.php?up=1" value="Update" />
<input type="button" class="clickButton" data-value="go.php?new=1" value="New" />

$(".clickButton").click(function() {
    $("#status").html("<p>Please Wait! TESTING</p>");

    $.ajax({
        url: $(this).attr("data-value"),
        success: function(data, textStatus, xhr) {
            alert (data);
            $(this).prop('value', 'New Text');
        }
    });
});

【讨论】：

谢谢 - 我喜欢这个解决方案，因为它让我可以选择添加调用不同页面的新按钮。一个问题 - 成功后是否可以更新相关按钮文本？我知道如何做一个特定的按钮，但不是这样.. thx
尝试将 $(this).prop('value', 'New Text') 添加到成功函数中。我已经更新了答案以包括这个。如果您想为每个按钮添加不同的“新文本”，请添加另一个属性，例如我们用于 URL 的属性并使用它:)
谢谢 - 我试过了，又试了一次，但它没有更新按钮上的文本。
您使用的是什么版本的 JQuery？如果您使用的是 1.6 之前的版本，请尝试：$(this).attr('value', 'New Text')，或者如果这不起作用，请尝试：$(this).val('New Text')
用于测试的最新 jquery。仍然没有更新按钮文本！

【解决方案2】：

使用 data-attribute 来设置 url。使用事件委托来定位按钮

<input type="button" class='btn' data-params='up=1' value="update" /> Calls go.php?up=1
<input type="button" class='btn' data-params='new=1' value="new" />  Calls go.php?new=1

$("button").on('click', '.btn', function() {
    var url = 'go.php?' + $(this).data('params');
    $("#status").html("<p>Please Wait! TESTING</p>");
    $.ajax({
        url: url,
        success: function(data, textStatus, xhr) {
            alert (data);
        }
    });
});

【讨论】：

【解决方案3】：

使用点击事件的类和新属性来找到像'data-id'这样的按钮

<input type="button" class="clickevent" data-id="update" value="update" />

jQuery

`

$(".clickevent").click(function() {
    $("#status").html("<p>Please Wait! TESTING</p>");
$.ajax({
  url: $(this).attr('data-id'),
  success: function(data, textStatus, xhr) {
  alert (data);
}
});
});

`

【讨论】：

【解决方案4】：

您可以通过单击按钮的值来检查并为 ajax 请求使用“url”变量：

    $("button").click(function() {
        $("#status").html("<p>Please Wait! TESTING</p>");
        var url='';
        var value = $(this).val();
        if(value == 'update'){
          url='go.php?up=1';
        } else if(value=='new') {
          url='go.php?new=1';
        } else if(value=='scs') {
          url='go.php?ab=1';
        }
    $.ajax({
      url: url,
      success: function(data, textStatus, xhr) {
      alert (data);
    }
    });
    });

【讨论】：

【解决方案5】：

为每个按钮使用相同的类

<input type="button" id="update" class="click" value="update" /> 
<input type="button" id="new" class="click" value="new" />

$(document).ready(function(){
               $(".click").click(function(){
                  var val=$(this).val();
                  if(val =="update")
                      {
                          $.post("go.php",{'up':'1'},function(data){
                              alert(data);
                          });
                      }
                      else
                          {
                              $.post("go.php",{'new':'1'},function(data){
                              alert(data);
                          });
                          }

               }); 
            });

【讨论】：