django之使用jquery完成ajax
使用Ajax
- 使用视图通过上下文向模板中传递数据,需要先加载完成模板的静态页面,再执行模型代码,生成最张的html,返回给浏览器,这个过程将页面与数据集成到了一起,扩展性差
- 改进方案:通过ajax的方式获取数据,通过dom操作将数据呈现到界面上
- 推荐使用框架的ajax相关方法,不要使用XMLHttpRequest对象,因为操作麻烦且不容易查错
- jquery框架中提供了$.ajax、$.get、$.post方法,用于进行异步交互
- 由于csrf的约束,推荐使用$.get
- 示例:实现省市区的选择
- 最终实现效果如图:
引入js文件
- js文件属于静态文件,创建目录结构如图:
修改settings.py关于静态文件的设置
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
在models.py中定义模型
class AreaInfo(models.Model):
aid = models.IntegerField(primary_key=True)
atitle = models.CharField(max_length=20)
aPArea = models.ForeignKey('AreaInfo', null=True)
生成迁移
python manage.py makemigrations
python manage.py migrate
通过workbench向表中填充示例数据
- 参见“省市区.sql”
- 注意将表的名称完成替换
在views.py中编写视图
- index用于展示页面
- getArea1用于返回省级数据
- getArea2用于根据省、市编号返回市、区信息,格式都为字典对象
from django.shortcuts import render
from django.http import JsonResponse
from models import AreaInfo def index(request):
return render(request, 'ct1/index.html') def getArea1(request):
list = AreaInfo.objects.filter(aPArea__isnull=True)
list2 = []
for a in list:
list2.append([a.aid, a.atitle])
return JsonResponse({'data': list2}) def getArea2(request, pid):
list = AreaInfo.objects.filter(aPArea_id=pid)
list2 = []
for a in list:
list2.append({'id': a.aid, 'title': a.atitle})
return JsonResponse({'data': list2})
在urls.py中配置urlconf
from django.conf.urls import url
from . import views urlpatterns = [
url(r'^$', views.index),
url(r'^area1/$', views.getArea1),
url(r'^([0-9]+)/$', views.getArea2),
]
主urls.py中包含此应用的url
from django.conf.urls import include, url
from django.contrib import admin urlpatterns = [
url(r'^', include('ct1.urls', namespace='ct1')),
url(r'^admin/', include(admin.site.urls)),
]
定义模板index.html
- 在项目中的目录结构如图:
- 修改settings.py的TEMPLATES项,设置DIRS值
'DIRS': [os.path.join(BASE_DIR, 'templates')],
- 定义模板文件:包含三个select标签,分别存放省市区的信息
<!DOCTYPE html>
<html>
<head>
<title>省市区列表</title>
</head>
<body>
<select id="pro">
<option value="">请选择省</option>
</select>
<select id="city">
<option value="">请选择市</option>
</select>
<select id="dis">
<option value="">请选择区县</option>
</select>
</body>
</html>
在模板中引入jquery文件
<script type="text/javascript" src="static/ct1/js/jquery-1.12.4.min.js"></script>
编写js代码
- 绑定change事件
- 发出异步请求
- 使用dom添加元素
<script type="text/javascript">
$(function(){ $.get('area1/',function(dic) {
pro=$('#pro')
$.each(dic.data,function(index,item){
pro.append('<option value='+item[0]+'>'+item[1]+'</option>');
})
}); $('#pro').change(function(){
$.post($(this).val()+'/',function(dic){
city=$('#city');
city.empty().append('<option value="">请选择市</option>');
$.each(dic.data,function(index,item){
city.append('<option value='+item.id+'>'+item.title+'</option>');
})
});
}); $('#city').change(function(){
$.post($(this).val()+'/',function(dic){
dis=$('#dis');
dis.empty().append('<option value="">请选择区县</option>');
$.each(dic.data,function(index,item){
dis.append('<option value='+item.id+'>'+item.title+'</option>');
})
})
}); });
</script>
django之使用jquery完成ajax的更多相关文章
- Python Django 之 基于JQUERY的AJAX 登录页面
一.基于Jquery的Ajax的实现 1.url 2.vews 3.templates
- Django(二十)下拉列表-省市联动实例:jquery的ajax处理前端
一.知识点 1.jquery的ajax请求写法 <script src="/static/js/jquery-1.12.4.min.js"></script> ...
- Django(十九)Ajax全套
参考博客:http://www.cnblogs.com/wupeiqi/articles/5703697.html 提交: - Form - Ajax 一.Ajax,偷偷向后台发请求 - XMLHtt ...
- python自动化开发-[第十八天]-django的ORM补充与ajax,分页器
今日概要: 1.ORM一对多,多对多 2.正向查询,反向查询 3.聚合查询与分组查询 4.F查询和Q查询 5.ajax 6.分页器 一.ORM补充: django在终端打印sql语句设置: LOGGI ...
- 前端 ---- jQuery的ajax
14-jQuery的ajax 什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascript and XML) 简言之,在不重载整个网页的情况下, ...
- python 全栈开发,Day56(jQuery的ajax)
昨日内容回顾 事件流: 1.事件捕获 从最外层到最内层 2.事件目标阶段 3.事件冒泡 从最内层到最外层 每个事件都会事件对象 event 属性和方法 属性: event.target 目标节点(冒泡 ...
- 一、Django前后端交互之Ajax和跨域问题
一.Ajax介绍 1.概述 AJAX 是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术.AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Jav ...
- jquery使用ajax
前端jquery使用ajax的几种方法: $.ajax使用: $.ajax({ url:'/test_ajax', #发送url data:{a:,b:,csrfmiddlewaretoken:'{{ ...
- 前端-jQuery的ajax方法
https://www.cnblogs.com/majj/p/9134922.html 0.什么是ajax AJAX = 异步的javascript和XML(Asynchronous Javascri ...
随机推荐
- CF 382C
http://codeforces.com/problemset/problem/382/C 读完题立刻知道怎么做,然后分类讨论到吐血,写挂了,巨蠢 #include <iostream> ...
- C++语言的url encode 和decode
std::string UrlEncode(const std::string& szToEncode) { std::string src = szToEncode; char hex[] ...
- Mac 配置前端基本环境
一,sublime 下载一个版本,替换packages,要想shift command p管用,得在sublime里面control -,然后把 import urllib.request,os,h ...
- stark组件03
优化代码 1:页面的增删改查url反转的封装到类里:ModelSatrk # 编辑页面的url def get_edit_url(self,obj): edit_url = reverse(" ...
- Ubuntu网络代理问题
问题描述 新开机的电脑,不开lantern就上不了网.很气. 解决过程 首先当然是寻求解决方案了.未果 然后就是妥协,每次先开一次lantern.(其实也不是很麻烦是吧,哎,是的是的) 今天早晨友人来 ...
- UDP示例
android学习笔记18--------------UDP示例 分类: android2011-11-10 10:07 848人阅读 评论(0) 收藏 举报 androidbufferexcepti ...
- HDU - 2973:YAPTCHA (威尔逊定理)
The math department has been having problems lately. Due to immense amount of unsolicited automated ...
- three.js中点生成矩阵方法
正常情况用threejs 点生成matrix4,方法为: 例如生成饶Y轴旋转的矩阵我们要的结果为: [cos, 0, -sin, 0, 0, 1, 0, 0, sin, 0, cos, ...
- JSON和JSONP简单总结
jsonp和json的区别,原理,在jquery中的使用 http://www.cnblogs.com/dowinning/archive/2012/04/19/json-jsonp-jquery.h ...
- BZOJ4150 AMPPZ2014 The Staging 【线段树】*
BZOJ4150 AMPPZ2014 The Staging Description 在舞台上有n个枪手,第i个枪手瞄准了第p[i]个枪手,将于第u[i]秒开枪.一个枪手如果成功开枪, 那么被瞄准的枪 ...