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 %}
djano modles values+ajax实现无页面刷新更新数据的更多相关文章
- AjaxPro实现无刷新更新数据
使用AjaxPro实现无刷新更新数据 需求 在一个页面动态无刷新的更新后台得到的数据.要想无刷新的更新数据,需要使用Javascript能够获取后台返回的数据,然后通过第三方Javascript库(J ...
- 页面刷新vuex数据消失问题解决方案 之 vuex中间件
之前我写了一篇用ES6 Proxy方案解决数据同步的文章 页面刷新vuex数据消失问题解决方案. 今天和同事沟通这个vuex数据还原问题,我说我的方法很奇异.聊着聊着,同事咋不用 store.sub ...
- 使用sessionStorage解决vuex在页面刷新后数据被清除的问题
https://www.jb51.net/article/138218.htm 1.原因 2.解决方法 localStorage没有时间期限,除非将它移除,sessionStorage即会话,当浏览器 ...
- [转]jquery 点击表格变为input可以修改无刷新更新数据
原文地址:http://www.freejs.net/article_biaodan_43.html 之前已经发了2篇类似的文章<点击变td为input更新>和<jquery表格可编 ...
- 使用AjaxPro实现无刷新更新数据
需求 在一个页面动态无刷新的更新后台得到的数据.要想无刷新的更新数据,需要使用Javascript能够获取后台返回的数据,然后通过第三方Javascript库(JQuery等)动态更新web页面DOM ...
- 页面刷新vuex数据消失问题解决方案
VBox持续进行中,哀家苦啊,有没有谁给个star. vuex是vue用于数据存储的,和redux充当同样的角色. 最近在VBox开发的时候遇到的问题,页面刷新或者关闭浏览器再次打开的时候数据归零.这 ...
- vue 使用localStorage解决vuex在页面刷新后数据被清除的问题
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- 【vue】使用localStorage解决vuex在页面刷新后数据被清除的问题
通常,我们在使用vue编写页面时,会需要使用vuex在组件间传递(或者说共同响应)同一个数据的变化.例如:用户的登录信息. 下面,我们使用传递用户登录信息的例子来一步步解决这个问题. 首先,我们的第一 ...
- vue:vue页面刷新vuex数据消失问题
vuex中数据刷新页面消失问题:a页面请求的数据保存在vuex中,只要不刷新,那跳转到b页面里也可以用,但如果b页面刷新,那vuex里的数据就会消失,可以得解决方法:a页面用的数据a页面的生命周期函数 ...
随机推荐
- Django学习之模拟架构页面跳转
背景知识,需要有一定量的HTTP基础知识 在客户端游览器通过URL向服务端发送请求时,经历了两次过程.一次是URL向服务端发起请求,一次是服务端向客户端回发响应. 由图可知,客户端一共传递两个信息,一 ...
- rails应用无法读取kafka数据报错Kafka::Error: Failed to find group coordinator
如果确保kafka中有数据,rails应用中却无法读取到,或报如下错误: Kafka::Error: Failed to find group coordinator 一般有两种情况,解决: ...
- filebeat5与filebeat6配置index的差异
filebeat6配置index需要添加setup对应项,不然启动会报错. 6.0以后版本具体设置在filebeat.yml如下: setup.template.name: "myname- ...
- python中自定义超时异常的几种方法
最近在项目中调用第三方接口时候,经常会出现请求超时的情况,或者参数的问题导致调用异代码异常.针对超时异常,查询了python 相关文档,没有并发现完善的包来根据用户自定义的时间来抛出超时异常的模块.所 ...
- 在线tidb+tipd+tikv扩容,迁移,从UC到阿里云
集群现状: 共有五个节点,配置为16核32g内存,数据节点为1T ssd盘,非数据节点为100g ssd盘: 角色规划: node1 tidb tipd node2 tidb tipd node3 t ...
- Qt Creator 下启动vim模式后,运行快捷键Ctrl+R失效解决方案
首先开启vim后,Ctrl+R无法用 解决: 工具 -> 选项->FakeVim 转到Ex Command Mapping 搜索Run 底栏Regular expression 输入run ...
- TPO-12 C2 A problem of the TA's payroll
TPO-12 C2 A problem of the TA's payroll payroll n. 工资单:在册职工人数:工资名单: paycheck n. 付薪水的支票,薪水 paperwork ...
- tpo-08 C1 submit a document for graduation
第 1 段 1.Listen to a conversation between a student and a registrar. 请听一段学生和老师的对话. 第 2 段 1.Hi, I'd li ...
- Unity编辑器 - Rigidbody动力学Bake到AnimationClip
Unity编辑器 - Rigidbody动力学Bake到AnimationClip Unity文档移动平台优化部分提到Physics对CPU的消耗较大 将动力学的特效如破碎等Bake成动画也是优化性能 ...
- GameplayKit的GKStateMachine用法与实例
GKStateMachine 玩家进入GameScene场景中 -> 通过GKStateMachine进入到指定的游戏状态GKState 在GameScene场景中 -> 根据不同的逻辑调 ...