Ajax вызывает загрузку двух отдельных ссылок, сбой на второй ссылке - PullRequest
0 голосов
/ 14 декабря 2018

Я пытаюсь добавить функцию поиска в веб-приложение, используя 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;
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...