ajax js 多条件搜索_示例代码

当我们在网页上进行搜索时，通常会有多个搜索条件，例如关键字、时间范围、地区等。为了实现这样的多条件搜索功能，我们可以使用Ajax和JavaScript来动态加载搜索结果，而无需刷新整个页面。

我们需要在网页中创建一个搜索表单，包含多个搜索条件的输入框和一个搜索按钮。当用户点击搜索按钮时，我们将使用JavaScript来获取用户输入的搜索条件，并通过Ajax发送请求到服务器。

示例代码如下所示：

<form id="searchForm">
  <input type="text" id="keywordInput" placeholder="关键字">
  <input type="text" id="dateInput" placeholder="时间范围">
  <input type="text" id="areaInput" placeholder="地区">
  <button type="submit">搜索</button>
</form>
<div id="searchResults"></div>
<script>
  // 监听搜索表单的提交事件
  document.getElementById("searchForm").addEventListener("submit", function(event) {
    event.preventDefault(); // 阻止表单的默认提交行为
    // 获取用户输入的搜索条件
    var keyword = document.getElementById("keywordInput").value;
    var date = document.getElementById("dateInput").value;
    var area = document.getElementById("areaInput").value;
    // 发送Ajax请求
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "search.php?keyword=" + keyword + "&date=" + date + "&area=" + area, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        // 将搜索结果显示在页面上
        document.getElementById("searchResults").innerHTML = xhr.responseText;
      }
    };
    xhr.send();
  });
</script>

在上面的示例代码中，我们首先创建了一个搜索表单，其中包含了三个输入框和一个按钮。当用户点击搜索按钮时，我们通过JavaScript监听表单的提交事件，并阻止表单的默认提交行为。

然后，我们使用JavaScript获取用户输入的搜索条件，分别是关键字、时间范围和地区。接下来，我们使用Ajax发送GET请求到服务器的`search.php`页面，并将搜索条件作为查询参数传递给服务器。

在服务器端，我们可以根据接收到的搜索条件进行搜索，并将搜索结果返回给客户端。在客户端，我们通过Ajax的回调函数来处理服务器返回的搜索结果，并将结果显示在页面上的`searchResults`元素中。

通过使用Ajax和JavaScript，我们可以实现多条件搜索功能，提升用户体验，同时避免页面的刷新。