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

I'm trying to refresh just one part of my page when a user clicks a 'clear' button, currently I'm using a bit of code I hacked off another answer I found on here:

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

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

This reloads the whole document body, how do I target a particular div or class?

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

  context: document.body.somediv?

7 个解决方案

#1

jQuery API about the context option:

关于上下文选项的jQuery API：

This object will be made the context of all Ajax-related callbacks. By default, the context is an object that represents the ajax settings used in the call ($.ajaxSettings merged with the settings passed to $.ajax). For example, specifying a DOM element as the context will make that the context for the complete callback of a request, like so:

此对象将成为所有与Ajax相关的回调的上下文。默认情况下，上下文是一个对象，表示调用中使用的ajax设置（$ .ajaxSettings与传递给$ .ajax的设置合并）。例如，将DOM元素指定为上下文将使得请求的完整回调的上下文，如下所示：
$.ajax({
  url: "test.html",
  context: document.body
}).done(function() {
  $( this ).addClass( "done" );
});

So, the context option is to set the scope of the this object in the callback functions. By default it is the ajax object, with the current configuration:

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

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

If you wish to target a specific section to load the response in, you can just use jQuery to find the element and put the response in that element, context is not relevant for you:

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

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

However, you can use context to make the configuration a bit easier to understand, like so:

但是，您可以使用上下文使配置更容易理解，如下所示：

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

If you now want your ajax response to be loaded somewhere else on the page, you just have to change the selector on the context parameter.

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

#2

Try

尝试

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

Can also access div by its class like

也可以像它的类一样访问div

$('.classOfDiv')

Have u tried using of context

你有没有尝试使用上下文

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

In success

成功

this.div.html(s);

#3

You can use DIV id or class name to target a particular div element.

您可以使用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

#4

If I understand correctly,you can simply call .load() from a click event and pass it the href of the link:

如果我理解正确，您只需从click事件中调用.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

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

#6

If you want to load only particular div via Ajax then use jquery load event like this

如果你想通过Ajax只加载特定的div，那么使用像这样的jquery load事件

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

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

});

If you to perform some kind of action then add function inside load event like this

如果你要执行某种操作，那么在load事件中添加这样的函数

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

#7

Hi if you want that ajax output reflect on a particular div, Please make sure that div has Id or class so we can easily trace that on DOM. Suppose that div has class content-output then following script will work for you.

嗨，如果你想要ajax输出反映在一个特定的div上，请确保div有Id或类，以便我们可以轻松地在DOM上跟踪它。假设div具有类内容输出，那么下面的脚本将适合您。

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

#1