有没有办法为单个页面上的多个项目使用相同的 jQuery Ajax？答案

【问题标题】：Is there a way to use the same jQuery Ajax for multiple items on a single page?有没有办法为单个页面上的多个项目使用相同的 jQuery Ajax？
【发布时间】：2015-03-12 03:21:55
【问题描述】：

我有一个页面，人们可以在其中将内容添加到他们的“收藏夹”列表中：

$(function(){
    $('.doit-01234').click(function (e) {
      e.preventDefault();
      $.ajax({
        url: "https://www.domain.com/page.php?add=01234",
        type: "GET",
        success: function (data) {
            $(".result-01234").html('<span class="icon-favorite-green"></span>');
        },
        error: function (xhr, ajaxOptions, thrownError) {
            $(".result-01234").html('<span class="icon-favorite-red"></span>');
        },
        timeout: 15000
      });
    });
 });

项目添加page.php?add=01234。然而，同一页面可能有 20 或 30 个项目，人们可以将它们添加到他们的收藏夹中。有没有一种简单的方法可以只为多个 ID 使用此脚本的一个实例，而不是在每个项目之后一遍又一遍地使用相同的 jQuery 代码？

意思是page.php?add=9999 将在调用.doit-9999 时更新.result-9999，而page.php?add=5151 将更新.result-5151 等等...

【问题讨论】：

标签： javascript jquery ajax

【解决方案1】：

给你的元素一个通用类和一个自定义数据属性：

<div class="ajax doit-01234" data-id="01234"></div>

然后使用 1 个处理程序：

$('.ajax').click(function (e) {
  e.preventDefault();
  var id = $(this).data("id");
  $.ajax({
    url: "https://www.domain.com/page.php?add=" + id,
    type: "GET",
    success: function (data) {
        //Concatenate a selector based on the "id" in the data attribute
        $(".result-" + id).html('<span class="icon-favorite-green"></span>');
    },
    error: function (xhr, ajaxOptions, thrownError) {
        //Concatenate a selector based on the "id" in the data attribute
        $(".result-" + id).html('<span class="icon-favorite-red"></span>');
    },
    timeout: 15000
  });
});

【讨论】：

太棒了。非常感谢！ :)
".ajax" 也可以是"div[class^='doit-']"。

【解决方案2】：

像这样创建这个函数：

  function Name (e) {
  var code =  01234;//extract your code like 1234 here by splitting or..
  e.preventDefault();
  $.ajax({
    url: "https://www.domain.com/page.php?add=01234",
    type: "GET",
    success: function (data) {
        $('.result-'+code).html('<span class="icon-favorite-green"></span>');
    },
    error: function (xhr, ajaxOptions, thrownError) {
        $('.result-'+code).html('<span class="icon-favorite-red"></span>');
    },
    timeout: 15000
  });
});

现在你想在哪里调用这个函数，你可以这样调用： HTML：

<button onclick="Name(this);">Hello</button>

【讨论】：