jQuery/AJAX - 如何加载多个 div 和页面标题？

发布于 2024-12-04 10:01:41 字数 1021 浏览 0 评论 0原文

我尝试了这段代码（它可以工作，但是当我们单击 3-4 次时，我的浏览器会冻结，可能是由于巨大的变量）：

var elements = [ "content", "menu" ];
$.get(
    url,
    function(data)
    {
        // Elements
        var resp = $("<div></div>").html(data);
        $.each(
            elements,
            function(i, v)
            {
                var content = resp.find("#"+v);
                $("#"+v).html(content);
            }
        );
        // Title
        var regexp = /<title>(.*)<\/title>/i;
        document.title = data.match(regexp)[1];
        // Change URL
        history.pushState({ page: url }, url, url);
        // Hiding loading div
    }
);

在 Firefox 6.0、Chrome 和 Safari 5 上测试...

我想我可以使用 .load()函数，但我无法仅用一次加载来加载多个 div...

并且以下代码无法正常工作：

var resp = $("<div></div>").load(url+" #content, #menu");
var content = resp.find("#content");
$("#content").html(content);
var menu = resp.find("#menu");
$("#menu").html(menu);

谢谢您的帮助！

原文

I tried this code (it works but when we click 3-4 times, my browser frezzes, maybe due to huge variables):

var elements = [ "content", "menu" ];
$.get(
    url,
    function(data)
    {
        // Elements
        var resp = $("<div></div>").html(data);
        $.each(
            elements,
            function(i, v)
            {
                var content = resp.find("#"+v);
                $("#"+v).html(content);
            }
        );
        // Title
        var regexp = /<title>(.*)<\/title>/i;
        document.title = data.match(regexp)[1];
        // Change URL
        history.pushState({ page: url }, url, url);
        // Hiding loading div
    }
);

Tested on Firefox 6.0, Chrome, and Safari 5...

I think I may use the .load() function, but I can't load multiple divs with only one load...

And the following code isn't working:

var resp = $("<div></div>").load(url+" #content, #menu");
var content = resp.find("#content");
$("#content").html(content);
var menu = resp.find("#menu");
$("#menu").html(menu);

Thank you for your help!

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

高速公鹿 2024-12-11 10:01:41

打开其余代码的缓存

$.ajaxSetup({
  cache: true,
});

按原样

var elements = [ "content", "menu" ];
$.get(
    url,
    function(data)
    {
        // Elements
        var resp = $("<div></div>").html(data);
        $.each(
            elements,
            function(i, v)
            {
                var content = resp.find("#"+v);
                $("#"+v).html(content);
            }
        );
        // Title
        var regexp = /<title>(.*)<\/title>/i;
        document.title = data.match(regexp)[1];
        // Change URL
        history.pushState({ page: url }, url, url);
        // Hiding loading div
    }
);

turn the cache on

$.ajaxSetup({
  cache: true,
});

rest of the code as it is

var elements = [ "content", "menu" ];
$.get(
    url,
    function(data)
    {
        // Elements
        var resp = $("<div></div>").html(data);
        $.each(
            elements,
            function(i, v)
            {
                var content = resp.find("#"+v);
                $("#"+v).html(content);
            }
        );
        // Title
        var regexp = /<title>(.*)<\/title>/i;
        document.title = data.match(regexp)[1];
        // Change URL
        history.pushState({ page: url }, url, url);
        // Hiding loading div
    }
);

回复收藏 0 原文

ヅ她的身影、若隐若现 2024-12-11 10:01:41

我找到了解决问题的线索...

通过在 #menu div 中添加“time()”（PHP 函数），我注意到有时 jQuery 会毫无理由地多次加载页面：这就是为什么我的浏览器加载期间滞后...

有人知道如何解决这个问题吗？

谢谢。

编辑：
我想我解决了我的问题！在我确定这一点之前，我不会锁定这个问题:)

问题是使用多个 ID，例如：

<div id="content">
    <div id="content">
    </div>
</div>

当我加载内容时。所以现在，代码是：

$.get(
    url,
    function(data)
    {
        // Elements
        //var resp = $("<div></div>").html(data); <-- EDIT
            var resp = $(data);
        $.each(
            elements,
            function(i, v)
            {
                var content = resp.find("#"+v).html(); // HERE IS THE CHANGE, I ADDED .html()
                $("#"+v).html(content);
            }
        );
        // Title
        var regexp = /<title>(.*)<\/title>/i;
        document.title = data.match(regexp)[1];
        // Change URL
        history.pushState({ page: url }, url, url);
        // Hiding loading div
    }
);

I found a clue to resolve my problem...

By adding a 'time()' (PHP function) in the #menu div, I noticed that sometimes, jQuery loads the page several times without any reason : this is why my browser is laggy during loadings...

Does someone have any idea about how to fix this problem?

Thank you.

EDIT :
I think I fixed my problem! I don't lock this question until I'm sure about that :)

The problem was the use of multiple IDs like :

<div id="content">
    <div id="content">
    </div>
</div>

When I loaded my content. So now, the code is :

$.get(
    url,
    function(data)
    {
        // Elements
        //var resp = $("<div></div>").html(data); <-- EDIT
            var resp = $(data);
        $.each(
            elements,
            function(i, v)
            {
                var content = resp.find("#"+v).html(); // HERE IS THE CHANGE, I ADDED .html()
                $("#"+v).html(content);
            }
        );
        // Title
        var regexp = /<title>(.*)<\/title>/i;
        document.title = data.match(regexp)[1];
        // Change URL
        history.pushState({ page: url }, url, url);
        // Hiding loading div
    }
);

回复收藏 0 原文

~没有更多了~