Question

我有一个弹出窗口，它被悬停功能所操作，它可以正常工作，并且ajax调用可以自行运行。现在我的目标是从悬停函数内部创建一个ajaxcall并返回div标签中的部分视图。我见过很多样品，但还没能让它们起作用。这就是我所拥有的。有人可以帮助我解决这个问题，还是指向一个与我类似的解决方案？

这是我正在尝试的代码：

$(function () {

    $(".datepicker").datepicker({ dateFormat: 'mm.dd.yy' })
    $("#dropdownselected1").val($("#categories").val());

});

$(function () {

    var moveLeft = 0;
    var moveDown = 0;

    $('a.popper').hover(function (e) {
        var id = {a:171};
        $.ajax({
            type:"POST",
            url:"/Attendance/Details",
            data:id,
            datatype:"html",
            sucess:function(data){
                $('#div_id').html(data);
            }
        });

        var target = '#' + ($(this).attr('data-popbox'));
        $(target).show();

        moveLeft = $(this).outerWidth();
        moveDown = ($(target).outerHeight() / 2);

    }, function () {
        var target = '#' + ($(this).attr('data-popbox'));
        $(target).hide();
    });

    $('a.popper').mousemove(function (e) {
        var target = '#' + ($(this).attr('data-popbox'));
        leftD = e.pageX + parseInt(moveLeft);
        maxRight = leftD + $(target).outerWidth();
        windowLeft = $(window).width() - 40;
        windowRight = 0;
        maxLeft = e.pageX - (parseInt(moveLeft) + $(target).outerWidth() + 20);
        if (maxRight > windowLeft && maxLeft > windowRight) {
            leftD = maxLeft;
        }

        topD = e.pageY - parseInt(moveDown);
        maxBottom = parseInt(e.pageY + parseInt(moveDown) + 20);
        windowBottom = parseInt(parseInt($(document).scrollTop()) + parseInt($(window).height()));
        maxTop = topD;
        windowTop = parseInt($(document).scrollTop());

        if (maxBottom > windowBottom) {
            topD = windowBottom - $(target).outerHeight() - 20;
        } else if (maxTop < windowTop) {
            topD = windowTop + 20;
        }

        $(target).css('top', topD).css('left', leftD);

    });
});

EDIT 我更新了成功......仍然没有调用此行动。

Answer 1

在责任分离方面有助于思考这样的问题。

您有一段代表您的数据的代码，一个模型。然后你有一个你必须更新的视图，你有一个控制器来处理来自用户的交互或输入，并对它做了一些事情。

首先使用函数将“模型”包装在这种情况下，这样您就可以从UI中抽象出任何有关服务器的知识。它只知道必须获取数据。

不要使用success处理程序，请检查.promise() API。 jQuery.ajax返回promises，因此我们可以利用它们。

function getData(id) {
  return $.ajax({
    url: '/ajax.aspx',
    data: id
  });
}

调用getData(id)会返回一个Promise，这是将来发生的事情。这是一个承诺，无论如何，你总会得到一些回报的价值。

在这种情况下，我们将使用$.Deferred()

将ajax替换为离线示例

function getData(data) {
  var dfd = $.Deferred();
  // Imagine this timeout was actually the handler for XMLHttpRequest
  setTimeout(function() {
    // This is what $.ajax does internally.
    // it just `resolves` the promise it handed you.
    dfd.resolve("it works! " + data);

    // We could also reject it if something went wrong.
    // dfd.reject("omg error");
  }, 1000);
  // $.Deferred makes promises just like $.ajax!
  return dfd.promise();
}

我们可以通过检查事件对象的type成员将事件处理程序或Controller减少到一个函数。这使我们能够编写更清晰的代码并减少重新查询（重复使用$('#someting')形式）。

function onHover(ev) {
  var el = $(this);
  var target = $('#' + el.data('popbox'));

  if (ev.type === 'mouseenter') {
    // Do code to setup API call
    target.text('loading').show();

    // Do API call
    getData('33')  //= returns a promise

    // Then, do code to handle API call
    .then(function(data) {
      target.html(data);
    })

    // If it fails, do something else
    .fail(function(err) {
      console.log(err);
    });
  }
  // mouseout
  else {
    target.hide().empty();
  }
}

最后，为了让我们的“控制器”监听DOM，我们使用.on()而不是弃用的.hover()语法，这对于mouseenter和mouseout事件来说只是糖。

$('body').on('mouseenter mouseout', 'a.hover', onHover);

撇开;纯jQuery使得编写一个真正的控制器变得很难，因为在这种情况下，它对DOM的了解太多，并且与它的结构非常相关。您可以使用$.proxy之类的内容进一步抽象出来。

我们不是附加到一组特定的元素<a.hover>，而是将此函数绑定到<body>，并监听事件冒泡，由选择器{{1}过滤}。在处理许多a.hover元素时，这会更高效。

有关工作示例，请参阅here。希望有所帮助！

如何从我的函数内部进行ajax调用？

1 个答案: