#jquery #ajax #get #forms
#jquery #ajax #получить #формы
Вопрос:
Я рассмотрел некоторые другие вопросы, но я все еще не уверен, как этого добиться.
Ситуация такова, что у меня была сложная форма, которая статически работала нормально, но я «сделал ее лучше», заставив ее отправлять с помощью 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
Ответ №1:
Я не уверен, почему это вообще вопрос. URL-адрес HTTP-запроса является первым аргументом для $.get()
. В данном случае это значение, возвращаемое
$('#search').attr('action');
и
$('#advancedsearchform').attr('action');
соответственно.
Возможно, я здесь чего-то не хватает?
Редактировать:
как использовать возвращаемую строку? т.е. для начала распечатайте его в любом месте страницы.
Вы можете поместить строку внутрь объекта jQuery, а затем добавить ее куда-нибудь:
var action = $('#search').attr('action'),
$span = $('<span/>', {text: action});
$('#placeholder').after($span);
Комментарии:
1. Спасибо, я попытался распечатать это на странице, чтобы посмотреть, что она содержит, выполнив следующее:
$('#search').attr('action').insertAfter($('#placeholder'));
но это прерывает работу моей страницы…2. Это потому, что
.attr()
возвращает строку, а не объект jQuery, поэтомуinsertAfter()
метод не определен. Такого рода проблемы легко обнаружить с помощью отладчика — используете ли вы его? Если нет, то вам действительно следует.3. а, теперь я понимаю, что ты имеешь в виду. Хм, в таком случае — как использовать возвращаемую строку? т.е. для начала распечатайте его в любом месте страницы. Я думаю, могу ли я изменить URL-адрес из docsearch.php?бла-бла-бла на staticdocsearch.php (это будет почти та же страница, но в статической форме вместо ajax) со всеми параметрами, тогда это может сработать.
4. большое вам спасибо, не хочу быть вредителем, но, похоже, он нигде не выводится на странице. Я подумал, что, возможно, запятая после первой строки вашей правки должна была быть точкой с запятой, возможно, но это ничего не изменило. Я продолжу работать над этим и попробую добавить его в другом месте.
5. Нет, запятая не должна быть точкой с запятой.
Ответ №2:
Возможно, вы могли бы рассмотреть возможность возврата полного URL-адреса (с параметрами) как части вашего ответа, а затем обработать его в success:
блоке.
Комментарии:
1. Я бы рекомендовал ответ в формате JSON. Похоже, вы возвращаете HTML для результатов поиска, правильно? Итак, все, что вам нужно сделать, это вернуть JSON с двумя объектами: строкой URL и строкой HTML.
Ответ №3:
Я думаю, вы захотите использовать глубокую привязку, которая поможет вам напрямую ссылаться на результаты поиска. Вы могли бы использовать строку запроса, если хотите (т.Е. domain.com/search.php?q=Whatever
), но, возможно, было бы разумнее использовать хэш и декодировать его вместо этого (т.Е. domain.com/search.php#q=Whatever
).
Ответ №4:
jQquery передает исходный объект XHR обработчикам событий. Вы можете им воспользоваться. В вашем случае это может быть что-то вроде этого:
success: function(response, status, hxr) {
var whereFrom = xhr.responseXML.baseURI;
(...)
}
Ответ №5:
Я искал простой способ добавить страницу в закладки с помощью скрипта, но каждый браузер обрабатывает это по-разному, и это может причинить вам больше вреда, чем пользы. Глубокая привязка — отличное решение для создания закладок на динамических страницах, но со всеми вашими изменяющимися параметрами поиска я не могу представить, что это очень легко реализовать.. У меня была бы просто кнопка или ссылка, которую вы можете нажать, которая перезагружает ту же страницу с прикрепленными параметрами querystring, поэтому я бы сказал, что вы на правильном пути.
Я бы сделал то, что рекомендует @Keith, но, поскольку создание закладок на страницах — это проблема на стороне клиента, я бы собрал URL-адрес на стороне клиента в обработчике ‘success’.