有没有办法对单个页面上的多个项目使用相同的jQuery Ajax

Is there a way to use the same jQuery Ajax for multiple items on a single page?

本文关键字：项目 Ajax jQuery 单个页 有没有      更新时间：2023-09-26

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

$(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等等......

为元素指定一个公共类和一个自定义数据属性：

<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
  });
});

像这样创建这个函数：

  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>
相关文章：