Django+ajax 实现动态加载下拉框

项目开发中一部分需要实现下拉框功能，在网上找了一些资料，杂七杂八的，缺胳膊少腿的挺多，本来就很混乱，这一看更懵了。决定花点时间研究研究清楚。
我认为的实现原理： 大概就是后台从数据库里面拿到数据，然后处理为json，通过ajax接收后台处理好的json，然后填充到select中，然后展示出来。而json一般为字典形式的数据，所以select中展示的数据是字典中的value值(因为我想要的值是字典中的value值),所以需要在js中处理一下，从而取得value值。以上是我的想法及实现方式，如果哪里有错误，还请各位博友赐教。

实现之后的效果：

这只是其中一个下拉框的效果，其他两个效果跟这个一样。

以下是详细代码实现：

models.py

class Model(models.Model):
    model_id = models.AutoField(primary_key=True)
    model_name = models.CharField(max_length=45)

    class Meta:
        managed = False
        db_table = 'model'

views.py

def down(request):
    if request.method == 'POST':
        modelData = Model.objects.filter().values('model_id', 'model_name')
        transformation = list(modelData)    # [{'model_id': 1, 'model_name': 'abc'}, {'model_id': 2, 'model_name': 'def'}, {'model_id': 3, 'model_name': 'ghi'}, {'model_id': 4, 'model_name': 'jkl'}, {'model_id': 5, 'model_name': 'mno'}]
        list_a = []  # [1, 2, 3, 4, 5]
        list_b = []  # ['abc', 'def', 'ghi', 'jkl', 'mno']
        for i in transformation:
            list_a.append(i.get('model_id'))
            list_b.append(i.get('model_name'))
        dictionary = dict(zip(list_a, list_b))   # {'1': 'abc', '2': 'def', '3': 'ghi', '4': 'jkl', '5': 'mno'}
        return HttpResponse(json.dumps(dictionary))  # 数据格式为json格式，不然ajax会接收到不完整的数据
    pass 
# 代码中每行的注释是处理完数据之后的数据，方便观察数据处理之后的样子

js文件

window.onload = sarial();//加载页面时自动执行方法
function sarial(){
    $.ajax({
        url: "/down/",
        type: "post",
        dataType: "json",
        contentType: "application/json",
        traditional: true,
        success: function (data) {
            console.log(data);
            // for (var i = 0; i < data.length; i++) {
                    //var jsonObj =data[i];
            for (var i in data) {
            	// 上面说到了，因为json是字典形式的数据，所以下面“data[i]”的值就为value
                $("#monster").append("" + data[i] + "");
                // 因为我用到了3个下拉框，所以分别使用了3个不同的id，依次是：monster，monster1，monster2.
                //你可以根据自己的需求来决定使用几个下拉框，然后定义几个id，不能重复。
                $("#monster1").append("" + data[i] + "");
                $("#monster2").append("" + data[i] + "");
                }
            },
        error: function (msg) {
            alert("数据加载出错，请重试！");
        }
    });

然后下面这三段代码是我加的下拉框，依次为查询处的下拉框、添加时的下拉框和修改时的下拉框：

# 查询处的下拉框
<form  method="post" name="searchForms">
	产品：<select name="productModel" id="monster" style="width: 150px;height: 26px;">
	<option value="">=显示全部型号=</option>
	{% for k,v in data.items %}
	    <option value="{{ k }}">{{ v }}</option>
	{% endfor %}
	</select>&nbsp;&nbsp;
</form>

# 添加处的下拉框
<form method="post" name="addForm" enctype="multipart/form-data">
	<strong>型号：</strong><select name="productModel" id="monster1" style="width: 568px;height: 34px;">
		<option id="productModel" value="">==请选择型号==</option>
		{% for k,v in data.items %}
		<option value="{{ k }}">{{ v }}</option>
		{% endfor %}
	</select>&nbsp;&nbsp;
</form>

<form  method="post" name="updateForm" >
	型号：<select name="productModel" id="monster2" style="width: 568px;height: 34px;">
	{% for k,v in data.items %}
	<option value="{{ k }}">{{ v }}</option>
	{% endfor %}
	</select>&nbsp;&nbsp;
</form>

如果你觉得看了我的博客对你的学习有帮助，请分享给其他博友学习吧！
希望有赞有评论！
（转载请保留作者署名和文章出处）