Question

我正在开发用于债务人管理的Web应用程序，并且正在重构代码并尝试遵守关注点分离的原则。但是AJAX的异步特性让我头疼。

用户可以从jQuery对话框中为债务人设置标志，然后将其存储在数据库中。如果成功，对话框将显示一条通知。到目前为止，我已经处理了jQuery Ajax成功回调函数中的所有事情：验证输入，执行ajax请求并更新对话框的内容。

这当然会导致意大利面条式代码。

因此，我创建了一个AjaxHandler类，该类具有用于设置标志的静态方法，该标志由对话框调用。我以为对话框可以根据AjaxHandler的返回值进行更新，但我没有异步性。

以下问题有助于解决返回值。

How do I return the response from an asynchronous call?

但是如何在不违反SoC原理的情况下更新对话框？

编辑

$("#button").on("click", function() {
    var returnValue = AjaxHandler.setFlag();
    if(returnValue) { $("#div").html("Flag set"); }
    else { $('#div").html("Error setting flag");
});

class AjaxHandler { 
    static setFlag(){
        $.ajax({
            type: "POST",
            url: "ajax/set_flag.php",
            success: function(returndata){
            return returndata; //I know this does not work because of                         
            //ASYNC,but that is not the main point.                                                                        


        }
        }
    })

Answer 1

考虑在这里使用事件吗？

$("#button").on("click", function() {
  $('body').trigger('getdata', ["", $('#div')]);
});
$('body').on('getdata', function(event, datasent, myelement) {
    var attach = event.delegateTarget;// the body here
    var getAjax = $.ajax({
        type: "POST",
        url: "ajax/set_flag.php",
        data: datasent // in case you need to send something
      })
      .done(function(data) {
        $(attach).trigger('gotdata', [data, myelement]);
      });
    getAjax.fail(function() {});

  })
  .on('gotdata', function(event, datathing, myelement) {
    myelement.html(!!datathing ? "Flag set", "Error setting flag");
  });

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

请注意，在这些事件处理程序中，您还可以调用某些函数，为该函数传递一个名称空间，基本上可以根据您的设计进行操作。

Answer 2

处理异步响应的方法有很多，但是jQuery的方法略有不同，因此当您已经在使用jQuery时，可以通过以下方式进行处理：

$('#button').on('click', AjaxHandler.setFlag)

class AjaxHandler {
  static setFlag () {
    this.loading = true
    this
      .asyncReq('ajax/set_flag.php')
      .done(function () {
        $('#div').html('Flag set')
      })
      .fail(function (err) {
        $('#div').html('Error setting flag. Reason: ' + err)
      })
      .always(function () {
        this.loading = false
      })
  }

  asyncReq (url) {
    return $.ajax({
      type: 'POST',
      url: url
    })
  }
})

关注点和JQuery AJAX回调的分离

编辑

2 个答案: