Django+Ajax+jQuery实现网页动态更新的实例


Posted in Python onMay 28, 2018

views.py中的修改

增加相应的请求处理函数:

def getdevjson(request):
 print 'get here'
 if ('key' in request.GET):
 searchkey = request.GET.get('key')
 return JsonResponse(search(searchkey))
 else:
 return HttpResponse('Sorry!')

返回字符串中,既可以使用from django.http import JsonResponse,也可以使用HttpResponse(json.dumps(res))

前端网页修改

<script type="text/javascript">
 window.jQuery || document.write("<script src='../static/js/jquery.min.js'>" + "<" + "/script>");
</script>
<script type="text/javascript">
 $(function() {
 
 var submit_form = function(e) {
	 $.ajax({
 type : "GET",
 url : "/getdevjson?"+Math.random(),
 data : {
 key: $('#searchContent').val()
 },
 dataType : "text",
 success : function(res){
			$('#searchContent').focus().select();
			//console.log(res);
 update(res);
		 },
			error : function() {
 alert("处理异常返回!");}
 
		
 });
	 
 return false;
 };
 $('#calculate').bind('click', submit_form);
 $('input[type=text]').bind('keydown', function(e) {
 if (e.keyCode == 13) {
 submit_form(e);
 }
 });
 $('#searchContent').focus();
 });
</script>
<div class="divRight" id="divright1">
 <div class="divRight" style="height:70px; width:370px;">
<label id="lblSearch" class="cssLabelSearch">请输入查询key:</label>
<input id="searchContent" type="text" size="40"></input>
 <input id="calculate" type="button" value="确定" ></input>
</div>
 <br>
<label id="lbl1" class="cssLabelClient">节点信息</label>
<Textarea id="ClientInfoArea" readonly class="txtClientInfo"></Textarea>
</div>

#calculate是一个按钮,点击动作绑定了提交函数submit_form,ajax的请求参数中,data中包含了查询参数,success是请求成功后的动作,注意返回的res需要进行json解析才可以正确使用:root = JSON.parse(jsondata);update(res)是一个更新网页内容的函数

路由配置修改

urls.py中修改如下:

from django.conf.urls import patterns, include, url
from django.contrib import admin
admin.autodiscover()
urlpatterns = patterns('',
 url(r'^getdevjson$','dev.views.getdevjson',name='getdevjson'),
 url(r'^','dev.views.index',name='index'), 
 url(r'^admin/', include(admin.site.urls)),
)

需要注意的是为了避免路由被覆盖,将index的路由配置尽量放置在最后一行。

以上这篇Django+Ajax+jQuery实现网页动态更新的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Python 相关文章推荐
Python的Flask框架的简介和安装方法
Nov 13 Python
Python更新数据库脚本两种方法及对比介绍
Jul 27 Python
浅谈Scrapy框架普通反爬虫机制的应对策略
Dec 28 Python
在python3.5中使用OpenCV的实例讲解
Apr 02 Python
numpy中实现二维数组按照某列、某行排序的方法
Apr 04 Python
Python wxpython模块响应鼠标拖动事件操作示例
Aug 23 Python
Python调用C语言的实现
Jul 26 Python
python模拟鼠标点击和键盘输入的操作
Aug 04 Python
django 实现celery动态设置周期任务执行时间
Nov 19 Python
Python cookie的保存与读取、SSL讲解
Feb 17 Python
Python sqlalchemy时间戳及密码管理实现代码详解
Aug 01 Python
Python开发之QT解决无边框界面拖动卡屏问题(附带源码)
May 27 Python
Python实现合并两个列表的方法分析
May 28 #Python
django js实现部分页面刷新的示例代码
May 28 #Python
Django项目中用JS实现加载子页面并传值的方法
May 28 #Python
Python面向对象类继承和组合实例分析
May 28 #Python
django传值给模板, 再用JS接收并进行操作的实例
May 28 #Python
Django处理文件上传File Uploads的实例
May 28 #Python
python3.4实现邮件发送功能
May 28 #Python
You might like
PHP模拟SQL Server的两个日期处理函数
2006/10/09 PHP
php调整gif动画图片尺寸示例代码分享
2013/12/05 PHP
调用WordPress函数统计文章访问量及PHP原生计数器的实现
2016/03/21 PHP
CI框架AR数据库操作常用函数总结
2016/11/21 PHP
基于ThinkPHP实现的日历功能实例详解
2017/04/15 PHP
PHP jQuery+Ajax结合写批量删除功能
2017/05/19 PHP
Jquery css函数用法(判断标签是否拥有某属性)
2011/05/28 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
2012/02/02 Javascript
THREE.JS入门教程(6)创建自己的全景图实现步骤
2013/01/25 Javascript
jQuery制作仿腾讯web qq用户体验桌面
2013/08/20 Javascript
JQuery的$和其它JS发生冲突的快速解决方法
2014/01/24 Javascript
JavaScript中的函数模式详解
2015/02/11 Javascript
nodejs调用cmd命令实现复制目录
2015/05/04 NodeJs
纯JavaScript代码实现移动设备绘图解锁
2015/10/16 Javascript
详解JavaScript基本类型和引用类型
2015/12/09 Javascript
JS实现的倒计时效果实例(2则实例)
2015/12/23 Javascript
使用jquery.form.js实现图片上传的方法
2016/05/05 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
Vue.js结合bootstrap实现分页控件
2017/03/10 Javascript
jquery在vue脚手架中的使用方式示例
2017/08/29 jQuery
Vue.js的动态组件模板的实现
2018/11/26 Javascript
JS实现小星星特效
2019/12/24 Javascript
JS document对象简单用法完整示例
2020/01/14 Javascript
vue中的计算属性和侦听属性
2020/11/06 Javascript
使用PYTHON接收多播数据的代码
2012/03/01 Python
Python 变量类型及命名规则介绍
2013/06/08 Python
django框架使用views.py的函数对表进行增删改查内容操作详解【models.py中表的创建、views.py中函数的使用,基于对象的跨表查询】
2019/12/12 Python
PyQT5速成教程之Qt Designer介绍与入门
2020/11/02 Python
详解pycharm自动import所需的库的操作方法
2020/11/30 Python
纽约海:Sea New York
2018/11/04 全球购物
瑞典的玛丽小姐:Miss Mary of Sweden
2019/02/13 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
求职信怎么写
2014/05/23 职场文书
锦旗标语大全
2014/06/23 职场文书
村当支部个人对照检查材料思想汇报
2014/10/06 职场文书
Python if else条件语句形式详解
2022/03/24 Python