Доброго времени суток!
В базе данных есть некая таблица, а так же две страницы (код - ниже).
Что есть сейчас:
1 - Кнопка "Text" добавляет в .Container текст, который в данный момент выбран в select'е.
2 - Кнопка "Test" добавляет три преобпределённых значения (в теге sсript)в select, затем обращается при помощи XHR в js к файлу test.php. Test.php обращается к базе за списком значений первого столбца (рандомны, уникальны), отдаёт результат обратно и добавляет ответ в .Container без перезагрузки страницы (при помощи innerHTML).
3 - Кнопка "^W" очищает .Container.
Что нужно:
При нажатии кнопки "Test" скрипт должен добавлять в список select значения, полученные из базы.
Т.е., если select был вначале таким:["text1", "text2", "text3"], то после нажатия должен стать таким:["a","b","c","d","e"].
Как?
Спасибо.
Таблица в mysql выглядит так (ключ - первый столбец):
+-------+
| a | 1 |
| b | 2 |
| c | 3 |
| d | 4 |
| e | 5 |
+-------+
index.php (посмотреть исходник и скачать -
http://cl.ly/FqFZ):
<!DOCTYPE html>
<html>
<head>
<title>Test</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<sсriрt>
function Test() {
Container = document.getElementById('Container');
Selector = document.getElementById('Selector');
Selector.options[0] = new Option('text0','value0');
Selector.options[1] = new Option('text1','value1',false,true);
Selector.options[2] = new Option('text2','value2');
req = new XMLHttpRequest();
req.open('POST','/test/test.php',true);
req.onreadystatechange = processRequestChange;
req.send(null);
function processRequestChange() {
if (req.readyState == 4) {
if (req.status == 200) {
Container.innerHTML = req.responseText;
}
} else {
Container.innerHTML = 'Error!<br/>'+'req.readyState: '+req.readyState+'<br/>'+'req.statusText: '+req.statusText+'<br/>'+'req.status: '+req.status;
}
}
Container.innerHTML = req.responseText;
}
function Text() {
Container.innerHTML = Selector.options[Selector.selectedIndex].text;
}
function Clear() {
Container.innerHTML = '';
}
</sсriрt>
<style>
html{
background:#e7f6fd;
padding:0;
margin:0;
}
</style>
</head>
<body>
<select id="Selector">
<option>WUT?!</option>
</select>
<span><br/>What do you want to see?</span>
<input type="button" value="Text" onclick="Text()"/>
<input type="button" value="Test" onclick="Test()"/>
<input type="button" value="^W" onclick="Clear()"/>
<div id="Container"></div>
</body>
</html>
test.php (посмотреть исходник и скачать -
http://cl.ly/Fq8G):
<?php
header("Content-type: text/html; charset=utf-8");
header("Cache-Control: no-store, no-cache, must-revalidate");
header("Cache-Control: post-check=0, pre-check=0", false);
$db_username = 'username';
$db_password = 'password';
$db_host = 'host';
$db_database_name = 'database';
$connection = mysql_connect($db_host, $db_username, $db_password);
$db_select = mysql_select_db($db_database_name);
$query = "SELECT * FROM projects";
$result = mysql_query($query);
echo $result;
?>
Примечание:
serg54 (serg lachinov), спасибо, теперь понятно хотя бы в какую сторону копать.
А каким образом распарсить в js массив из test.php?
Примечание:
serg54 (serg lachinov), спасибо за наводку на split()! Про её существование я-то и не знал. Всё получилось, дописал processRequestChange() так:
------------------------------------------------------
if (req.readyState == 4) {
if (req.status == 200) {
var SelectorList = req.responseText.slice(0,req.responseText.length-1).split(',');
for (var i=0; i<SelectorList.length; i++) {
Selector.options[i] = new Option(SelectorList[i],SelectorList[i]);
}
Container.innerHTML = SelectorList;
}
}
------------------------------------------------------
ps: пришлось использовать slice(0,req.responseText.length-1) ибо цкл пхп генерирует последовательность с последней запятой. Впринципе, можно было бы её обрезать и средствами пхп перед передачей.