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中对变量判断是否为None的三种方法总结
Jan 23 Python
python使用MQTT给硬件传输图片的实现方法
May 05 Python
pytorch torch.expand和torch.repeat的区别详解
Nov 05 Python
Python3和pyqt5实现控件数据动态显示方式
Dec 13 Python
python实现的批量分析xml标签中各个类别个数功能示例
Dec 30 Python
pyftplib中文乱码问题解决方案
Jan 11 Python
python机器学习库xgboost的使用
Jan 20 Python
Python3 搭建Qt5 环境的方法示例
Jul 16 Python
python mongo 向数据中的数组类型新增数据操作
Dec 05 Python
Python操作PostgreSql数据库的方法(基本的增删改查)
Dec 29 Python
教你用python控制安卓手机
May 13 Python
浅谈Python数学建模之固定费用问题
Jun 23 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
DC四月将推出百页特刊漫画 纪念小丑诞生80周年
2020/04/09 欧美动漫
php对csv文件的读取,写入,输出下载操作详解
2013/08/10 PHP
Yii+upload实现AJAX上传图片的方法
2016/07/13 PHP
PHP递归实现快速排序的方法示例
2017/12/18 PHP
PHP7移除的扩展和SAPI
2021/03/09 PHP
[转]JS宝典学习笔记
2007/02/07 Javascript
最短的IE判断var ie=!-[1,]分析
2014/05/28 Javascript
使用jquery.qrcode生成彩色二维码实例
2014/08/08 Javascript
js实现同一页面多个运动效果的方法
2015/04/10 Javascript
Node.js编程中客户端Session的使用详解
2015/06/23 Javascript
jQuery实现图片左右滚动特效
2020/04/20 Javascript
详解nodejs 文本操作模块-fs模块(五)
2016/12/23 NodeJs
JS优化与惰性载入函数实例分析
2017/04/06 Javascript
vue.js中mint-ui框架的使用方法
2017/05/12 Javascript
vue实现表格增删改查效果的实例代码
2017/07/18 Javascript
Javascript格式化并高亮xml字符串的方法及注意事项
2018/08/13 Javascript
JS封装的模仿qq右下角消息弹窗功能示例
2018/08/22 Javascript
Vue.js 十五分钟入门图文教程
2018/09/12 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
基于javascript实现放大镜特效
2020/12/03 Javascript
[00:36]DOTA2风云人物相约完美“圣”典 12月17日不见不散
2016/11/30 DOTA
python高并发异步服务器核心库forkcore使用方法
2013/11/26 Python
Python编程求解二叉树中和为某一值的路径代码示例
2018/01/04 Python
mac下如何将python2.7改为python3
2018/07/13 Python
Python编写一个验证码图片数据标注GUI程序附源码
2019/12/09 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
如何利用python生成MD5并去重
2020/12/07 Python
css3 column实现卡片瀑布流布局的示例代码
2018/06/22 HTML / CSS
大学生简短的自我评价
2014/09/12 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
公民授权委托书
2014/10/15 职场文书
学校推普周活动总结
2015/05/07 职场文书
2015年税务稽查工作总结
2015/05/26 职场文书
教师节主持词开场白
2015/05/29 职场文书
暗恋桃花源观后感
2015/06/12 职场文书
python中pd.cut()与pd.qcut()的对比及示例
2022/06/16 Python