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脚本
Apr 05 Python
python和pyqt实现360的CLable控件
Feb 21 Python
Python实现网络端口转发和重定向的方法
Sep 19 Python
python类中super()和__init__()的区别
Oct 18 Python
django创建自定义模板处理器的实例详解
Aug 14 Python
python实现外卖信息管理系统
Jan 11 Python
django允许外部访问的实例讲解
May 14 Python
python判断输入日期为第几天的实例
Nov 13 Python
详解Python locals()的陷阱
Mar 26 Python
Django 用户认证组件使用详解
Jul 23 Python
Python实现病毒仿真器的方法示例(附demo)
Feb 19 Python
用python实现一个简单的验证码
Dec 09 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面向对象全攻略 (七) 继承性
2009/09/30 PHP
PHP反射机制用法实例
2014/08/28 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
iis 7下安装laravel 5.4环境的方法教程
2017/06/14 PHP
PHP join()函数用法与实例讲解
2019/03/11 PHP
php设计模式之备忘模式分析【星际争霸游戏案例】
2020/03/24 PHP
jquery maxlength使用说明
2011/09/09 Javascript
js采用concat和sort将N个数组拼接起来的方法
2016/01/21 Javascript
JavaScript lodash常见用法系列小结
2016/08/24 Javascript
vue.js删除动态绑定的radio的指定项
2017/06/02 Javascript
JS实现简易换图时钟功能分析
2018/01/04 Javascript
JavaScript寄生组合式继承实例详解
2018/01/06 Javascript
JS使用Date对象实时显示当前系统时间简单示例
2018/08/23 Javascript
基于vue hash模式微信分享#号的解决
2020/09/07 Javascript
[24:42]VP vs TNC Supermajor小组赛B组 BO3 第三场 6.2
2018/06/03 DOTA
python实现k均值算法示例(k均值聚类算法)
2014/03/16 Python
Python采用Django开发自己的博客系统
2020/09/29 Python
Python 模块EasyGui详细介绍
2017/02/19 Python
python win32 简单操作方法
2017/05/25 Python
浅谈Python实现贪心算法与活动安排问题
2017/12/19 Python
Python统计纯文本文件中英文单词出现个数的方法总结【测试可用】
2018/07/25 Python
python使用多进程的实例详解
2018/09/19 Python
详解多线程Django程序耗尽数据库连接的问题
2018/10/08 Python
Python过滤txt文件内重复内容的方法
2018/10/21 Python
详解Python logging调用Logger.info方法的处理过程
2019/02/12 Python
python绘制雷达图实例讲解
2021/01/03 Python
Python中正则表达式对单个字符,多个字符和匹配边界等使用
2021/01/27 Python
python读取excel数据并且画图的实现示例
2021/02/08 Python
澳洲国民品牌乡村路折扣店:Country Road & Trenery Outlet
2018/04/19 全球购物
单位人事专员介绍信
2014/01/11 职场文书
法学专业毕业生自荐信
2014/06/11 职场文书
降价通知函
2015/04/23 职场文书
国家助学贷款承诺书
2015/04/30 职场文书
预防艾滋病宣传活动总结
2015/05/09 职场文书
解决vue $http的get和post请求跨域问题
2021/06/07 Vue.js
Oracle表空间与权限的深入讲解
2021/11/17 Oracle