如何用Django结合AJAX实现用户提交输入后展示数据库对象

是否必须使用表单？ #

不是必须，但推荐使用。表单能帮你自动处理Django的CSRF令牌验证，还能利用Django表单的字段校验（比如非空检查），减少手动编写逻辑的工作量。如果不想用表单，也可以直接监听输入框和按钮的点击事件，但需要手动处理CSRF令牌，相对麻烦一些。

完整实现步骤 #

1. 后端视图修改（views.py） #

新增处理AJAX请求的视图函数，查询数据库并返回JSON格式结果：

from django.shortcuts import render
from django.http import JsonResponse
from country_trivia import forms
from .models import Country  # 导入你的Country模型

def main_page(request):
    get_info_form = forms.GetInfo()
    return render(request, 'country_trivia/index.html', {'form': get_info_form})

def get_country_info(request):
    if request.method == 'POST':
        # 获取前端传递的国家名称
        country_name = request.POST.get('country_name', '').strip()
        if not country_name:
            return JsonResponse({'status': 'error', 'message': '请输入国家名称'})
        
        try:
            # 查询数据库
            country = Country.objects.get(name=country_name)
            # 构造返回的JSON数据
            data = {
                'status': 'success',
                'name': country.name,
                'continent': country.continent,
                'capital': country.capital,
                'currency': country.currency
            }
            return JsonResponse(data)
        except Country.DoesNotExist:
            return JsonResponse({'status': 'error', 'message': '未找到该国家信息'})
    # 只接受POST请求
    return JsonResponse({'status': 'error', 'message': '请求方法不正确'})

2. 配置URL路由（urls.py） #

在应用的urls.py中添加AJAX请求的路由：

from django.urls import path
from . import views

urlpatterns = [
    path('', views.main_page, name='main_page'),
    path('get-country/', views.get_country_info, name='get_country'),  # 新增路由
]

3. 前端页面修改（index.html） #

添加结果展示区域，并编写原生JavaScript实现AJAX逻辑：

<body>
    <h2><em>Please type a country name:</em></h2><br><br>
    <div class="container">
        <form id="get_info" method="post">
            {{ form }}
            {% csrf_token %}
            <input id="submit_button" type="submit" name="submit" value="Get info">
        </form>
        <!-- 结果展示区域 -->
        <div id="country_result" style="margin-top: 20px; display: none;">
            <h3>国家信息</h3>
            <p><strong>名称：</strong><span id="name"></span></p>
            <p><strong>大洲：</strong><span id="continent"></span></p>
            <p><strong>首都：</strong><span id="capital"></span></p>
            <p><strong>货币：</strong><span id="currency"></span></p>
        </div>
        <!-- 错误提示区域 -->
        <div id="error_message" style="margin-top: 20px; color: red; display: none;"></div>
    </div>

    <script>
        // 获取页面元素
        const form = document.getElementById('get_info');
        const resultDiv = document.getElementById('country_result');
        const errorDiv = document.getElementById('error_message');

        // 监听表单提交事件
        form.addEventListener('submit', function(e) {
            // 阻止表单默认提交（避免页面刷新）
            e.preventDefault();

            // 获取CSRF令牌
            const csrfToken = document.querySelector('[name=csrfmiddlewaretoken]').value;
            // 获取输入的国家名称
            const countryName = document.querySelector('input[name="country_name"]').value.trim();

            // 创建AJAX请求
            const xhr = new XMLHttpRequest();
            xhr.open('POST', '/get-country/', true);
            // 设置请求头
            xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
            xhr.setRequestHeader('X-CSRFToken', csrfToken);

            // 监听请求状态变化
            xhr.onreadystatechange = function() {
                if (xhr.readyState === XMLHttpRequest.DONE) {
                    if (xhr.status === 200) {
                        const response = JSON.parse(xhr.responseText);
                        if (response.status === 'success') {
                            // 展示结果，隐藏错误
                            resultDiv.style.display = 'block';
                            errorDiv.style.display = 'none';
                            // 填充数据
                            document.getElementById('name').textContent = response.name;
                            document.getElementById('continent').textContent = response.continent;
                            document.getElementById('capital').textContent = response.capital;
                            document.getElementById('currency').textContent = response.currency;
                        } else {
                            // 展示错误信息
                            errorDiv.style.display = 'block';
                            resultDiv.style.display = 'none';
                            errorDiv.textContent = response.message;
                        }
                    } else {
                        // 请求失败处理
                        errorDiv.style.display = 'block';
                        resultDiv.style.display = 'none';
                        errorDiv.textContent = '请求失败，请稍后重试';
                    }
                }
            };

            // 发送请求
            xhr.send(`country_name=${encodeURIComponent(countryName)}`);
        });
    </script>
</body>

可选：用jQuery简化AJAX代码 #

如果熟悉jQuery，可使用以下更简洁的代码：

<!-- 先引入jQuery -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
    $('#get_info').submit(function(e) {
        e.preventDefault();
        const formData = $(this).serialize();
        $.ajax({
            url: '/get-country/',
            type: 'POST',
            data: formData,
            success: function(response) {
                if (response.status === 'success') {
                    $('#country_result').show();
                    $('#error_message').hide();
                    $('#name').text(response.name);
                    $('#continent').text(response.continent);
                    $('#capital').text(response.capital);
                    $('#currency').text(response.currency);
                } else {
                    $('#error_message').text(response.message).show();
                    $('#country_result').hide();
                }
            },
            error: function() {
                $('#error_message').text('请求失败，请稍后重试').show();
                $('#country_result').hide();
            }
        });
    });
</script>

关键说明 #

• CSRF令牌处理：Django默认拦截无CSRF令牌的POST请求，上述两种方式都已处理该问题。
• 数据格式：使用JsonResponse返回JSON数据，前端可直接解析渲染。
• 错误处理：覆盖了空输入、国家不存在、请求失败等场景，提升用户体验。

内容的提问来源于stack exchange，提问作者Omri Madar