Я пытаюсь добавить функцию поиска в веб-приложение, используя Node.js и MongoDB с Mongoose.Я создал форму поиска и использую атрибут onsubmit
для загрузки функции при отправке форм, где находится вызов AJAX.Цель состоит в том, чтобы перезагрузить таблицу с возвращенными данными без перезагрузки всей веб-страницы.У меня есть функция, настроенная так, чтобы указывать на мой контроллер и выполнять поиск и возвращать результаты, однако вызов AJAX не выполняется, а также пытается получить два разных местоположения (показано ниже - последний блок).
Форма HTML
<form class="form-inline" onsubmit="return getSearchResults();">
<div class="form-group">
<div class="input-group">
<input id="searchInput" class="form-control" placeholder="Search for..." type="text">
<span class="input-group-btn">
<button id="searchButton" class="btn btn-default" type="submit"><span class="glyphicon glyphicon-search"></span></button>
</span>
</div>
</div>
</form>
Функция AJAX
<script>
function getSearchResults(e) {
var query = $("#searchInput").val();
alert("Using AJAX call!");
$.ajax({
url: '/items/search',
type: 'GET',
data: {"search": query},
dataType: 'application/json',
success: function(Results) {
alert("Got the data");
}
}).fail(function(){
alert("Oof big fail");
});
e.preventDefault();
return false;
}
</script>
Контроллер
itemController.search = function(req, res) {
var searchQuery = (req.query.search);
Item.find({ $or: [{name: searchQuery}, {category: searchQuery}, {subcategory: searchQuery}, {status: searchQuery}, {description: searchQuery}]}).exec(function (err, items) {
if (err) {
console.log("Error:", err);
}
else {
console.log(searchQuery);
console.log("Search returning results");
res.render("../views/items/items", {items: items});
}
});
};
Журнал консоли с двумя GET
Search returning results
GET /items/search?search=test 304 38.915 ms - -
GET /? 304 1.631 ms - -
URL-адрес создается правильно, однако я не уверен, почему загружается второе местоположение /?
ипочему страница обновляется, поскольку e.preventDefault();
находится в конце моего вызова AJAX.На что мне обратить внимание в этом случае?
EDIT
Я пошел и удалил вызов e.preventDefault()
в запросе AJAX вместе с dataType: application/json
.Теперь все работает как положено.Спасибо charlietfl!Обновленный код ниже.
Функция AJAX - исправлено
function getSearchResults() {
var query = $("#searchInput").val();
alert("Using AJAX call!");
$.ajax({
url: '/items/search?search=' + query,
type: 'GET',
success: function(result) {
alert("Data got");
}
}).fail(function(){
alert("Oof big fail");
});
return false;
}