多个ajax查询失败

时间:2017-06-13 14:01:49

标签: javascript jquery ajax

由于我维护的网站中有下拉框的数量,我编写了一个jquery扩展,它将获取指定的URL,对其进行ajax调用并使用结果填充下拉框。代码一直在工作,但现在当我在页面上有多个下拉框时,大多数(如果不是全部)都会失败。在Chrome开发人员工具中检查它们时,错误是500内部服务器错误。但是,如果我单步执行代码而不是运行代码,那么一切都可以正常运行。 Javascript如下:

(function() {
  (function($, window) {
    $.extend($.fn, {
      loadDropdown: function(selectControl, data) {
        var currentOptions, d, i, id, idField, initialBlank, initialText, initialVal, len, objData, opt, text, textField;
        if (data) {
          objData = data.$values || data;
        } else {
          return;
        }
        idField = selectControl.attr('data-id') || selectControl.attr('dd-id') || 'id';
        textField = selectControl.attr('data-text') || selectControl.attr('dd-text') || 'name';
        initialBlank = selectControl.attr('data-placeholder') || selectControl.attr('dd-placeholder') ? true : false;
        initialText = selectControl.attr('data-initial-text') || selectControl.attr('dd-initial-text');
        initialVal = selectControl.attr('data-initial-val') || selectControl.attr('dd-initial-val');
        currentOptions = [];
        if (initialVal) {
          currentOptions = initialVal.split(',');
        }
        selectControl.find('option :selected').each(function() {
          return currentOptions.push($(this).val());
        });
        selectControl.empty();
        if (initialBlank) {
          opt = $('<option>').text('');
          selectControl.append(opt);
        }
        for (i = 0, len = objData.length; i < len; i++) {
          d = objData[i];
          id = d[idField];
          text = d[textField];
          opt = $('<option>', {
            value: id
          }).text(text);
          if ((currentOptions && currentOptions.length > 0) && $.inArray(id.toString(), currentOptions) !== -1) {
            opt.attr('selected', 'selected');
          }
          if (initialText && initialText === text) {
            opt.attr('selected', 'selected');
          }
          selectControl.append(opt);
        }
        selectControl.trigger('chosen:updated');
        selectControl.trigger('dd:loaded');
      },
      ddbox: function(args) {
        var _this, defaults, opts;
        _this = $(this);
        defaults = $.extend({
          url: _this.attr('data-url') || _this.attr('qf-url') || _this.attr('dd-url'),
          width: _this.attr('data-width') || _this.attr('qf-width') || _this.attr('dd-width') || '100%',
          allow_single_deselect: _this.hasAttr('data-placeholder') || _this.hasAttr('qf-placeholder') || _this.hasAttr('dd-placeholder') || false,
          dropdownLoad: function(event, data) {
            return $.fn.loadDropdown($(event.currentTarget), data);
          },
          dropdownLoaded: function(event) {}
        }, args);
        opts = {
          width: defaults.width,
          allow_single_deselect: defaults.allow_single_deselect
        };
        _this.on('dd:load', function(event, data) {
          return defaults.dropdownLoad.apply(_this, [event, data]);
        });
        _this.on('dd:loaded', function(event) {
          return defaults.dropdownLoaded.apply(_this, [event]);
        });
        _this.chosen(opts);
        $('#overlay').removeClass('overlay-off').addClass('overlay');
        return $.ajax({
          method: 'GET',
          url: defaults.url,
          success: function(html) {
            $('#overlay').removeClass('overlay').addClass('overlay-off');
            return _this.trigger('dd:load', [html]);
          }
        });
      }
    });
    return $(document).ready(function() {
      return $('select[data-url], select[qf-url], select[dd-url]').each(function() {
        return $(this).ddbox();
      });
    });
  })(window.jQuery, window);

}).call(this);

它查询的URL都是以JSON格式返回id / name对的Web API:

{"$id":"1","$values":[{"$id":"2","id":1,"name":"None"},{"$id":"3","id":3,"name":"Safety and Hazard Analysis Software and Design Software"},{"$id":"4","id":4,"name":"Safety Management and Administrative Controls Software"},{"$id":"5","id":2,"name":"Safety System Software"}]}

有人可以告诉我这里发生了什么吗?

编辑: 在下面的评论之后,我将ajax调用更改为同步,一切都开始正常工作。我不禁想到还有其他方法可以做到这一点。

0 个答案:

没有答案