Question

我正在使用jQuery在div“example-placeholder”

中加载一个新页面

<script>
function example_ajax_request() {
  var parameters = "ajax.html?";
  $('example-placeholder').load(parameters);
}
<script>

<div id="example-placeholder">
<p>Start typing text here and it will be replaced by the results list</p>
</div>

这会将文件 ajax.html 按预期加载到div中（为了清晰起见，我在“？”之后省略了参数，但它们工作正常）

我想要做的是使用 ajax.html中生成的链接将ajax.html重新加载到同一个div中，但使用不同的参数。

例如，我有一个由ajax.html生成的结果列表，它显示了一堆分页链接。我想将 ajax.html？page = 2 加载到div“example-placeholder”中，而无需重新加载整个页面。

Answer 1

$('#example-placeholder a').live('click', function(e) {
   e.preventDefault(); 
   $('#example-placeholder').load($(this).attr('href'));
});

这个脚本应该在example-placeholder创建window.location承诺之后将函数绑定到example-placeholder承诺，以便将事件处理程序绑定到现在和将来的所有匹配元素。

live()会阻止链接更改{{1}}。

最后一行尝试使用链接url更新{{1}}页面内容。

Answer 2

在ajax.html页面内，只要您准备好重新加载，请执行以下操作：

window.location = newUrl;

其中newUrl可以是'/ajax.html?page=2&x=y'

之类的字符串

Answer 3

试试这个：

<script>
function example_ajax_request(event) {

  var 
     parameters = "ajax.html?";

  if (event) {
    event.preventDefault();
    parameters = $(this).attr('href');
  }

  $('example-placeholder').load(parameters);

  return false;
}

$("example-placeholder").delegate("a", "click", example_ajax_request)

<script>

<div id="example-placeholder">
<p>Start typing text here and it will be replaced by the results list</p>
</div>

Answer 4

您可以使用回调函数来操作插入#example-placeholder元素的html：

<script>
function example_ajax_request() {
  var parameters = "ajax.html?";
  $('example-placeholder').load(parameters, function(){
    // manipulate data
  });
}
<script>

如何在加载后用div中的jQuery更新div？

4 个答案: