javascript - 使用 jQuery 从 URL 加载动态 div 内容

Question

我有一个 jQuery 搜索脚本，它使用选项卡让用户定义他们想要使用的搜索类型。当用户搜索时，会创建一个类似于#type/query/的 URL。但是，当您重新加载页面、单击转到不同页面的结果或从上一页返回时，搜索结果不再存在。为什么会这样，我该如何解决这个问题？我也不想使用任何插件。

我的 jQuery 代码是:

$(document).ready(function () {
    $('[id^=type_]').click(function () {
        type = this.id.replace('type_', '');
        $('[id^=type_]').removeClass('selected');
        $('#type_' + type).addClass('selected');
        return false;
    });
    $('#type_search').click();
    $('#query').keyup(function () {
        var query = $(this).val();
        var url = '/' + type + '/' + query + '/';
        window.location.hash = '' + type + '/' + query + '/';
        document.title = $(this).val() + ' - My Search';
        $('#results').show();
        if (query == '') {
            window.location.hash = '';
            document.title = 'My Search';
            $('#results').hide();
        }
        $.ajax({
            type: 'GET',
            url: url,
            dataType: 'html',
            success: function (results) {
                $('#results').html(results);
            }
        });
    });
    var textlength = $('#query').val().length;
    if (textlength <= 0) {
        $('#query').focus();
    } else {
        $('#query').blur();
    }
});

Answer 1

当您重新加载页面时，结果丢失的原因是它们不在文档源中；它们稍后被添加到 DOM 中。

我想你有两个选择，我通常使用第一个。

当您执行搜索时，将搜索条件或搜索结果存储在服务器中，以便下次呈现页面时，结果也随之呈现。我使用 ASP.NET MVC 3 并使用 PartialView 执行此操作。当我使用 jQuery 执行搜索时，它会导致服务器呈现相同的 PartialView 并将生成的 HTML 片段插入到结果 div 中。

或者，您需要在重新加载页面时再次触发 jQuery 搜索。

是重新提交搜索还是缓存结果更好取决于搜索的成本和结果集可能有多大。