djano modles values+ajax实现无页面刷新更新数据

做项目的过程中想通过不刷新页面的方式来进行页面数据刷新，开始使用http://www.cnblogs.com/ianduin/p/7761400.html方式将查询结果数据进行序列化。发现可以行，但是后来在项目开发过程中发现使用mymodels.filer(...).values(...)的方式查询数据，在将数据序列化的过程中出现报错‘dict’xxxhas no attr '_meta'，最后找到解决方案，在使用json.dumps()转换成json格式数据的时候，先使用list()方法将queryset转换成list后，再使用json.dumps()即可，同时在使用ajax解析数据的时候使用JSON.parse(data)进行解析，即可进行遍历。

以下是我的实例（关键点在实例中已使用蓝色标注）

views.py

import json
from django.core.serializers.json import DjangoJSONEncoder

def index(request):
    """index页面"""
    return render(request, 'index.html', locals())

def searchurl(request):
    if request.method == 'POST':
        print(request.POST)
        urlname = request.POST['linkname']
        urllist = UrlManage.objects.filter(name__contains=urlname).values('name', 'url')
        urllist.query.order_by = ['name']
        print(urllist)
        return HttpResponse(json.dumps(list(urllist), cls=DjangoJSONEncoder, ensure_ascii=False))
    else:
        print(request.GET)
        urllist = UrlManage.objects.all().values('name', 'url')
        urllist.query.order_by = ['name']
        return HttpResponse(json.dumps(list(urllist), cls=DjangoJSONEncoder, ensure_ascii=False))

 

index.html

只发布本例中的关键代码

{% extends 'common/base.html' %}
{% block tilte %}G3{% endblock %}
{% block content %}
    <div class="container">
        <div class="container-fluid">
            <form class="form-inline form-horizontal form-group-lg" action="{% url 'index' %}" method="post">{% csrf_token %}
                    <input class="form-control input-lg form-space" id="linkname" name="linkname" placeholder="请输入环境名称">
{#                    <input type="submit" class="btn btn-primary form-space" id="search" value="查询">#}
                <button class="btn btn-primary input-lg form-space" type="button" id="search">查询</button>
                <p style="font-size: 20px; color: red; display: none" id="message">查询条件不能为空!</p>
            </form>
        </div>

        <div class="container-fluid" id="result">
        </div>
    </div>

    <script>
    $(document).ready(function () {
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
        });
        $.ajax({
            type:'get',
            url:'{% url 'searchurl' %}',
            success:function (data) {
                console.log(data);
                console.log(typeof data);
                html='';
                $.each(JSON.parse(data), function (index, content) {
                    html += '<div class="col-md-2 form-space"><label class="btn-info btn-lg"><a href="'+content.url+' target="_blank">'+content.name+'</a></label></div>';
                });
                $('#result').html(html);
            },
            error:function () {
                html = '<h3>查询结果为空！</h3>';
                  $('#result').html(html);
            }
        });
        
        $('#search').click(function () {
            var lnv = $('#linkname').val();
            if(lnv !=""){
                $.ajax({
                    type:'post',
                    url:'{% url 'searchurl' %}',
                    data:$('form').serialize(),
                    success:function (data) {
                        console.log(data);
                        console.log(typeof data);
                        html='';
                        $.each(JSON.parse(data), function (index, content) {
                            html += '<div class="col-md-2 form-space"><label class="btn-info btn-lg"><a href="'+content.url+' target="_blank">'+content.name+'</a></label></div>';
                        });
                        $('#result').html(html);
                    },
                    error:function () {
                        html = '<h3>查询结果为空！</h3>';
                          $('#result').html(html);
                    }
                })
            }else {
                $('#message').show()
            }
        })
    })
    </script>
{% endblock %}