vlambda博客
学习文章列表

Ajax实战笔记--城市级联操作

1. 项目架构搭建

  • 1.1 创建项目tpdemo,创建应用myapp

      # 创建项目框架tpdemo
      $ django-admin startproject tpdemo

      $ cd tpdemo

      # 在项目中创建一个myapp应用
      $ python 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 Django使用MySQL数据库需要加载 MySQLdb模块，需要安装 mysqlclient，若已经安装请略过。

   pip install  mysqlclient

  • 1.4 编写项目主路由urls配置,配置对myapp应用路由的访问连接配置: tpdemo/tpdemo/urls.py


from django.urls import include,path
from django.contrib import admin

urlpatterns = [
    path('admin/', admin.site.urls),
    path('', include('myapp.urls')),
]

  • 1.5 配置当前应用myapp的路由配置

  • 在myapp应用目录下创建一个路由文件urls.py文件，注意此文件编码为utf-8（建议复制一个）。

  • 编辑应用中的路由配置文件：tpdemo/myapp/urls.py, 内容如下：


from django.urls import path

from . import views

urlpatterns = [
    path('', 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]# python manage.py runserver 0.0.0.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

...
    # 城市级联操作
    path('showdistrict/', views.showdistrict, name='showdistrict'), #加载网页
    path('district/<int:upid>', 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>


推荐阅读

[5.05] 暗喻幻想港中35周年限定版1.03+DLC+金手指+王中王存档 [5.05] 暗喻幻想港中35周年限定版1.03+DLC+金手指+王中王存档
初识WebAssembly：灵活、可移植、高性能 初识WebAssembly：灵活、可移植、高性能

相关文章