【ajax实战07】文章筛选功能

在这个实战中，我们将使用Ajax技术来实现一个简单的文章筛选功能。这里我们假设已经有一个包含多个文章的数据库，并且我们想要通过Ajax动态加载满足特定条件的文章。

首先，我们需要一个表单来接收筛选条件：

<form id="filter-form">
  <label for="category">分类:</label>
  <select id="category" name="category">
    <option value="">所有分类</option>
    <option value="technology">技术</option>
    <option value="science">科学</option>
    <option value="art">艺术</option>
  </select>
  <button type="submit">筛选</button>
</form>

然后，我们需要一个容器来显示筛选后的文章：

<div id="articles-container">
  <!-- 这里将显示筛选后的文章 -->
</div>

接下来，我们需要一段JavaScript代码来处理表单提交并发送Ajax请求：

document.getElementById('filter-form').addEventListener('submit', function(event) {
  event.preventDefault();
  var category = document.getElementById('category').value;
 
  var xhr = new XMLHttpRequest();
  xhr.open('POST', '/filter-articles', true);
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
      document.getElementById('articles-container').innerHTML = xhr.responseText;
    }
  };
  xhr.send('category=' + encodeURIComponent(category));
});

最后，我们需要一个服务器端的路由来处理Ajax请求并返回筛选后的文章列表：

from flask import Flask, request, render_template_string
 
app = Flask(__name__)
 
@app.route('/filter-articles', methods=['POST'])
def filter_articles():
    category = request.form['category']
    # 这里应该添加查询数据库的代码，根据筛选条件获取文章列表
    filtered_articles = []  # 假设的文章列表
    return render_template_string('''
        {% for article in filtered_articles %}
        <div>{{ article.title }}</div>
        {% endfor %}
    ''', filtered_articles=filtered_articles)
 
if __name__ == '__main__':
    app.run(debug=True)

在这个例子中，我们使用了Flask框架来简化服务端的处理。实际应用中，你需要根据你的数据库和后端框架来修改数据获取的逻辑。