0

尝试通过简单的代码示例学习 Ajax - jQuery 我有这两个 html 文件：index.html 和 source.html.the inex.html 为：

enter code here
<!DOCTYPE html>
 <html>
 <head>
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
 <script>
  $(document).ready(function() {
   $('button').click(function(){
   $.get('source.html', function(data) {
   $('.result').html(data);
   });
  });
 });
 </script>
 <title>Main Page</title>
 </head>
 <body>
 <button>Load Page</button>
 <div class="result"></div>
 </body>
 </html>

和 source.html 为：

enter code here
<!DOCTYPE html>
<html>
<head>
<title>Source Page</title>
</head>
<body>
<div class="test1">Hello Ajax!</div>
<div class="test2"> Again Hello Ajax!</div>
<div class="test1">WoW Ajax!</div>
 <p> The html() method sets or returns the content(innerHTML) of the selected... </p>
 </body>
</html>

现在我的问题是如何获取特定元素而不是获取索引页面中的所有元素？例如，我如何过滤请求对象以获取所有具有“test1”类的 div 或仅获取

从页面来源。我也不太明白“数据”参数是什么意思

enter code here
$.get('source.html', function(data) {
$('.result').html(data);

你能告诉我这是什么意思吗？

来自控制台的数据：

<!DOCTYPE html>
<html>
<head>
<title>Main Page</title>
</head>
<body>
<div class="test">Hello world!</div>
<div class="test1">Hello Ajax!</div>
<div class="test2"> Again Hello Ajax!</div>
<div class="test1">WoW Ajax!</div>
<p> The html() method sets or returns the content (innerHTML) of the selected   elements.When this method is used to return content, it returns the content of the FIRST   matched element. When this method is used to set content, it overwrites the content of ALL matched elements.</p>
 </body>
 </html>
4

2 回答 2

1

在得到你的ajax调用的响应后，你可以通过以下方式找到元素：

$.get('source.html', function(data) {
   test1_elements = $(data).find('.test1')
});

test1_elementstest1现在将包含来自 source.html的所有具有类的元素。

于 2012-11-15T08:40:22.257 回答
0

您可以通过它们的 id 或类来获取特定元素：

var $byids= $('#id');
var $byclass= $('.class');

函数中的 data 参数包含整个响应数据，即 source.html 显示的内容。

您可以使用

var $div= $(data).find('#divid');

从数据中选择东西。

更新：您有 2 个 test1 元素。下面将获取每个的html，并将其拼接在一起。最后一行显示文档中所有具有“test”类的元素的摘要。

$.get('source.html', function(data) {
    var $test1_elements = $(data).find('.test1');
    var summary= '';
    $test1_elements.each({function(){ summary+= $(this).html(); });
    $('.test').html(summary);
});
于 2012-11-15T08:41:35.423 回答