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
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | 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
只发布本例中的关键代码
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 | {% 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 %} |
分类:
django
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 开发中对象命名的一点思考
· .NET Core内存结构体系(Windows环境)底层原理浅谈
· C# 深度学习:对抗生成网络(GAN)训练头像生成模型
· .NET 适配 HarmonyOS 进展
· .NET 进程 stackoverflow异常后,还可以接收 TCP 连接请求吗?
· 本地部署 DeepSeek:小白也能轻松搞定!
· 基于DeepSeek R1 满血版大模型的个人知识库,回答都源自对你专属文件的深度学习。
· 在缓慢中沉淀,在挑战中重生!2024个人总结!
· 大人,时代变了! 赶快把自有业务的本地AI“模型”训练起来!
· Tinyfox 简易教程-1:Hello World!