首页 > 学院 > 开发设计 > 正文

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

2019-11-10 18:32:52
字体:
来源:转载
供稿:网友

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, urlfrom django.contrib import adminadmin.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的路由配置尽量放置在最后一行。


发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表