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

【问题标题】：Refreshing one section of a page using Ajax context使用 Ajax 上下文刷新页面的一部分
【发布时间】：2013-12-19 10:32:58
【问题描述】：

当用户单击“清除”按钮时，我正在尝试仅刷新页面的一部分，目前我正在使用一些代码，我破解了我在此处找到的另一个答案：

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

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

  context: document.body.somediv?

【问题讨论】：

只需使用任何返回 DOM 节点的 javascript/jquery 方法：context: document.getElementById('divId') 或更少跨浏览器 window.divId
Romjin 的回答很好，但实际上我最终还是使用了你的方法，因为它完全符合我的要求

标签： jquery html ajax refresh

【解决方案1】：

试试

 success: function (s, x) {
    $('#yourdiv').html(s);//yourdiv is id of div u want to update
    }

也可以通过类来访问div，比如

$('.classOfDiv')

你试过使用上下文吗

context: {div:$('#yourdiv')}

成功

this.div.html(s);

【讨论】：

OP 要求使用上下文
只需检查 $.ajax DOC 或查看 Justus Romijn 回答中的引用

【解决方案2】：

您可以使用 DIV id 或类名来定位特定的 div 元素。

<div id="div1" class="class1">
    <div id="div2" class="class2">
    </div>
</div>


$('#div2').html(your-text); // using ID

$('.class2').html(your-text); // using Class

【讨论】：

我要问的是如何在 ajax 中定位特定的类

【解决方案3】：

您好，如果您希望 ajax 输出反映在特定的 div 上，请确保该 div 具有 Id 或类，以便我们可以轻松地在 DOM 上跟踪它。假设 div 有 content-output 类，那么下面的脚本会为你工作。

$('.clear').click(function () {
$.ajax({
url: "",
success: function (s, x) {
$('.content-output').html(s);
}
});
});

【讨论】：

context: document.body 这里的目的是什么？
这个场景不需要，所以我们可以转义，因为我们指定了div

【解决方案4】：

如果我理解正确，您可以简单地从点击事件中调用 .load() 并将链接的 href 传递给它：

HTML:

<a class="link" href="page.php?id=10">Click Here<a>

JS:

$(".link").click( function(event) {
    event.preventDefault();
    $("#text").load($(this).attr("href"));
});

see the demo

【讨论】：

【解决方案5】：

jQuery API 关于context 选项：

这个对象将成为所有 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 参数上的选择器。

【讨论】：

【解决方案6】：

$('.clear').click(function () {
$.ajax({
url: "",
//context: document.body,  //you don't need a context
success: function (s, x) {
$(.myClass).html(s);       
//now the target is class myClass or you can use 
//#myID if you want to have an id as target
}
});
});

【讨论】：

【解决方案7】：

如果您只想通过 Ajax 加载特定的 div，请使用 jquery load 事件，如下所示

//clear button click event
$('.clear').click(function () {

  // load ajax response inside result id (html element)
  $( "#result" ).load( "URL" );

});

如果您要执行某种操作，然后像这样在加载事件中添加函数

$( "#result" ).load( "URL", function() {
  alert( "Load was performed." );
});

【讨论】：