Question

请看看

<div class="item">
    <div class="section">
        <a href="/test.php?id=1" class="clickme">Click Item 1 </a>
    </div>
</div>
<div class="item">
    <div class="section">
        <a href="/test.php?id=2" class="clickme">Click Item 2 </a>
    </div>
</div>
<div class="item">
    <div class="section">
        <a href="/test.php?id=3" class="clickme">Click Item 3 </a>
    </div>
</div>


$('.clickme).click(function(event) {
    event.preventDefault();
    var stringURL = $(this).attr("href");
    $.ajax({
        type: "get"
        , url: stringURL
        , data: "ajax=1"
        , success: function(html){ //so, if data is retrieved
            //append 
        }
     });    
}); //close click(

如果它是单个区域区域，我可以使用其id对其进行定位并添加内容。但是任何想法我如何知道根据点击填充最新内容的哪个部分以及外部内容是否已经存在（即已经进行了调用）只更新该部分。如果您帮助如何仅显示/隐藏加载图像到该部分，那将是很好的。

由于

Answer 1

好吧，您可以在jquery中获取所点击的$（href）对象的父级，然后根据该选择填充“section”div。您将测试null并根据该条件追加或覆盖。

吉姆

Answer 2

您必须让javascript函数知道要更新的部分。不是为每个部分使用一个类，而是为每个onclick分配一个<a>，为函数提供该部分的节号：

<a href="/test.php?id=2" onclick="javascript: updateContent(2);">Click Item 2 </a>

另外，给各部分提供唯一的ID（例如）：

<div class="section" id="section2">

然后你的JavaScript会看起来像;

updateContent(id) {
    event.preventDefault();
    var stringURL = "index.php?id=" + id;
    $.ajax({
        type: "get", 
        url: stringURL, 
        data: "ajax=1", 
        success: function(html, id){ 
             //use javascript to update the correct section
        }
     });    
}

请注意，我不确定成功部分中的function(html, id){}是否有效，也许您需要为此创建单独的功能。

Answer 3

至于知道要填充哪个内容区域，您可以使用$(this)知道哪个内容区域已被点击，并且可以使用$(this).parent()引用其部分，假设您想要的元素是.section元件。

$('.clickme').click(function(event) {
    event.preventDefault();
    var stringURL = $(this).attr("href");
      // store the parent of the element clicked
    var $section = $(this).parent();
    $.ajax({
        type: "get"
        , url: stringURL
        , data: "ajax=1"
        , success: function(html){ 
                // Append html to the section
             $section.append(html);
        }
     });    
});

如果<a>唯一要做的就是AJAX调用，那么一个选项就是取消绑定success回调中的事件。

var $th = $(this);

然后在AJAX成功：

$th.unbind('click');

如果这不是一个选项，那么只要知道它是否已被填充，您就可以查找在.append()之前收到的某些内容（或者在您提出请求之前，如果内容已知）。

另一种选择是在.section元素上放置某种标记，如类，如：

$section.addClass('populated');

...表示已填充。然后检查该类，并防止ajax存在。

根据实际情况，还有其他选择。

Answer 4

$('.clickme).click(function(event) {
    event.preventDefault();
    var stringURL = $(this).attr("href");
    var currentSection = $(this).parent().get(0);
    $.ajax({
        type: "get"
        , url: stringURL
        , data: "ajax=1"
        , success: function(html){ //so, if data is retrieved
            //append 
            $(currentSection).append(html);
        }
     });    
});

顺便说一下，如果你使用“ajax = 1”参数只是为了确定请求是否是ajax，你可以完全取消它。 jQuery发送带有ajax请求的“HTTP_X_REQUESTED_WITH”标头，你可以用它来检测请求是ajax。 detecting ajax

如何使用ajax附加外部内容？

4 个答案: