AJAX JQuery возвращает всю страницу
этот вопрос задавался ранее, но ответы, похоже, не работают на меня. Мой Ajax возвращает всю страницу, когда я выполняю поиск автозаполнения
Ajax для поиска из базы данных
$(function(){ $(".search_keyword").keyup(function() {
var search_keyword_value = $(this).val();
var dataString = 'search_keyword='+ search_keyword_value;
if(search_keyword_value!='')
{
$.ajax({
type: "POST",
url: "/ajax/search.php",
data: dataString,
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});
} else{
document.getElementById('result').innerHTML ='';
}
return false; });
HTML-страница
<form method="get" action="/?page=results" class="navbar-form" autocomplete="off">
<input type="text" name="query" class="search_keyword"/>
<button type="submit" nam>Search</button>
</form>
<div id="result"></div>
был бы очень признателен за помощь, ребята
Решение
проверьте, правильно ли вы называете страницу или нет …
только из-за ошибки 404, он вернет всю страницу. может быть URL AJAX не найден
Другие решения
URL, используемый в ajax, должен использоваться для возврата (эха) только требуемых данных, ничего больше.
Я обычно решаю эту проблему, передавая POST ‘action’ на страницу php, которая содержит то, что я хотел бы запросить, и она выбирается переключателем.
PHP-код обычно выглядит так:
if(isset($_POST["action"]))
{
switch(action){
case "func_1":
func_1();
break;
case "func_2":
func_2();
break;
case "func_2":
func_3();
break;
case "func_2":
func_4();
break;
}
} else {
echo "error";
}
function func_1{
//do something
}
function func_2{
//do something
}
function func_3{
//do something
}
function func_4{
//do something
}
Внутри функции я пишу желаемый код, например, получаю данные автозаполнения, затем передаю их через JSON или что-то в этом роде.
Кроме того, тег ajax ‘data’, способный выполнять параметры html post / get через предварительную сборку строки:
$.ajax({
type: "POST",
url: "/ajax/search.php",
data:
{
search_keyword : search_keyword_value
}
cache: false,
success: function(html)
{
$("#result").html(html).show();
}
});