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进阶教程之函数对象(函数也是对象)
Aug 30 Python
python模块之StringIO使用示例
Apr 08 Python
查看Python安装路径以及安装包路径小技巧
Apr 28 Python
Python使用MYSQLDB实现从数据库中导出XML文件的方法
May 11 Python
详解Django通用视图中的函数包装
Jul 21 Python
Python PyQt5标准对话框用法示例
Aug 23 Python
Python实现嵌套列表去重方法示例
Dec 28 Python
python 通过字符串调用对象属性或方法的实例讲解
Apr 21 Python
python 3.6.2 安装配置方法图文教程
Sep 18 Python
使用python制作一个解压缩软件
Nov 13 Python
如何在Python中创建二叉树
Mar 30 Python
Django操作cookie的实现
May 26 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
完美解决dedecms中的[html][/html]和[code][/code]问题
2007/03/20 PHP
简单示例AJAX结合PHP代码实现登录效果代码
2008/07/25 PHP
PHP检测字符串是否为UTF8编码的常用方法
2014/11/21 PHP
PHP Static延迟静态绑定用法分析
2016/03/16 PHP
PHP实现对xml进行简单的增删改查(CRUD)操作示例
2017/05/19 PHP
ThinkPHP5.0多个文件上传后找不到临时文件的修改方法
2018/07/30 PHP
Laravel timestamps 设置为unix时间戳的方法
2019/10/11 PHP
浏览器解析js生成的html出现样式问题的解决方法
2012/04/16 Javascript
jtable列中自定义button示例代码
2013/11/21 Javascript
jquery 中的each()跳出循环的语句
2014/05/23 Javascript
jquery根据td给相同tr下其他td赋值的实现方法
2016/10/05 Javascript
js输入框使用正则表达式校验输入内容的实例
2017/02/12 Javascript
JS实现点击循环切换显示内容的方法
2017/10/19 Javascript
python通过socket实现多个连接并实现ssh功能详解
2017/11/08 Python
win7+Python3.5下scrapy的安装方法
2018/07/31 Python
5分钟 Pipenv 上手指南
2018/12/20 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
python对Excel的读取的示例代码
2020/02/14 Python
将 Ubuntu 16 和 18 上的 python 升级到最新 python3.8 的方法教程
2020/03/11 Python
python3中确保枚举值代码分析
2020/12/02 Python
Pyecharts 中Geo函数常用参数的用法说明
2021/02/01 Python
html5使用canvas绘制文字特效
2014/12/15 HTML / CSS
兰蔻英国官网:Lancome英国
2019/04/30 全球购物
Molton Brown美国官网:奢华美容、香水、沐浴和身体护理
2020/09/02 全球购物
影视制作岗位职责
2013/12/04 职场文书
师范教师大学生职业生涯规划范文
2014/01/05 职场文书
初中物理教学反思
2014/01/14 职场文书
运动会通讯稿50字
2014/01/30 职场文书
活动总结报告怎么写
2014/07/03 职场文书
春游踏青活动方案
2014/08/14 职场文书
2015年司机年终工作总结
2015/05/14 职场文书
2015年团支部年度工作总结
2015/05/27 职场文书
解决Maven项目中 Invalid bound statement 无效的绑定问题
2021/06/15 Java/Android
Python 恐龙跑跑小游戏实现流程
2022/02/15 Python
Golang 实现WebSockets
2022/04/24 Golang