简单的jQuery ajax示例未在返回的HTML中找到元素

小编典典

简单的jQuery ajax示例未在返回的HTML中找到元素

ajax

我正在尝试学习jQuery的ajax函数。我已经工作了，但是jQuery在返回的HTML DOM中找不到元素。在与jquery相同的文件夹中，运行以下页面：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>runthis</title>

    <script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"></script>

    <script tyle="text/javascript">
    $(document).ready(function(){
        $('input').click(function(){
            $.ajax({
                type : "GET",
                url : 'ajaxtest-load.html',
                dataType : "html",
                success: function(data) {

                alert( data ); // shows whole dom

                alert( $(data).find('#wrapper').html() ); // returns null

                },
                error : function() {
                    alert("Sorry, The requested property could not be found.");
                }
            });
        });
    });
    </script

</head>
<body>
    <input type="button" value="load" />
</body>
</html>

哪个加载页面“ ajaxtest-load.html”：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
    <title>load this</title>

</head>
<body>
    <div id="wrapper">
    test
    </div>
</body>
</html>

它给出两个警报。一个显示DOM已加载，但第二个显示NULL而不是#wrapper。我究竟做错了什么？

编辑：我正在加载“ ajaxtest-load.html”，其中包括整个标头，包括jquery。那是问题吗？

阅读 278

2020-07-26

共1个答案

小编典典

通过使用，我已经设法从完整的html文档中加载了摘要.load()。

要创建一个将html提取到DOM中的新块，请执行以下操作：

$('<div></div>').appendTo('body').load('some-other-document.html div#contents');

如果对您不起作用，请确保您使用的是jQuery的最新版本（或1.2版）。有关更多示例，请参见.load文档。

编辑：

但是请注意，使用上面的示例，结果将是：

<div><div id="contents">...</div></div>

要仅获取其他文档中#contents div的内容，请在load-function调用中使用回调函数。

$('<div></div>').load('some-other-document.html div#contents', null, 
    function (responseText, textStatus, XMLHttpRequest) {
        if (textStatus == success) {
            $('<div></div>').appendTo('body').html($(this).html());
        }
    }
);

2020-07-26