如何從我的函數內部進行ajax調用？

我有一個彈出窗口，它是由懸停功能操縱的，它可以很好地處理它自己的問題，並且可以自行運行的ajax調用。現在我的目標是從懸停功能中製作一個ajaxcall，並在div標籤中返回一個部分視圖。我見過很多樣本，但一直無法讓它們工作。這是我的。有人可以幫助我解決這個問題，還是指向一個類似於我的解決方案？如何從我的函數內部進行ajax調用？

這裏有我想要的代碼：

$(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); 

    }); 
});

編輯我更新成功......還是不打電話的動作。

來源

2014-01-18 CloudyKooper

如果你在jsbin.com上做了一個演示並只包含相關代碼（最小），那將會更容易幫助你。 http://sscce.org/ – m59

你有原始代碼中的'sucess：'輸入錯誤，還是隻是一個複製錯誤？ – Barmar

@ m59很好的資源，謝謝！ –

它有助於從責任分離的角度思考這樣的問題。

你有一段代碼表示你的數據，一個模型。然後你有一個你必須更新的視圖，並且你有一個控制器來處理來自用戶的交互或輸入，並對它做些什麼。

在這種情況下，首先用一個函數包裝你的'模型'，這樣你就可以從你的UI中抽象出有關服務器的任何知識。它只知道它必須獲取數據。

而不是使用success處理程序，結帳.promise() API。 jQuery.ajax返回promise，所以我們可以使用它們來獲得優勢。

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

調用getData(id)返回一個Promise，這只是未來發生的事情。無論如何，這是一個承諾，你總會得到某種回報。

在這種情況下，雖然，我們將換出AJAX使用$.Deferred()

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成員的事件對象。這使我們可以編寫更簡潔的代碼並減少重新查詢（重複使用$('#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和鼠標移開事件只是糖。

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

作爲旁白;純粹的jQuery使得編寫一個真正的控制器變得非常困難，因爲在這種情況下，它知道太多關於DOM的東西，並且與它的結構非常相關。你可以用$.proxy之類的東西進一步抽象出來。

而是附着到一組特定的元件（一個或多個）的<a.hover>的，我們這個功能結合<body>，並監聽事件冒泡，由選擇a.hover過濾。在處理很多元素時，這是更高效的。

查看here的工作示例。希望有所幫助！

來源

2014-01-18 02:54:30

如何從我的函數內部進行ajax調用？

回答

相關問題