Предотвратить полное обновление страницы при передаче данных из ajax
Я пытаюсь отправить простую форму в php-файле заголовка и получить доступ к его значению, чтобы изменить содержимое страницы в одном из моих представлений. Я могу передать значение ajax, но когда я это сделаю, эта полная страница заголовка снова перезагружается. Помогите, пожалуйста, как предотвратить перезагрузку страницы.
Вот моя форма в заголовочном файле
<form class = "choose-form form-holder" >
<select id = "usertype" onChange = "selectChange()">
<option value=1>JS</option>
<option value=2>JP</option>
</select>
</form>
Вот мой сценарий для отправки формы в файле заголовка php
<script>
function selectChange() {
debugger;
var usertype = $('#usertype').val();
$.ajax({
type: 'GET',
data: {usertype: usertype},
success: function (response) {
$('#response').html(response);
},
error: function () {
alert("error");
}
});
return false;
}
</script>
Это мой код на странице просмотра php для доступа к типу и изменения содержимого
<div id = "response">
<?php if (!empty($_GET['usertype'])){
$type = $_GET['usertype'];
}
?></div>
<?php if ((isset($type)) && ($type == 2)){?>
//some other content
<?php }else{ ?>
//change the content
<?php } ?>
Я не передал URL, так как хочу получать данные на той же странице
Итак, что вы здесь делаете, так это то, что при выборе вы проверяете, что они выбрали, и отображаете соответствующий контент на основе этого? Тогда вам не нужен ajax, поскольку все это можно сделать с помощью JS
Конечно, большое спасибо за предложение! Не могли бы вы помочь мне, как я могу пройти через JS и проверить свое условие if else? Мне очень жаль, но я новичок в этом и узнал об этом.
Добавьте тег "jquery".
Куда мне добавить, пожалуйста? в моей функции selectChange.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Попробуйте ниже:
<script>
function selectChange(event) {
event.preventDefault();
debugger;
var usertype = $('#usertype').val();
$.ajax({
type: 'GET',
data: {usertype: usertype},
success: function (response) {
$('#response').html(response);
},
error: function () {
alert("error");
}
});
return false;
}
Спасибо, Sibusiso. Я пробовал это. Это дает мне ошибку «Uncaught TypeError: Cannot read property 'preventDefault' of undefined». Мне нужно что-то добавить сюда, пожалуйста?
На что указывает ваш AJAX? Я не вижу ни одного целевого файла.