VPF::загрузка данных без перегрузки

axotnik88

Дата 23.4.2010, 17:04 (ссылка)

(нет голосов)

Загрузка ...

Новичок

Профиль
Группа: Участник
Сообщений: 22
Регистрация: 31.3.2009

Репутация: нет
Всего: нет

Доброго времени суток! Такой вопрос: есть страничка с формой, на которой два selecta и одно текстовое поле. При переходе на страницу из базы в первый select загружаются данные из базы данных. Вопрос: Как мне сделать, что при выборе значения в первом selecte автоматически загружались данные из базы данных во второй select, а при выборе в втором selecte загружались данные из базы в текстовое поле.
Логически я понимаю как это сделать - с помощью ajax. Если кто может помогите кодом. Заранее благодарю.

bars80080

Дата 23.4.2010, 19:09 (ссылка)

(нет голосов)

Загрузка ...

прапор творюет

Награды: 1

Профиль
Группа: Завсегдатай
Сообщений: 12022
Регистрация: 5.12.2007
Где: Königsberg

Репутация: 44
Всего: 315

вот смотри, пример:

код на странице

Код


<h1>терминалы sprintnet</h1>
    <style>
#listTerminal { height: 300px; overflow-y: scroll; background: #fafafa; padding: 10px; }
#listTerminal img { display: block; margin: 120px auto 0px; }
</style>
<script type="text/javascript">
var urlTerminalList = 'http://www.some.ru/';
var loaderImage = '<img src="http://www.some.ru/loading.gif" />';
var textNoRegion = 'не выбран регион';
var textNoCity = 'не выбран город/район';
var textNoCityHere = 'нет городов в этом регионе';
var textNoTerminal = 'нет терминалов в этом городе/районе';
function selCity(s) {
    var v = s.value;
    var cit = document.getElementById('listCity');
    var ter = document.getElementById('listTerminal');
    if(!cit || !ter) { return false; }
    cit.options.length = 0;
    if(!v) {
        cit.options[0] = new Option(textNoRegion, 0);
        ter.innerHTML = textNoCity; return false;
    }
    var q = 'region=' + v;
    ajaxQuery(urlTerminalList, q, 0, setCity, 1);
    ter.innerHTML = loaderImage; return true;
}
function setCity(tx) {
    var cit = document.getElementById('listCity');
    var ter = document.getElementById('listTerminal');
    if(!cit || !ter) { return false; }
    cit.options.length = 0;
    if(!tx) {
        cit.options[0] = new Option(textNoCityHere, 0);
        ter.innerHTML = textNoCity; return false;
    }
    var arr = new Array(); cit.options[0] = new Option('');
    var a = tx.split('\n');
    var i = 0, b, ac = a.length;
    for(i = 0; i < ac; i++) {
        b = a[i].split('|');
        if(!b[1]) { continue; }
        cit.options[i + 1] = new Option(b[1], b[0]);
    }
    //cit.options = &arr;
    ter.innerHTML = textNoCity; return true;
}
function selListTerminal(s) {
    var v = s.value;
    var ter = document.getElementById('listTerminal');
    if(!ter) { return false; }
    if(!v) { ter.innerHTML = textNoCity; return false; }
    var q = 'city=' + v;
    ajaxQuery(urlTerminalList, q, 0, setListTerminal, 1);
    ter.innerHTML = loaderImage; return true;
}
function setListTerminal(tx) {
    var ter = document.getElementById('listTerminal');
    if(!ter) { return false; }
    if(!tx) { ter.innerHTML = textNoTerminal; return false; }
    ter.innerHTML = tx; return true;
}
</script>
<h5>Расположение терминалов оплаты Sprintnet</h5>
<p>Выберите регион:</p>
<p><select name=""  onchange="selCity(this);">
<option value="0"> </option><option value="51" >Архангельская обл</option>

<option value="52" >Башкортостан Респ.</option>
<option value="53" >Владимирская обл</option>
<option value="54" >Воронежская обл</option>
<option value="55" >Калининградская обл</option>
<option value="56" >Костромская обл</option>
<option value="57" >Краснодарский край</option>
<option value="58" >Ленинградская обл</option>
<option value="59" >Липецкая обл</option>
<option value="60" >Марий Эл Респ.</option>

<option value="61" >Москва</option>
<option value="62" >Московская обл</option>
<option value="63" >Нижегородская обл</option>
<option value="64" >Новгородская обл</option>
<option value="65" >Орловская обл</option>
<option value="66" >Псковская обл</option>
<option value="67" >Ростовская обл</option>
<option value="68" >Рязанская обл</option>
<option value="69" >Санкт-Петербург</option>

<option value="70" >Татарстан Респ.</option>
<option value="71" >Тверская обл</option>
<option value="72" >Ульяновская обл</option>
<option value="73" >Челябинская обл</option>
<option value="74" >Ярославская обл</option>
</select>
</p>
<p>Выберите город/район:</p>
<p><select id="listCity" onchange="selListTerminal(this);"><option>не выбран регион</option></select></p>
<p>Список терминалов:</p>

<div id="listTerminal">не выбран город/район</div>

плюс ещё пара функций:

Код


function ajaxQuery(u, q, m, f, c) {
    if(!u) { u = ''; } if(!q) { q = ''; } if(!f) { f = 0; }
    var v = u.indexOf('?'), ss = '', rq;
    if(v < 0) { u += '?'; }
    if(!c) { var d = new Date(); var dp = '' + d.getDate() + d.getHours() + d.getMinutes() + d.getSeconds();
        u += '&dpar=' + dp; }
    if(!m) { m = 'GET'; u += '&' + q; } else { m = 'POST'; ss = q; }
    if(window.XMLHttpRequest) {
        try { rq = new XMLHttpRequest(); } 
        catch (e){}} 
    else if(window.ActiveXObject) {
        try { rq = new ActiveXObject('Msxml2.XMLHTTP'); } 
        catch (e){ rq = new ActiveXObject('Microsoft.XMLHTTP'); }}
    rq.onreadystatechange = function() { 
        if(rq.readyState == 4) { ajaxReturn(rq.responseText, f); }}     
    rq.open(m, u, true);
    rq.send(ss); 
}
function ajaxReturn(a, b) {
    if(typeof(b) == "function") { b(a); return true; }
    return false;
}

Добавлено @ 19:13
да, при обращении к серверу посредством аякса, серверный скрипт производит выборку по входящим данным и отдаёт нужный текст

Это сообщение отредактировал(а) bars80080 - 23.4.2010, 19:14

0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема \| JavaScript: для новичков \| Следующая тема »