- html
<select id="select1">
<option value="">请选择省份</option>
<option value="广东省">广东省</option>
<option value="江苏省">江苏省</option>
<option value="浙江省">浙江省</option>
</select>
<select id="select2">
<option value="">请选择城市</option>
</select>
<select id="select3">
<option value="">请选择区县</option>
</select>
<button id="submitBtn">提交</button>
jq
$(function() {
// 当第一个下拉框的值改变时,获取对应的城市列表
$('#select1').change(function() {
var province = $(this).val();
$.ajax({
url: '/get_cities', // 后端处理该请求的路由
type: 'POST',
data: {'province': province},
dataType: 'json',
success: function(data) {
// 清空原有的城市列表
$('#select2').empty();
$('#select3').empty();
// 添加新的城市列表
$.each(data.cities, function(index, city) {
$('#select2').append('<option value="' + city + '">' + city + '</option>');
});
}
});
});
// 当第二个下拉框的值改变时,获取对应的区县列表
$('#select2').change(function() {
var province = $('#select1').val();
var city = $(this).val();
$.ajax({
url: '/get_counties', // 后端处理该请求的路由
type: 'POST',
data: {'province': province, 'city': city},
dataType: 'json',
success: function(data) {
// 清空原有的区县列表
$('#select3').empty();
// 添加新的区县列表
$.each(data.counties, function(index, county) {
$('#select3').append('<option value="' + county + '">' + county + '</option>');
});
}
});
});
// 点击提交按钮时,将用户选择的内容传递给后端
$('#submitBtn').click(function() {
var province = $('#select1').val();
var city = $('#select2').val();
var county = $('#select3').val();
$.ajax({
url: '/submit_selection', // 后端处理该请求的路由
type: 'POST',
data: {'province': province, 'city': city, 'county': county},
dataType: 'json',
success: function(data) {
// 处理后端返回的结果
}
});
});
});
python flask
from flask import Flask, jsonify, request
app = Flask(__name__)
@app.route('/get_cities', methods=['POST'])
def get_cities():
province = request.form.get('province')
# 根据省份获取对应的
============================
只选择第三个框,改变了就触发ajax。后端使用django的情况:
js
$(function() {
// 当第三个下拉框的值改变时,获取用户选择的内容并传递给后端
$('#select3').change(function() {
var province = $('#select1').val();
var city = $('#select2').val();
var county = $(this).val();
$.ajax({
url: '/submit_selection', // 后端处理该请求的路由
type: 'POST',
data: {'province': province, 'city': city, 'county': county},
dataType: 'json',
success: function(data) {
// 处理后端返回的结果
}
});
});
});
python django
from django.http import JsonResponse
def submit_selection(request):
province = request.POST.get('province')
city = request.POST.get('city')
county = request.POST.get('county')
# 根据省、市、县进行相应的处理
result = {'status': 'success', 'message': '请求已处理'}
return JsonResponse(result)
在这个示例代码中,我们使用了Django内置的JsonResponse方法来返回一个JSON格式的响应,其中包含了请求处理的结果信息。
需要注意的是,在使用Ajax发送请求时,我们指定了dataType为json,这样在接收到后端的响应时,jQuery会自动将响应解析为JSON格式的数据。同时,在Django视图函数中,我们使用了request.POST.get方法来获取POST请求中携带的参数。