点击按钮时使用Ajax重新加载div内容

Question

思路是：我有一个主DIV，其中包含汽车信息的小DIV，每行分为两个，我通过查询数据库得到这些信息。当我按下按钮时，我想重新加载来自数据库的新内容替换主要内容，这是否可能？请给予建议。

代码如下：

<div class="SearchBlocks">
    <div class="row">
        <div class="car_section">INFO</div>
        <div class="car_section">INFO</div>
        <div class="car_section">INFO</div>
        <div class="car_section">INFO</div>
        ......

    </div>
    <h2 class="load_more"><a id="more_link" href="#">Load more <i class="icon-custom_arrow"></i></a></h2>
</div>

- Abude

---

可以实现。您目前尝试了什么？另外，您使用的后端技术和数据库是什么？ - Kenneth

@Kenneth 这是使用 PHP MySQL 自定义的 WP，我对此并没有太多经验，所以并没有尝试过很多... - Abude

你至少需要展示一些努力。SO不是一个免费的程序员网站。网络上有很多例子。我建议你尝试一些东西，当你真正卡住时，可以回来问一个具体的问题。 - Kenneth

@Kenneth，正如您所看到的，这不是实际的代码，因此我并不是在解决我的个人问题，而是为其他人寻找最佳的Ajax重新加载解决方案。 - Abude

Answer 1

    function reload(url){
       $.get(url, function(data){      // $.get will get the content of the page defined in url and will return it in **data** variable 
            $('#row').append(data);
       }
    }

$('#more_link').click(function(e){ 
        e.preventDefault();
        var url = 'http://example.com/somepage.html';
        reload(url);  // this calls the reload function
});

- Ashkan Mobayen Khiabani

---

谢谢您的回答；您能否请写一些描述呢？ - Abude

请注意，仅当URL在同一域（和子域）中时，Ajax才能正常工作。它不适用于来自其他网站的URL。 - Ashkan Mobayen Khiabani

Answer 2

您还没有展示生成 AJAX 请求的确切代码，但是一般的模式应该是这样的，其中更新逻辑被提取到自己的函数中，在页面加载和单击 #reload_cars 按钮时都会调用该函数。

function getData() {
    $.ajax({
        url: 'yoururl.foo',
        success: function(data) {
            $('#row .car_section').remove();
            $('#row').append(data);
        }
    });
}
$('#reload_cars').on('click', getData);
getData();

- Rory McCrossan

---

谢谢您的回答，我忘了提到URL不是静态的，该页面是从搜索中加载的，因此将类似于：URL/New-york和URL/Las-Vegas等，那么我如何在您的代码中添加url以适应我的情况呢？ - Abude

@Jimmy，我认为你应该在原始帖子中提供更多的细节。你可以使用所需的值附加URL：url: 'URL/' + location，假设location是保存值的变量。 - Rory McCrossan

我尝试使用特定的URL并测试该页面，但代码似乎不太起作用，什么也没有发生，只是跳转到页面的开头并将URL更改为`URL/#'。 - Abude

请再次更新您的问题，并提供代码细节。我无法调试看不到的东西 ;) - Rory McCrossan

谢谢Rory！是的，我更新了HTML并添加了更多细节。主div内部的数据来自一个没有限制的查询，因此大约有30到40个结果。我想将其限制为10个，并希望加载下一个10个并删除前面的10个，就像这样。 - Abude

Answer 3

只需使用

    function refreshDiv(){
       var container = document.getElementById("divId");
       var content = container.innerHTML;
       container.innerHTML= content;
    }

- user2511140

---

谢谢你的回答！document.getElementById("divId"); 但是在你的代码中 divId 在哪里呢？ - Abude

"divId" 是您想要重新加载的 div 的 id。 - user2511140