index.html
| City: | |
| Street: | |
| Build: |
При выборе города срабатывает функция getStreet, которая генерирует код списка улиц. Добавим ниже javascript:
Теперь проделаем то же само для выбора улицы, добавим функции:
function getBuild(sel) {
//If our XmlHttpRequest object is not in the middle of a request, start the new asyncronous call.
var value = sel.options[sel.selectedIndex].value;
if (receiveReq.readyState == 4 || receiveReq.readyState == 0) {
//Setup the connection as a GET call to SayHello.html.
//True explicity sets the request to asyncronous (default).
receiveReq.open("GET", "/ajax/get_ajax_build?street="+value, true);
//Set the function that will be called when the XmlHttpRequest objects state changes.
receiveReq.onreadystatechange = handleBuild;
//Make the actual request.
receiveReq.send(null);
}
}
//Called every time our XmlHttpRequest objects state changes.
function handleBuild() {
//Check to see if the XmlHttpRequests state is finished.
if (receiveReq.readyState == 4) {
//Set the contents of our span element to the result of the asyncronous call.
//document.getElementById('span_result').innerHTML = receiveReq.responseText;
//alert(receiveReq.responseText);
document.getElementById('buildAJAX').innerHTML = receiveReq.responseText;
summAddress();
}
}
Все должно работать :) Осталось написать функции на стороне сервера, для AJAX запросов. Тут их две get_ajax_build и get_ajax_street. Обе возвращают обычный HTML списсок формата:
У меня на питоне они выглядят так:
def get_ajax_street(self):
city = request.GET['city']
streets = s.query(Streets).filter(Streets.city==city).\
order_by(Streets.name).all()
html = ''
for street in streets:
html += "\n" % (street.name or 'No name')
if html:
html = ""
return html
def get_ajax_build(self):
street = request.GET['street']
builds = s.query(Builds).filter(Builds.streetid==street).\
order_by(Builds.building).all()
html = ''
for build in builds:
html += "\n" % (build.building or 'No name')
if html:
html = ""
return html
Выглядит это как-то так:
Думаю понятно, что функции должны быть доступны по адресам /ajax/get_ajax_street и /ajax/get_ajax_build соответственно.
Пользуйтесь )
