您提到的 3 个常见的东西,品牌、型号、年份,将是 3 个输入值。当提供给服务器时,包含详细信息的对象将返回到调用页面。该页面将解析对象详细信息(使用 JavaScript),并更新 UI 以将它们显示给用户。
在 Django 方面,需要有接受 3 个输入并返回输出的设施。在客户端,需要有工具将 3 个输入传递给服务器,然后适当地解析服务器的响应。
Django 有一个 REST api 框架,可以很容易地添加上面提到的“api”——Piston。使用 Piston,您只需为该资源创建一个 URL,然后添加一个处理程序来处理它。 (您仍然需要浏览 Piston 文档,但这应该可以让您了解它的外观)
urls.py:
vehicle_details = Resource(handler=VehicleDetails)
url(r'^vehicle/(?<make>.*)/(?<model>.*)/(?<year\d{2,4}/(?P<emitter_format>[a-z]{1,4}), vehicle_details, name='vehicle_details'),
handler.py:
class VehicleDetails(BaseHandler):
methods_allowed = ('GET',)
model = Vehicles #whatever your Django vehicle model is
def read(self, request, *args, **kwargs):
# code to query the DB and select the options
# self.model.objects.filter()...
# Build a custom object or something to return
return custom_object
这只是设置 URL www.yoursite.com/vehicle/[make]/[model]/[year]/json 以返回 JSON 格式的自定义数据对象供 jquery 解析。
在客户端,您可以使用 jquery 设置事件(绑定),以便当所有 3 个下拉菜单都选择了一个值时,它将执行 $.get() 到 api URL。当它得到这个结果时,它会将它传递给 Jquery JSON 解析器,并将自定义对象作为 javascript 对象提供。然后可以使用该对象来填充更多下拉菜单。
(严重警告,我只是从头顶写了以下内容,所以它不是要复制和粘贴的。这只是为了大致的想法。)
<script type="text/javascript">
// On document load
$(function() {
$('#dropdown_make').bind('change', checkForValues());
$('#dropdown_model').bind('change', checkForValues());
$('#dropdown_year').bind('change', checkForValues());
});
function checkForValues() {
if ($('#dropdown_make').val() && $('#dropdown_model').val() && $('#dropdown_year').val())
updateOptions();
}
function updateOptions() {
url = '/vehicle/';
url += $('#dropdown_make').val() + '/';
url += $('#dropdown_model').val() + '/';
url += $('#dropdown_year').val() + '/';
url += 'json/';
$.get(url, function(){
// Custom data object will be returned here
})
}
</script>