这种怎么定位,基础定位方法和js定位方法,包括二级定位都尝试过了,
实现地区三级联动可以使用Python的Flask框架和jQuery库,具体步骤如下:
1.准备数据
在数据库中创建3张表,分别存储省份、城市和区县的数据。
省份表的结构如下:
```sql
CREATE TABLE province (
id INT PRIMARY KEY,
name VARCHAR(20)
);
城市表的结构如下:
CREATE TABLE city (
id INT PRIMARY KEY,
name VARCHAR(20),
province_id INT,
FOREIGN KEY (province_id) REFERENCES province(id)
);
区县表的结构如下:
CREATE TABLE district (
id INT PRIMARY KEY,
name VARCHAR(20),
city_id INT,
FOREIGN KEY (city_id) REFERENCES city(id)
);
向这些表中插入相应数据,可以通过爬虫或手动录入等方式实现。这里以省份表为例,插入一些数据:
INSERT INTO province (id, name) VALUES (110000, '北京市');
INSERT INTO province (id, name) VALUES (120000, '天津市');
INSERT INTO province (id, name) VALUES (130000, '河北省');
...
2.创建Flask应用
在Python中使用Flask框架,创建一个简单的Web应用:
from flask import Flask, render_template
app = Flask(__name__)
@app.route('/')
def index():
return render_template('index.html')
其中,index()
函数返回渲染后的HTML模板,该模板包含三个下拉列表框,显示省份、城市和区县的信息。通过render_template()
函数,将HTML模板渲染后返回给客户端。
3.实现AJAX请求
为了实现三级联动,我们需要使用jQuery库向服务器发送AJAX请求,获取相应数据并更新页面。在HTML模板中添加如下代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>地区三级联动</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
</head>
<body>
<label>省份:</label>
<select id="province">
<option value="">请选择省份</option>
</select>
<label>城市:</label>
<select id="city">
<option value="">请选择城市</option>
</select>
<label>区县:</label>
<select id="district">
<option value="">请选择区县</option>
</select>
<script type="text/javascript">
$(function() {
// 绑定省份下拉列表框的change事件
$('#province').change(function() {
var provinceId = $(this).val();
if (provinceId == '') {
return;
}
// 发送AJAX请求,获取城市数据
$.getJSON('/cities', {province_id: provinceId}, function(data) {
$('#city').empty().append('<option value="">请选择城市</option>');
for (var i = 0; i < data.length; i++) {
var item = data[i];
$('#city').append('<option value="' + item.id + '">' + item.name + '</option>');
}
});
});
// 绑定城市下拉列表框的change事件
$('#city').change(function() {
var cityId = $(this).val();
if (cityId == '') {
return;
}
// 发送AJAX请求,获取区县数据
$.getJSON('/districts', {city_id: cityId}, function(data) {
$('#district').empty().append('<option value="">请选择区县</option>');
for (var i = 0; i < data.length; i++) {
var item = data[i];
$('#district').append('<option value="' + item.id + '">' + item.name + '</option>');
}
});
});
// 发送AJAX请求,获取省份数据
$.getJSON('/provinces', function(data) {
$('#province').empty().append('<option value="">请选择省份</option>');
for (var i = 0; i < data.length; i++) {
var item = data[i];
$('#province').append('<option value="' + item.id + '">' + item.name + '</option>');
}
});
});
</script>
</body>
</html>
在上面的代码中,我们使用了jQuery库向服务器发送3个AJAX请求:
/provinces
:获取所有省份数据;/cities
:根据省份ID获取对应城市数据;/districts
:根据城市ID获取对应区县数据。我们在选择省份和城市时分别绑定了change
事件,当选择发生变化时,就会发送相应的AJAX请求,获取对应的城市或区县数据,并将其填充到下拉列表框中。
4.实现服务器API
接下来,我们需要实现服务器端的API,用于响应AJAX请求并返回相应的数据。在之前创建的Flask应用中添加如下代码:
import pymysql
from flask import jsonify, request
# 数据库配置信息
db_config = {
'host': 'localhost',
'port': 3306,
'user': 'root',
'password': '123456',
'database': 'test'
}
@app.route('/provinces')
def get_provinces():
# 查询所有省份数据
conn = pymysql.connect(**db_config)
cursor = conn.cursor()
cursor.execute('SELECT id, name FROM province')
data = cursor.fetchall()
cursor.close()
conn.close()
# 返回省份数据
return jsonify(data)
@app.route('/cities')
def get_cities():
# 查询指定省份的城市数据
province_id = request.args.get('province_id')
if not province_id:
return jsonify([])
conn = pymysql.connect(**db_config)
cursor = conn.cursor()
cursor.execute('SELECT id, name FROM city WHERE province_id=%s', (province_id,))
data = cursor.fetchall()
cursor.close()
conn.close()
# 返回城市数据
return jsonify(data)
@app.route('/districts')
def get_districts():
# 查询指定城市的区县数据
city_id = request.args.get('city_id')
if not city_id:
return jsonify([])
conn = pymysql.connect(**db_config)
cursor = conn.cursor()
cursor.execute('SELECT id, name FROM district WHERE city_id=%s', (city_id,))
data = cursor.fetchall()
cursor.close()
conn.close()
# 返回区县数据
return jsonify(data)
在上面的代码中,我们使用了pymysql
库连接到MySQL数据库,并定义了3个API函数:
/provinces
:返回所有省份数据;/cities
:根据省份ID返回对应城市数据;/districts
:根据城市ID返回对应区县数据。在这些API函数中,我们使用cursor.execute()
方法执行SQL查询语句,然后使用cursor.fetchall()
方法获取查询结果,并将其封装成JSON格式进行返回。最后,不要忘记关闭数据库连接。
5.运行程序
将上述代码写入文件中,并保存为app.py
文件,然后在终端中运行如下命令,启动程序:
$ FLASK_APP=app.py flask run
打开浏览器,访问http://localhost:5000
,即可看到地区三级联动页面,选择相应的省份、城市和区县,下拉列表框会根据选择的项动态更新。
```