使用Ajax上下文刷新页面的一个部分

Question

当用户点击"清除"按钮时,我正在尝试刷新页面的一部分,目前我正在使用一些代码,我在这里找到了另一个答案:

$('.clear').click(function () {
    $.ajax({
      url: "",
      context: document.body,
      success: function (s, x) {
        $(this).html(s);
      }
    });
});

这会重新加载整个文档正文,如何定位特定的div或类？

  context: document.body.somediv?

Answer 1

关于该context选项的jQuery API:

此对象将成为所有与Ajax相关的回调的上下文.默认情况下,上下文是一个对象,表示调用中使用的ajax设置($ .ajaxSettings与传递给$ .ajax的设置合并).例如,将DOM元素指定为上下文将使得请求的完整回调的上下文,如下所示:

$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $( this ).addClass( "done" );
});

因此,context选项是this在回调函数中设置对象的范围.默认情况下,它是ajax对象,具有当前配置:

$.ajax({
    url: ""
}).done(function(){
    console.log(this); 
    // logs: { url: "", type: "GET", etc... }
    // 
});

如果您希望定位特定部分以加载响应,您可以使用jQuery查找元素并将响应放在该元素中,context与您无关:

$.ajax({
  url: "",
}).success(function(data){
  // data is your response
  $(".some-element").html(data);
});

但是,您可以使用它context来使配置更容易理解,如下所示:

$.ajax({
  url: "",
  context: $(".some-element")
}).success(function(data){
  $(this).html(data);
  // $(this) refers to the context object, in this case $(".some-element")
});

如果您现在希望将ajax响应加载到页面上的其他位置,则只需更改context参数上的选择器即可.