如何通过回调将一个 AJAX 处理程序用于多种用途？-解网

问：

我在一个对象中写了一段代码。您可以看到一个对象，其中包含用于添加新客户的函数和用于进行 AJAX 调用的方法customers

var sys = {
  customers: {
    addNew: function(ref, cb = null) {
      if (!cb) { // so it can check if the call to this method was for requesting ajax request or handling its response . note i am sending the callback function reference same as the current
        core.request({
          d: $('form').serialize()
        }, 'sys.customers.addNew', ref);
      } else {
        if (ref.status) {
          $('.customers-list').append('<li>' + ref.customer.name + '</li>');
          alert('success')
        }
      }
    },
    updateRowAfterAdd: function() {
      // or i could use this for handling callback by passing its reference instead of the upper same function
    }
  },
  request: function(p = {}, c = null, e = false) {
    $.ajax({
      url: "/to/my/server",
      data: {
        p: p
      },
      type: 'post',
      dataType: 'json',
      beforeSend: function() {

      },
      success: function(r) {
        if (c != null)
          (e ? eval("(" + c + "(r,e));") : eval("(" + c + "(r));"));
      }
    });
  }
}

$(document).on('click', '.addNew', function() {
  sys.customers.addNew($(this));
});

此示例中的想法是通过传递用于处理响应的回调函数引用来调用 AJAX 方法。success

如果你看一下这个方法，它以两种方式工作。在第二个参数的帮助下，它确定对此函数的调用是为了发送 AJAX 请求或处理其响应。addNew()cb

我在回调中使用我知道是邪恶的，所以我想了解如何在不使用的情况下做到这一点？eval()successeval()

我的页面上运行了多个需要 AJAX 调用的东西，我不想重写它们中的每一个。

AJAX的方法也需要这个。beforeSuccess()

JavaScript jQuery AJAX 回调

感谢您的回复。是的，我不想使用 eval（）。这是我想用任何其他现有解决方案取代的主要事情。对于客户和要求，在同一个地方。请不要考虑它。因为我提取了这段代码只是为了组成这个例子。而对于布尔参数部分。我会看看它，并努力让它变得更好。我现在只想摆脱eval（）

答：

0赞 Rory McCrossan 2/12/2022 #1

你使用的设计模式似乎是一个不必要的抽象，这导致了它解决的更多问题。

一个更好的主意是有一个中央“服务”层，它向你的服务器端发出请求并处理响应。如果你想进一步抽象它，你可以使用其他领域逻辑抽象来通过单个类处理 AJAX 请求和响应，但是在那个阶段，我认为你最好使用现有的框架来为你做这件事。

强烈建议使用 Angular，因为它的 MVC 模式无论如何都是你要去的地方。

如果你确实想推出自己的简单版本，那么一个简单的例子将如下所示：

$(document).on('click', '.addNew', function() {
  services.customers.save($('form').serialize());
});

// in a service layer JS file, far away from UI logic...
let services = {
  customers: {
    save: requestData => {
      $.ajax({
        url: '/to/my/server',
        type: 'post',
        dataType: 'json',
        data: $('form').serialize(),
        success: services.customers.renderUi
      });
    },
    renderCustomerUi: customerData => {
      // optional: extract the UI update logic to your UI layer and pass in the callback as an argument
      if (customerData.status) {
        $('.customers-list').append('<li>' + customerData.customer.name + '</li>');
      }
    }
  }
}

是的，我知道我可以在其他框架中实现这一点。但是我想在我使用 jquery 和简单 js 的当前代码中解决这个问题。以及您为我提供的解决方案.我以前见过这个.但这没有帮助，因为作为回应，我有固定的功能处理。因为我想使用动态函数回调

上一个：如何每 X 小时调用一次 ajax 回调函数烧瓶

下一个：如何调用进行ajax调用的异步函数[duplicate]

如何通过回调将一个 AJAX 处理程序用于多种用途？

How to use one AJAX handler for multiple purposes with callbacks?

评论

评论