logo标签列表

使用jQuery ajax后如何通过选择器获取一个元素？$.ajax()

jquery
3
我想在调用 $.ajax() 后获取一个带有 ID 的 div 元素。 以下是我的代码：
$.ajax({

  url: "PO_Header.php",
  data: "supplier="+selectedId,
  cache: false,
  success: function(html){
    $("#PO_Header").empty(); 

    $("#PO_Header").append(html);

  }
});

$("#PO_Header").append(html);会将整个html页面添加进去，我想得到的是具有特定id的元素。比如说在PO_Header.php中，一个带有id='mydiv'的

元素将被注入到我的当前页面中。

1
https://dev59.com/v2855IYBdhLWcg3wnFpO - simshaun
5个回答
5
使用jQuery的load方法：
$('#PO_Header').load('PO_Header.php #mydiv', { 'supplier': selectedId } );

它允许您加载页面片段。正如他们的文档所指出：

加载页面片段 .load()方法与$.get()不同，它允许我们指定要插入的远程文档的一部分。这是通过url参数的特殊语法实现的。如果字符串中包含一个或多个空格字符，则假定空格后面的部分是jQuery选择器，用于确定要加载的内容。

因此，它只会将PO_Header.php中的<div id="myDiv"></div>注入到您的元素中。
那么load()和ajax()有什么区别？感谢您提供了一个有用的解决方案。 - Randel Ramirez
$.ajax()是jQuery提供的一般函数，用于处理XmlHttpRequest对象。但他们添加了许多更精确的功能，使人们能够在没有大量不必要参数的情况下获得他们想要的内容。因此，$.load()只是$.ajax()的更精确和指定的函数，它使您能够从服务器文件获取数据并将其插入到DOM元素中。 - hohner
现在我只需要在我的php页面上使用$_POST，因为我正在传递数据。谢谢您。 - Randel Ramirez
3
你可以使用 .load() 来实现这个功能。

加载页面片段

.load() 方法与 $.get() 不同，它允许我们指定要插入的远程文档的一部分。这是通过 url 参数的特殊语法实现的。如果字符串中包含一个或多个空格字符，则假定在第一个空格后面的字符串部分是 jQuery 选择器，用于确定要加载的内容。

来源：http://api.jquery.com/load/

基本上你可以像这样使用它：
$('#PO_Header').load('PO_Header.php #mydiv', { 'supplier': selectedId } );

为了禁用缓存，您可以在代码开头使用以下代码：
$.ajaxSetup({
  cache: false
});

编辑：

.load()与.get()基本相同，但有以下几点不同：

  1. .load()具有隐式回调函数。当成功返回时，该函数将返回的HTML内容设置到提供的元素中。

  2. 它有一个专门用于url参数的特殊语法，可以指定要插入的返回文档的特定部分。

  3. 默认方法为GET。除非将data参数作为对象传递，否则将使用POST方法。

那么load()和ajax()有什么区别？感谢您提供了一个有用的解决方案。 - Randel Ramirez
跟进，何时应该使用Ajax而不是Load。 - Randel Ramirez
2

我更喜欢在一个外部函数中绑定到ajax加载的元素，并在我的成功函数中调用它。

function binder(){
  $("#mydiv")....do something here
}

$.ajax({

  url: "PO_Header.php",
  data: "supplier="+selectedId,
  cache: false,
  success: function(html){
    $("#PO_Header").empty(); 

    $("#PO_Header").append(html);
    binder();

  }
});
问题是如何从Ajax调用返回的HTML中选择“#mydiv”元素，而不是如何操作现有的$（“#mydiv”）jquery元素。 - Simon
@Simon，这正是它的作用。只有在 Ajax 成功返回时绑定函数才会被调用。也许我没有理解你的评论。 - buck54321
我认为原作者想要在将ajaxed HTML附加到#PO_Header之前选择#mydiv元素。至少这是我的理解。 - Simon
1

试试这个

$.ajax({

  url: "PO_Header.php",
  data: "supplier="+selectedId,
  cache: false,
  success: function(html){

    var new_html = $(html).find('#mydiv').html();

    $("#PO_Header").empty(); 

    $("#PO_Header").append(new_html);

  }
});
我尝试过了，它所做的是将整个 HTML 页面注入，而不仅仅是指定的 div。 - Randel Ramirez
我修改了变量名以使其更清晰地显示正在发生的情况。我可以向您保证它可以正常工作，因为我在自己的应用程序中使用了这种技术。 - Simon
0
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接