Question

我正在尝试通过将Node.js和MongoDB与Mongoose结合使用来向Web应用程序添加搜索功能。我已经创建了一个搜索表单，并且正在使用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似乎格式正确，但是由于/?位于我的AJAX调用的末尾，因此我不确定为什么第二个位置e.preventDefault();被加载以及页面刷新的原因。在这种情况下我应该看什么？

编辑

我去掉了AJAX请求中的e.preventDefault()呼叫以及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;
}

Ajax调用正在加载两个单独的链接，第二个链接失败

0 个答案: