使用 AJAX 和 Django 的下拉菜单 - Javascript

在本教程中，我们将使用 AJAX 和 Django 来创建一个下拉菜单，这将允许用户选择一个选项并在提交表单时将其发送到服务器。这将涉及到使用 Javascript 和 Python 的基础知识，如果您还不熟悉这些技术，建议优先学习相关知识再进行下面的操作。

首先，我们需要在 Django 中创建数据模型以存储下拉菜单项目的选项。在本例中，我们将创建一个名为 "Options" 的模型，其中包含 "name" 字段和 "value" 字段。

from django.db import models

class Options(models.Model):
   name = models.CharField(max_length=50)
   value = models.CharField(max_length=50)

接下来，我们需要创建一个视图函数，该函数将从数据库中获取选项并将其呈现为 JSON 数据。我们可以使用 Django 中的内置模块 "json" 来将模型实例转换为 JSON。

import json
from django.http import JsonResponse
from .models import Options

def load_options(request):
    options_list = Options.objects.all()
    options_dict = {option.name: option.value for option in options_list}
    return JsonResponse(json.dumps(options_dict), safe=False)

接下来，我们需要使用 Javascript 来完成剩下的部分。我们将使用 jQuery 轻松处理 AJAX 请求，并使用以下代码为下拉菜单创建 HTML 表格。

<label>选择：</label>
<select id="options" name="options">
</select>

下面是 Javascript 代码片段，用于向服务器发送 AJAX 请求以获取选项，并将其添加到下拉菜单中。

$(document).ready(function(){
   $.ajax({
      url: '/load_options/',
      success: function(data){
         var options = JSON.parse(data);
         var $select = $('#options');
         $.each(options, function(key, value){
            $('<option>').val(key).text(value).appendTo($select);
         });
      }
   });
});

现在，在页面加载时，AJAX 请求将从服务器获取选项，并将其添加到下拉菜单中。

我们还需要将下拉菜单的值添加到表单中。我们可以使用以下代码监听表单提交并将下拉菜单的值添加到表单中。

$('form').submit(function(event){
   var selectedOption = $('#options').val();
   $('<input>').attr({
      type: 'hidden',
      name: 'selected_option',
      value: selectedOption
   }).appendTo('form');
});

现在，当表单提交时，我们将向表单添加一个名为 "selected_option" 的隐藏字段，并将其值设置为所选下拉菜单选项的值。

这是一个简单的例子，但 AJAX 和 Django 的组合可以用于创建强大的 Web 应用程序。