如何在Django中使用AJAX和JSON？及Django-Haystack-Solr搜索功能咨询

其实实现起来很直观，主要分前端AJAX请求和后端Django处理并返回JSON两部分，我给你拆解下具体步骤：

步骤1：前端编写AJAX请求 #

假设你有一个搜索输入框，想要实时触发查询，用原生JS或者jQuery都能实现，这里用原生JS举个例子：

<div class="search-wrap">
  <input type="text" id="search-input" placeholder="输入关键词搜索...">
  <div id="suggestion-list"></div>
  <div id="spell-tip"></div>
</div>

<script>
const searchInput = document.getElementById('search-input');
const suggestionList = document.getElementById('suggestion-list');
const spellTip = document.getElementById('spell-tip');

// 监听输入事件，实时发送请求
searchInput.addEventListener('input', function() {
  const keyword = this.value.trim();
  
  // 关键词为空时清空提示
  if (!keyword) {
    suggestionList.innerHTML = '';
    spellTip.innerHTML = '';
    return;
  }

  // 发送AJAX请求
  fetch(`/testpage/?keyword=${encodeURIComponent(keyword)}`)
    .then(res => res.json())
    .then(data => {
      // 渲染自动提示列表
      let suggestionsHtml = '';
      if (data.auto_suggestions.length > 0) {
        suggestionsHtml = '<ul>';
        data.auto_suggestions.forEach(item => {
          suggestionsHtml += `<li><strong>${item.title}</strong><br>${item.summary}</li>`;
        });
        suggestionsHtml += '</ul>';
      }
      suggestionList.innerHTML = suggestionsHtml;

      // 渲染拼写建议
      if (data.spelling_suggest) {
        spellTip.innerHTML = `<p>您是不是要找：<span onclick="fillSpellSuggest('${data.spelling_suggest}')">${data.spelling_suggest}</span></p>`;
      } else {
        spellTip.innerHTML = '';
      }
    })
    .catch(err => console.log('请求出错：', err));
});

// 填充拼写建议到输入框
function fillSpellSuggest(word) {
  searchInput.value = word;
  // 手动触发一次输入事件，更新结果
  searchInput.dispatchEvent(new Event('input'));
}
</script>

步骤2：后端Django处理请求并返回JSON #

在views.py里编写逻辑，接收前端传递的关键词，处理后返回JSON格式数据：

from django.shortcuts import render
from django.http import JsonResponse
from haystack.query import SearchQuerySet

def testpage(request):
    if request.method == 'GET':
        # 从GET参数中获取用户输入的关键词，默认空字符串
        keyword = request.GET.get('keyword', '').strip()
        
        # 初始化返回数据结构
        response_data = {
            'auto_suggestions': [],
            'spelling_suggest': None
        }

        if keyword:
            # 执行自动查询，获取相关结果（用于自动提示）
            search_results = SearchQuerySet().auto_query(keyword)
            # 提取需要展示的字段，这里假设索引里有title和summary字段
            response_data['auto_suggestions'] = [
                {
                    'title': res.title,
                    'summary': res.summary[:80] + '...'  # 截取部分摘要
                } for res in search_results[:10]  # 限制返回10条提示
            ]
            
            # 获取拼写建议
            response_data['spelling_suggest'] = search_results.spelling_suggestion()
        
        # 返回JSON响应
        return JsonResponse(response_data)
    
    # 非GET请求返回空数据
    return JsonResponse({'auto_suggestions': [], 'spelling_suggest': None})

步骤3：配置Django路由 #

在项目的urls.py里添加对应路由，让前端请求能映射到视图：

from django.urls import path
from . import views

urlpatterns = [
    path('testpage/', views.testpage, name='testpage'),
    # 其他路由...
]

嘿，我看你现在的代码里把search_keyword写死成'stikar'了，这肯定没法动态接收用户的实际输入对吧？咱们把它改成能响应前端实时输入的逻辑，同时把自动提示和拼写检查的结果返回给前端：

修改后的完整views.py代码 #

from django.shortcuts import render
from haystack.query import SearchQuerySet
from django.http import JsonResponse

def testpage(request):
    # 只处理GET请求，实时查询用GET更合适
    if request.method == 'GET':
        # 从请求参数中获取用户输入的关键词
        search_keyword = request.GET.get('keyword', '').strip()
        
        # 初始化返回的数据
        result_data = {
            'auto_suggestions': [],
            'spelling_suggestion': None
        }
        
        if search_keyword:
            # 执行自动查询，获取相关搜索结果
            query_set = SearchQuerySet().auto_query(search_keyword)
            # 提取需要展示的字段，根据你的索引结构调整
            result_data['auto_suggestions'] = [
                {
                    'title': item.title,
                    'url': item.object.get_absolute_url()  # 假设模型有get_absolute_url方法
                } for item in query_set[:8]  # 限制返回8条，避免过多
            ]
            
            # 获取拼写建议
            result_data['spelling_suggestion'] = query_set.spelling_suggestion()
        
        # 返回JSON格式响应
        return JsonResponse(result_data)
    
    # 非GET请求返回空数据
    return JsonResponse({'auto_suggestions': [], 'spelling_suggestion': None})

这样修改后，你的搜索引擎就能实时接收用户输入，动态返回自动提示和拼写建议啦！

内容的提问来源于stack exchange，提问作者Dhaval Savalia