Блог

Я рассмотрел некоторые другие вопросы, но я все еще не уверен, как этого добиться.

Ситуация такова, что у меня была сложная форма, которая статически работала нормально, но я «сделал ее лучше», заставив ее отправлять с помощью AJAX-запроса.

Теперь URL-адрес страницы не меняется, чтобы в ней были параметры, как раньше, но я могу видеть полный URL-адрес с помощью firebug.

Что я собираюсь сделать, так это получить этот URL-адрес и создать кнопку для ссылки на него, чтобы пользователь мог добавить его в закладки, потому что на данный момент результаты поиска не могут быть добавлены в закладки.

Извините, если это в любом случае точная копия, но любая помощь и совет высоко ценятся.

Это мои AJAX-запросы (они в основном одинаковые, но у меня есть две формы, представленные пользователю как одна форма, простой поиск и переключаемый расширенный поиск) :

 // setup AJAX request for simple search
$simpleform = $('#search');
$simpleform.submit(function() {
    $.ajax($simpleform.attr('action'), {
        data: $simpleform.serialize(),
        dataType: 'html',
        url: 'docsearch.php',
        type: 'GET', 

        beforeSend: function() {
            var $load = $('#loadingmessage');
            $('#search_results').fadeOut(1000);
            $load.hide().fadeIn(1000);

            if (!$load.length)
            {
                $load = $('<div id="loadingmessage">').appendTo($('#placeholder'));
            }

            $load.html('Searching... Please wait...');

            // disable both search buttons
            $('.submit').attr('disabled', 'disabled');
            $('.submit').addClass("disabled");

            $('#advancedsearchbutton').attr('disabled', 'disabled');
            $('#advancedsearchbutton').addClass("disabled");
        },

    success: function(response) {
        // response is the text sent back by server

        // find the search_results div in the response and insert it after the placeholder div
        $(response).find('#search_results').insertAfter($('#placeholder')).fadeIn(1000); 
        // re-initialise lightbox and dataTable plugins
        $('a.lightbox').lightBox();
        $('#test-docs-table').dataTable( {
                "sPaginationType": "full_numbers",
                "sDom": 'Rlfrtip',
                "aoColumns": [
                    null,
                    null,
                    { "sType": "title-numeric" },
                    null
                ]
        });
    },

    complete: function() {
        // hide loading message:
        $('#loadingmessage').fadeOut('slow');

        // enable both search buttons
        $('.submit').removeAttr("disabled");
        $('.submit').removeClass("disabled");

        checkDropdowns();
    }
});

return false; // Cancel default event
});
// end AJAX request

// setup AJAX request for advanced search
$form = $('#advancedsearchform');
$form.submit(function() {
    $.ajax($form.attr('action'), {
        data: $form.serialize(),
        dataType: 'html',
        url: 'docsearch.php',
        type: 'GET', 

        beforeSend: function() {
            var $load = $('#loadingmessage');
            $('#search_results').fadeOut(1000);
            $load.hide().fadeIn(1000);

            if (!$load.length)
            {
                $load = $('<div id="loadingmessage">').appendTo($('#placeholder'));
            }
              $load.html('Searching... Please wait...');

            // disable both search buttons
            $('.submit').attr('disabled', 'disabled');
            $('.submit').addClass("disabled");

            $('#advancedsearchbutton').attr('disabled', 'disabled');
            $('#advancedsearchbutton').addClass("disabled");
        },

    success: function(response) {
        // response is the text sent back by server

        // find the search_results div in the response and insert it after the placeholder div
        $(response).find('#search_results').insertAfter($('#placeholder')).fadeIn(1000); 
        // re-initialise lightbox and dataTable plugins
        $('a.lightbox').lightBox();
        $('#test-docs-table').dataTable( {
                "sPaginationType": "full_numbers",
                "sDom": 'Rlfrtip',
                "aoColumns": [
                    null,
                    null,
                    { "sType": "title-numeric" },
                    null
                ]
        });
    },

    complete: function() {
        // hide loading message:
        $('#loadingmessage').fadeOut('slow');

        // enable both search buttons
        $('.submit').removeAttr("disabled");
        $('.submit').removeClass("disabled");

        $('#advancedsearchbutton').removeAttr("disabled");
        $('#advancedsearchbutton').removeClass("disabled");
    }
});

return false; // Cancel default event
});
// end AJAX request
  

Я не уверен, почему это вообще вопрос. URL-адрес HTTP-запроса является первым аргументом для $.get() . В данном случае это значение, возвращаемое

 $('#search').attr('action');
  

и

 $('#advancedsearchform').attr('action');
  

соответственно.

Возможно, я здесь чего-то не хватает?

Редактировать:

как использовать возвращаемую строку? т.е. для начала распечатайте его в любом месте страницы.

Вы можете поместить строку внутрь объекта jQuery, а затем добавить ее куда-нибудь:

 var action = $('#search').attr('action'),
    $span = $('<span/>', {text: action});

$('#placeholder').after($span);
  

Возможно, вы могли бы рассмотреть возможность возврата полного URL-адреса (с параметрами) как части вашего ответа, а затем обработать его в success: блоке.

Я думаю, вы захотите использовать глубокую привязку, которая поможет вам напрямую ссылаться на результаты поиска. Вы могли бы использовать строку запроса, если хотите (т.Е. domain.com/search.php?q=Whatever ), но, возможно, было бы разумнее использовать хэш и декодировать его вместо этого (т.Е. domain.com/search.php#q=Whatever ).

jQquery передает исходный объект XHR обработчикам событий. Вы можете им воспользоваться. В вашем случае это может быть что-то вроде этого:

 success: function(response, status, hxr) {
    var whereFrom = xhr.responseXML.baseURI;

    (...)
}
  

Я искал простой способ добавить страницу в закладки с помощью скрипта, но каждый браузер обрабатывает это по-разному, и это может причинить вам больше вреда, чем пользы. Глубокая привязка — отличное решение для создания закладок на динамических страницах, но со всеми вашими изменяющимися параметрами поиска я не могу представить, что это очень легко реализовать.. У меня была бы просто кнопка или ссылка, которую вы можете нажать, которая перезагружает ту же страницу с прикрепленными параметрами querystring, поэтому я бы сказал, что вы на правильном пути.

Я бы сделал то, что рекомендует @Keith, но, поскольку создание закладок на страницах — это проблема на стороне клиента, я бы собрал URL-адрес на стороне клиента в обработчике ‘success’.