你所提到的三个常见项,制造商、型号和年份将是三个输入值。当这些值被传递给服务器时,会返回一个包含详细信息的对象到调用页面。该页面将使用JavaScript解析对象详细信息,并更新UI以将其显示给用户。
从Django方面来看,需要有能力接收三个输入并返回输出的设施。从客户端方面来看,需要有能力将三个输入传递给服务器,然后适当地解析服务器的响应。
对于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">
$(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(){
})
}
</script>