JavaScript/jQuery：如何根据所做的选择提供过滤的Ajax数据

我有多个按钮，代表不同的类别。当用户单击其中一个时，我希望根据选择提供过滤数据。我不想发出多个Ajax请求，而是一个请求和一个事件侦听器，用于检查单击了哪个按钮，并根据选择提供过滤数据

下面的代码不起作用，因为我认为if、else语句嵌套在Ajax请求中。如何在不发出多个Ajax请求的情况下实现所需的结果

$( "#buttonA, #buttonB, #buttonC, #buttonD" ).click(function() {

    $.ajax({
      url: "{% url 'data_for_buttons' %}",
      method: 'GET',
      data : {
      my_category: 1,
             },
      success: function(dataset){

          if (this.id == 'buttonA') {
              alert('Button A is clicked'); // Provide A data to user
           }
          else if (this.id == 'buttonB') {
             alert('Button B is clicked'); // Provide B data to user
          }
          else if (this.id == 'buttonC') {
             alert('Button C is clicked'); // Provide C data to user
          } 
          else (this.id == 'buttonD') {
             alert('Button D is clicked'); // Provide D data to user
          }

});

---

上下文

，您的响应函数需要有正确的上下文。因此，通过以下方式为ajax请求设置它：

context: $(this),
success: function(dataset){
    console.log($(this).attr('id'));
}

---

上下文

，您的响应函数需要有正确的上下文。因此，通过以下方式为ajax请求设置它：

context: $(this),
success: function(dataset){
    console.log($(this).attr('id'));
}

---

要知道单击了哪个按钮，可以尝试以下操作：

$( "#buttonA, #buttonB, #buttonC, #buttonD" ).on('click', function(eventObj) {
$.ajax({
      url: "{% url 'data_for_buttons' %}",
      method: 'GET',
      data : {
      my_category: 1,
             },
      success: function(dataset){

          if (eventObj.currentTarget.id == 'buttonA') {
              alert('Button A is clicked'); // Provide A data to user
           }
          etc ...

}

---

要知道单击了哪个按钮，可以尝试以下操作：

$( "#buttonA, #buttonB, #buttonC, #buttonD" ).on('click', function(eventObj) {
$.ajax({
      url: "{% url 'data_for_buttons' %}",
      method: 'GET',
      data : {
      my_category: 1,
             },
      success: function(dataset){

          if (eventObj.currentTarget.id == 'buttonA') {
              alert('Button A is clicked'); // Provide A data to user
           }
          etc ...

}

---

如果我没有误解你的问题，像这样的事情应该会奏效：

$( "#buttonA, #buttonB, #buttonC, #buttonD" ).click(function() {
   const BUTTON_ID_TO_CATEGORY_MAP = {
      buttonA: 1,
      buttonB: 2,
      buttonC: 3,
      buttonD: 4
    };
    let category = BUTTON_ID_TO_CATEGORY_MAP[this.id];

    $.ajax({
      url: "{% url 'data_for_buttons' %}",
      method: 'GET',
      data : {
             my_category: category,
      },
      success: function(dataset){
                    // do stuff 
      }});
});

所以这里唯一的区别是，我们正在检查在执行AJAX调用之前按下了哪个按钮，以便可以对与单击的按钮对应的类别进行AJAX调用

---

这意味着，当我们得到结果时，它已经被过滤了（如果我正确理解您的AJAX调用），因此我们不必再担心按钮了。

如果我没有误解您的问题，类似这样的操作应该可以：

$( "#buttonA, #buttonB, #buttonC, #buttonD" ).click(function() {
   const BUTTON_ID_TO_CATEGORY_MAP = {
      buttonA: 1,
      buttonB: 2,
      buttonC: 3,
      buttonD: 4
    };
    let category = BUTTON_ID_TO_CATEGORY_MAP[this.id];

    $.ajax({
      url: "{% url 'data_for_buttons' %}",
      method: 'GET',
      data : {
             my_category: category,
      },
      success: function(dataset){
                    // do stuff 
      }});
});

所以这里唯一的区别是，我们正在检查在执行AJAX调用之前按下了哪个按钮，以便可以对与单击的按钮对应的类别进行AJAX调用

---

这意味着当我们得到结果时，它已经被过滤了（如果我正确理解您的AJAX调用的话），所以我们不必再担心按钮了。

完全正确，您也可以

var elem=$（这）

在$.ajax之前设置它，并将其用作函数参数：

success:function（data）{successCallback（data，elem）；}

这里回答了这种方法，您不想让

my_category:1

部分反映按下了哪个按钮吗？如果是这样，这个解决方案将无法解决它在$.ajax之前设置它，并将其用作函数参数：

success:function（data）{successCallback（data，elem）；}

这里回答了这种方法，您不想让

my_category:1

部分反映按下了哪个按钮吗？如果是这样，此解决方案将无法修复它。