③. Ajax应用实战
优质
小牛编辑
133浏览
2023-12-01
1. 项目架构搭建
1.1 创建项目tpdemo,创建应用myapp
# 创建项目框架tpdemo $ django-admin startproject tpdemo $ cd tpdemo # 在项目中创建一个myapp应用 $ python3 manage.py startapp myapp # 创建模板目录 $ mkdir templates $ mkdir templates/myapp $ cd .. $ tree tpdemo tpdemo ├── tpdemo │ ├── __init__.py │ ├── settings.py │ ├── urls.py │ └── wsgi.py ├── manage.py ├── myapp │ ├── admin.py │ ├── apps.py │ ├── __init__.py │ ├── models.py │ ├── tests.py │ └── views.py └── templates └── mytest- 1.2 编辑tpdemo/tpdemo/settings.py文件，配置数据库连接
...
#配置自己的服务器IP地址
ALLOWED_HOSTS = ['*']
...
#添加自己应用
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'myapp',
]
...
# 配置模板路径信息
TEMPLATES = [
{
'BACKEND': 'django.template.backends.django.DjangoTemplates',
'DIRS': [os.path.join(BASE_DIR,'templates')],
'APP_DIRS': True,
'OPTIONS': {
'context_processors': [
'django.template.context_processors.debug',
'django.template.context_processors.request',
'django.contrib.auth.context_processors.auth',
'django.contrib.messages.context_processors.messages',
],
},
},
]
...
# 数据库连接配置
DATABASES = {
'default': {
'ENGINE': 'django.db.backends.mysql',
'NAME': 'mytest',
'USER': 'root',
'PASSWORD': '',
'HOST': 'localhost',
'PORT': '3306',
}
...
- 1.3 编辑
tpdemo/tpdemo/__init__.py文件，添加Pymysql的数据库操作支持
import pymysql
pymysql.install_as_MySQLdb()
- 1.4 编写项目主路由urls配置,配置对myapp应用路由的访问连接配置: tpdemo/tpdemo/urls.py
from django.conf.urls import include,url
from django.contrib import admin
urlpatterns = [
url(r'^admin/', admin.site.urls),
url(r'^', include('myapp.urls')),
]
1.5 配置当前应用myapp的路由配置
在myapp应用目录下创建一个路由文件urls.py文件，注意此文件编码为utf-8（建议复制一个）。
编辑应用中的路由配置文件：tpdemo/myapp/urls.py, 内容如下：
from django.conf.urls import url
from . import views
urlpatterns = [
url(r'^$', views.index, name="index"),
]
- 1.6 编写视图tpdemo/myapp/views.py
from django.shortcuts import render
from django.http import HttpResponse
# 网站首页
def index(request):
return render(request,'myapp/index.html')
- 1.7 定义模板并编写模板 tpdemo/templates/myapp/index.html
<!DOCTYPE html>
<html lang="cn">
<head>
<meta charset="UTF-8">
<title>Django框架案例</title>
</head>
<body>
<h2>Django框架案例</h2>
<h4><a href="#">1. Ajax实战笔记--城市级联操作</a></h4>
</body>
</html>
- 1.8 启动服务，通过浏览器测试效果
[root@localhost tpdemo]# ls
tpdemo manage.py myapp templates
[root@localhost tpdemo]# python3 manage.py runserver 0:8000
- 打开浏览器输入网址：http:localhost:8000
2. 开发《城市级联信息操作》
2.1 将提前准备好的district.sql信息导入到mydb数据库中
在mydb数据库中存在一个district（城市区县信息表）
2.2 编写model类：打开tpdemo/myapp/models.py文件
from django.db import models
# 自定义城市区县信息model类
class District(models.Model):
name = models.CharField(max_length=255)
upid = models.IntegerField()
class Meta:
db_table = "district" # 指定真实表名
- 2.3 编写子路由文件：tpdemo/myapp/urls.py
...
# 城市级联操作
url(r'^showdistrict$', views.showdistrict, name='showdistrict'), #加载网页
url(r'^district/([0-9]+)$', views.district, name='district'), #Ajax加载城市信息
...
- 2.4 编写视图文件：tpdemo/myapp/views.py
from django.http import HttpResponse,JsonResponse
from myapp.models import District
...
# 加载城市级联信息操作模板
def showdistrict(request):
return render(request,"myapp/district.html")
# 加载对应的城市信息，并json格式ajax方式响应
def district(request,upid):
dlist = District.objects.filter(upid=upid)
list = []
for ob in dlist:
list.append({'id':ob.id,'name':ob.name})
return JsonResponse({'data':list})
...
启动服务测试：url：http://localhost:8000/district/0 加载一级城市信息
2.5 开发网页前端的准备：首先启用静态资源目录
- 在项目的根目录下创建一个静态资源目录：static 路径：tpdemo/static
- 并在此目录下创建一个js目录。然后将jquery文件：jquery-1.8.2.min.js放到此目录中 具体位置：tpdemo/static/js/jquery-1.8.2.min.js
- 编辑tpdemo/tpdemo/settings.py配置文件，在最后加入代码：(配置静态资源目录)
...
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR,'static'),
]
- 2.6 配置访问url：编辑tpdemo/templates/myapp/index.html
...
<h4><a href="{% url 'showdistrict' %}">1. Ajax实战笔记--城市级联操作</a></h4>
...
- 2.7 定义并编写模板文件：tpdemo/templates/myapp/district.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Ajax实战--城市级联操作</title>
<script type="text/javascript" src="/static/js/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
//编写js代码
$(function(){
$.ajax({
type:'get',
url:"{% url 'district' 0 %}",
dataType:'json',
async: false,
success:function(res){
list = res.data;
//遍历响应的城市信息
for(var i=0;i<list.length;i++){
$("#cid").append("<option value='"+list[i].id+"'>"+list[i].name+"</option>");
}
},
});
//获取最后一个下拉框并添加选中事件
$("select").live('change',function(){
//获取选中的id号
var id = $(this).val();
$(this).nextAll().remove();
$.ajax({
url: "/district/"+id,
type: 'get',
data: {},
dataType:'json',
success:function(res){
if(res.data.length<1)
return;
var data = res.data;
var select = $("<select></select>")
for(var i=0;i<data.length;i++){
$('<option value="'+data[i].id+'">'+data[i].name+'</option>').appendTo(select)
//$('select:last').append('<option value="'+data[i].id+'">'+data[i].name+'</option>');
}
$("select:last").after(select);
}
});
});
})
</script>
</head>
<body>
<h2>Ajax实战笔记--城市级联操作</h2>
<select id="cid">
<option>-请选择-</option>
</select>
</body>
</html>