点击“查找2”按钮,通过ajax GET方式进行查询数据,这样页面不需要整体刷新,之后清空tbody数据,将查询结果重新附加到tbody

前端html:

<div class="box-header">
<i class="icon-table"></i>
<h5 id="resultcount"> 设备 (共计{{counts}}) </h5>
<input style="margin:10px" type="button" id='butupdate' name='Update' value="Update" class="btnc1" style="margin-left:5px;border-bottom: #93bee2 1px solid">
</div>
<div class="box-content box-table" id="tablec">
<div class="holder"></div> <form id="searchform" action="" method="get" style="display:inline">
{% csrf_token %}
<input type="text" name="q" class="text-search" style="margin-left:42px;display:inline;width: 115px"> <label style="margin-left:10px;display:inline">By</label>
<select id="slctsrv" name="slctsrv" style="margin-left:5px;width: 120px">
<option value="APP">应用</option>
<option value="IP" selected="selected">IP</option>
<option value="ServerName">名称</option>
</select>
<input type="button" id="search2" value="查找2" class="btn" style="margin-left:5px">
</form>

前端js:

$("#search2").on("click",function(){
//查找每个button所在行的td的值
$.ajax({
type: 'GET',
//url: '/aptest/',
data:$('#searchform').serialize(),
dataType:'json',
success:function(response,stutas,xhr){
$('#servers tbody').empty(); //清空tbody内容
$('#resultcount').empty(); //清空查询个数
$("#resultcount").append("设备 (共计" + response.length + ")"); //显示查询结果数量
$.each(response,function(i,item){ //response为返回结果,是一个array,然后对该array进行遍历,fields属性中包含所有查询内容,pk为每条结果的主键字段
var vfields = item.fields
var _len=$("#servers tr").length;
$("#servers tbody").append("<tr >" //id="+_len+" class='success'
+"<td width='2%'><input id='ckbid' name='ckb' type='checkbox'/></td>"
+"<td id='num'>"+_len+"</td>"
+"<td id='PKID' style='display:none'>" + item.pk +"</td>"
+"<td id='APP'>"+ vfields.APP +"</td>"
+"<td id='IP'>"+ vfields.IP +"</td>"
+"<td id='ServerName'>"+ vfields.ServerName +"</td>"
+"<td id='DomainName'>"+ vfields.DomainName +"</td>"
+"<td id='CPU'>"+ vfields.CPU +"</td>"
+"<td id='MemorySize'>"+ vfields.MemorySize +"</td>"
+"<td id='DISK'>"+ vfields.DISK +"</td>"
+"<td id='SN'>"+ vfields.SN +"</td>"
+"<td id='Type'>"+ vfields.Type +"</td>"
+"<td id='OSVersion'>"+ vfields.OSVersion +"</td>"
+"<td id='iDRAC'>"+ vfields.iDRAC +"</td>"
+"<td id='Rack'>"+ vfields.Rack +"</td>"
+"<td id='Person'>"+ vfields.Person +"</td>"
+"<td id='Person_app'>"+ vfields.Person_app +"</td>"
+"<td id='OS_mark'>" + vfields.OS_mark +"</td>"
+"<td><input type='button' id='bbt' value='保存' /></td>"
+"</tr>");
$("#ttb").trigger("update"); //sorter
})
},
error:function(xhr,errorText,errorStatus){
alert(xhr.status+' error: '+xhr.statusText);
},
timeout:5000
}); });

编写view(Django序列化objects):

from django.core import serializers #导入serializers模块
#查询
if request.method == 'GET':
if 'q' in request.GET:
q=request.GET['q']
if q is not None:
filterconitionname = request.GET['slctsrv'] + '__icontains'
srvs = serverinfors.objects.filter(**{filterconitionname:q})
srvs_json = serializers.serialize("json",srvs)
return HttpResponse(srvs_json) #将objects过滤结果序列化后返回给ajax接收,对于Jquery来说一个array

print srvs_json

[{"fields": {"OSVersion": "CentOS", "APP": null,"OS_mark": "Linux"}, "model": "sinfors.serverinfors", "pk": 178}]

print type(srvs_json) 返回值:‘unicode’

对srvs_json反序列化:

from django.core.serializers import serialize,deserialize
deserialize('json',srvs_json) # 返回值是一个迭代器,如下:
>> <generator object Deserializer at 0x00000000036A65A0>
#查看每个结果:
for i in deserialize('json',sj):print i.object.APP

去掉前后[],方法:srvs_json[1:-1]

django的 serializers 只支持 queryset,而不支持model的实例

srvs = serverinfors.objects.get(pk=178)
data = serializers.serialize("json",srvs)

错误提示:TypeError: 'serverinfors' object is not iterable

解决方式,添加[],如下:

serializers.serialize("json",[srvs])

参考:http://blog.csdn.net/woohyuknrg/article/details/17140531

通过ajax GET方式查询数据,Django序列化objects的更多相关文章

  1. Hibernate的检索方式--查询数据的方式

    Hibernate 提供了以下几种检索对象的方式1导航对象图检索方式: 根据已经加载的对象导航到其他对象(根据已经加载的对象,导航到其他对象-例如一对多的查询)2OID 检索方式: 按照对象的 OID ...

  2. mORMot学习笔记2-2种方式查询数据

    本例使用SqlServer 第一种方式结果放入Memo控件,,需要引用SynCommons, SynDB, SynOleDb; procedure TForm1.Button1Click(Sender ...

  3. 关于ajax访问webservice查询数据量稍微大一点,就会返回error500的解决方案

    只需要在web.config的configeration节点中增加如下子节点即可: <system.web.extensions>       <scripting>      ...

  4. Dynamics CRM2016 查询数据的三种方式的性能对比

    之前写过一个博客,对非声明验证方式下连接组织服务的两种方式的性能进行了对比,但当时只是对比了实例化组织服务的时间,并没有对查询数据的时间进行对比,那有朋友也在我的博客中留言了反映了查询的时间问题,一直 ...

  5. 以Ajax的方式访问数据库

    一:以Ajax的方式显示数据 我们都知道,如果用Ajax程序去加载一个动态页,则加载的实际上是这个动态页执行完毕后生成的静态HTML代码字符串. 1.以原有的格式显示数据 <?php heade ...

  6. ajax 请求多张图片数据

    需求分析: 实现对网页上的图片进行显示.由于读取图片名称相同,而图片内容已发生改变.采用网上所用的要求浏览器不缓存的操作不生效 <META http-equiv="Pragma&quo ...

  7. MyBatis 传入List集合作为条件查询数据

    使用的是SSM框架,数据库是MySQL,做查询的时候传入List集合,使用SQL语句的in方式查询数据 主要有两点问题:我的List集合是利用的另外一个语句查询出来的,传入参数是int类型,返回值是i ...

  8. Maven+ajax+SSM实现查询

    2.尚硅谷_SSM高级整合_使用ajax操作实现页面的查询功能 16.尚硅谷_SSM高级整合_查询_返回分页的json数据.avi 在上一章节的操作中我们是将PageInfo对象存储在request域 ...

  9. Django中数据传输编码格式、ajax发送json数据、ajax发送文件、django序列化组件、ajax结合sweetalert做二次弹窗、批量增加数据

    前后端传输数据的编码格式(contentType) 提交post请求的两种方式: form表单 ajax请求 前后端传输数据的编码格式 urlencoded formdata(form表单里的) ja ...

随机推荐

  1. WPF装饰器

    装饰器定义: 装饰器是一种特殊类型的 FrameworkElement,用于向用户提供可视化提示. 对于其他用户,装饰器可用于将功能控点添加到元素中或提供有关控件的状态信息. 装饰器可以在不改变原有的 ...

  2. IDEA破解教程(破解到2100年)的注意事项

    https://blog.csdn.net/yl1712725180/article/details/80309862 1.上边是教程 2.注意事项,在两个文件中加   -javaagent:加上你j ...

  3. 深入出不来nodejs源码-流程总览

    花了差不多两周时间过了下primer C++5th,完成了<C++从入门到精通>.(手动滑稽) 这两天看了下node源码的一些入口方法,其实还是比较懵逼的,语法倒不是难点,主要是大量的宏造 ...

  4. 创建自己的OAuth2.0服务端(一)

    如果对OAuth2.0有任何的疑问,请先熟悉OAuth2.0基础的文章:http://www.cnblogs.com/alunchen/p/6956016.html 1. 前言 本篇文章时对 客户端的 ...

  5. Js的substring和C#的Substring

    Js的substring 语法: 程序代码String.substring(start, end) 说明:返回一个从start开始到end(不包含end)的子字符串. 示例: 程序代码var str= ...

  6. 使用Visual Studio 调试断点不起作用的问题解决办法 调试Revit CAD 不能进入断点

    随着Visual Studio 2010正式版的发布,相信不少人都像我一样升级到了Visual Studio 2010.那么您在使用VS2010在AutoCAD,Map 3D或Revit的.net应用 ...

  7. PowerDesigner Constraint name uniqueness 错误

    使用PowerDesigner生成数据库脚本时报 Constraint name uniqueness 错误: 双击每行错误,发现外键引用的名字有重复的: 惯性去网上找解决办法,找到的主要是两个方法: ...

  8. 【Tomcat】部署Web到tomcat的四种方式

    一.静态部署 1.直接将web项目文件件拷贝到webapps 目录中     Tomcat的Webapps目录是Tomcat默认的应用目录,当服务器启动时,会加载所有这个目录下的应用.所以可以将JSP ...

  9. Java学习第二篇 — 时间类的使用

    package DateTest; import java.util.Date; public class Date1 { public static void main(String[] args) ...

  10. Java虚拟机 - 结构原理与运行时数据区域

    http://liuwangshu.cn/java/jvm/1-runtime-data-area.html 前言 本来计划要写Android内存优化的,觉得有必要在此之前介绍一下Java虚拟机的相关 ...