Как я могу отображать записи из базы данных на основе события onchange, используя Ajax / JavaScript?

Question

Я хочу отобразить поле выбора на основе выбора переключателя. Есть 2 переключателя с названиями «Новый проект» и «Предыдущий проект». Если пользователь выберет предыдущий проект, то выпадающий список будет отображаться с использованием JavaScript.

В этом комбинированном окне пользователь должен выбрать идентификатор своего предыдущего проекта, и на основании этого идентификатора проекта некоторые данные заполняются в текстовые поля и комбинированные списки с помощью JavaScript или Ajax.

Какое решение?

Answer 1

1. index.html

На странице загружается файл suggest.js, в котором описана функция searchSuggest. В этом случае обработчиком событий клавиатуры является onkeyup, который проверяет каждую букву, вводимую в текстовое поле. Элемент div также создается для обработки данных, переданных JavaScript.

2. suggest.js

    var searchReq = getXmlHttpRequestObject();

This above line creates a httpRequest object for passing values.

    function searchSuggest() {
    if (searchReq.readyState == 4 || searchReq.readyState == 0) {
    var str = escape(document.getElementById(’PoNumber’).value);
    searchReq.open(”GET”, ’searchSuggest.php?search=’ + str, true);
    searchReq.onreadystatechange = handleSearchSuggest;
    searchReq.send(null);
    }

}

str получает значение из текстового поля. Каждое слово, введенное в текстовое поле, передается этой переменной, которая является частью функции. Позже значения передаются в файл searchSuggest.php, который выполняет всю обработку.

var curLeft=0;
if (str1.offsetParent){
while (str1.offsetParent){
curLeft += str1.offsetLeft;
str1 = str1.offsetParent;
}
}

curLeft определяет текущую левую позицию, которая инициализируется в 0, как начало. offsetparent возвращает ссылку на объект, который является ближайшим (ближайшим в иерархии содержания) позиционирующим элементом. offsetParent возвращает значение null, если для элемента style.display установлено значение «none». Поскольку элемент может находиться во многих иерархиях, мы зацикливаемся вместе с каждой из них, чтобы получить значение.

ss.setAttribute(’style’,'position:absolute;top:’+curTop+’;left:’+curLeft+’;width:150;z-index:1;padding:5px;border: 1px solid #000000; overflow:auto; height:105; background-color:#F5F5FF;’);

Здесь ss представляет идентификатор документа слоя. В приведенной выше строке устанавливается свойство style тега div. position всегда должно быть absolute, иначе слой не будет сформирован. Нижние элементы будут сдвинуты вниз для размещения значений, которые извлекаются из базы данных. top, left и т. Д. Также отображаются для раскрытия (слой div). overflow также устанавливается для эффекта прокрутки в теге div, когда он пересекает определенный height.

Остальные элементы в файле должны быть понятны, поскольку они объявляют переменные и функции.

3. database.php

   function db_connect ($ server = ‘localhost’, $ username = ‘root’, $ password = ‘enigma’, $ database = ’offer’’, $ link =‘ db_link ’)

Пожалуйста, измените server, username, password и database имя, соответствующее вашему.

4. searchSuggest.php Самоочевидный файл. Это извлекает данные из базы данных и передает выходные данные в функцию searchSuggest в offer.js.

Answer 2

Вам необходимо использовать функцию post из jQuery (http://api.jquery.com/jQuery.post/).. Создать новый файл PHP, в который вы загружаете свои данные, и создать функцию JavaScript для заполнения текстовых полей возвращаемыми данными.

HTML:

<input type="text" name="srcTextbox" value="test" />
<input type="text" 
       name="destTextbox" 
       onchange="$.post('get_values_from_db.php', { id : $('srcTextbox').value } , function(data) { $('destTextbox').value = data; });" />

PHP (get_values_from_db.php):

<?php
    $id = $_POST['id'];
    //Get data here with the id from srcTextbox.
    echo $data;
?>

Answer 3

Я предлагаю вам начать изучать jQuery. Взгляните на jQuery для серии видео для начинающих

В этом руководстве вы быстро и практично узнаете, как можно легко создавать запросы AJAX с помощью jQuery.