layui+django+mysql三级联动-北京地区-(区是数据库返回的, 剩下的change改变,ajax提交,拼接字符串渲染页面)

刚自学了python不长时间, 也没怎么用起来,今天闲着没事干,结合layui实现了一个三级联动的问题

之前写过一个纯js(jquery)的,省市县都是自己写好的(json),然后根据change的改变来加载下一级或下两级

今天我写的是存在数据库中, 方法和上基本相同

先看下要做的结果:

思路解析

1. 当我点击这个页面时, django会返回我village的数据,并渲染到这个页面的地区的地方, 既这一步我不做js加载
2. 不选择地区, 位置是空的
3. 当选择地区后,jquery的change事件结合ajax异步去加载对应location
4. django后台根据ajax提交的village的value值, 将数据库中的location以json格式返回
5. ajax请求成功后以拼接字符串的形式动态加载到location显示的地方(位置)
6. layui注意加载完后form.render()重新渲染,否则看不到

数据库的设计
village: 地区
location: 地区对应的各个位置

说明: 每个区我也只找了几个而已, 不全

views加载页面的代码:

def zhiding_views(request):
    if 'isLogin' in request.session:
    	#-------核心代码就两行
        villages = Village.objects.all()
        return render(request, 'zhiding.html', locals())
        #-------
    else:
        return render(request, 'error.html')

---

<!-- zhiding.html -->
<form action="" class="layui-form">
        <div class="layui-form-item">
            <label class="layui-form-label">地区</label>
            <div class="layui-input-block">
                <select name="village" lay-filter="village" lay-verify="required" lay-search>
                    <option value=""></option>
                    {% for village in villages %}
                    <option value="{{ village.id }}">{{ village.vname }}</option>
                    {% endfor %}
                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">位置</label>
            <div class="layui-input-block">
                <select name="location" id="location" lay-filter="location" lay-verify="required" lay-search>
                     <option value=""></option>

                </select>
            </div>
        </div>
        .....
    </form>
...
<script>
layui.use(['layer', 'jquery', 'form'], function() {
   var layer = layui.layer,
       $ = layui.jquery,
       form = layui.form; // 不写下拉框加载不出来
});
</script>

以上是让我们看到页面, 并且页面当中已经加载了地区

---

现在我们要做的就是通过选择地区, 改变位置
思路:

1. 获取地区的value值
2. 使用change事件
3. ajax异步提交
4. 拼接字符串
5. 改变地区时要清空上次的
6. 重新渲染页面

获取地区的值(直接layui)

form.on('select(village)', function (data) {
    if(data.value != ''){
    	console.log(data.value);  // 打印获取到的值----地区value值
        location(data.value);   // 调用location方法,参数是获取到的地区value值
    }
});

location方法,我们让他执行ajax提交数据到后台, 并将返回的数据进行渲染

function location(village){
    var url = '/ajax-location/';  // 处理地址 url
    var data = {'village_id': village};  // 提交到后天的数据--地区value值--地区 id
    $.ajax({
        type: 'post',
        url: url,
        data: data,
        dataType: 'json',
        success: function (data) {
            var html = '<option value=""></option>';  // 将下拉框清空重新填写新的内容
            $.each(data, function (key, obj) { // each便利django返回的json数据,并用拼接字符串的形式动态加载到下拉框
                html += '<option value="+ obj.pk +">' + obj.fields['lname'] +'</option>'
            });
            $('[name=location]').html(html);
            // -----①  见下方说明处
            form.render('select');  // 重新渲染
            // -----
        }
    });
}

url

url('^ajax-location/$', locationValue_views),

后台接收数据,返回数据:

@csrf_exempt
def locationValue_views(request):
    village_id = request.POST.get('village_id')  # 接收ajax提交的数据--地区 id
    locations = Location.objects.filter(villageLocation_id=village_id) # 根据地区id查询所对应的location
    # -----② 见下方说明处
    data = serializers.serialize('json', locations)  # 将locations打包成成json格式
    return HttpResponse(data)

说明
① 使用layui来重新渲染一定要加form.render()这句话,其次是放在什么位置比较合适?
我们在ajax中动态添加完数据后直接渲染就行了
② serializers 可导入 from django.core import serializers

额…好像结束了