Javascript-форум (https://javascript.ru/forum/)
-   Events/DOM/Window (https://javascript.ru/forum/events/)
-   -   Заменить select данными из mysql при помощи javascript. (https://javascript.ru/forum/events/27510-zamenit-select-dannymi-iz-mysql-pri-pomoshhi-javascript.html)

TrogWar 15.04.2012 15:01

Заменить select данными из mysql при помощи javascript.
 
Доброго времени суток!

В базе данных есть некая таблица. Так же есть две страницы (код - ниже). Чтобы не "метаться" между мелкими файлами - объединил html+js+css в index.php.

Что есть сейчас:
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:
<!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:
<?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;
?>

Le-mark43 16.04.2012 13:27

ну во первых, у тебя test.php смешной. запусти его отдельно в окне - наверняка поймешь что к чему!
$result - массив объектов. так его не вывести.
если чё, погугли как выводить инфу с базы средствами php. тема избита...

во вторых: может имеет смысл забирать данные посредством JSON,
мне однажды эту тему популярно разжевали:
http://javascript.ru/forum/misc/2555...zhit-json.html
и соответственно вставлять данные в selectы с возвращенного JSON (ассоциативный массив)
то бишь в test.php:
$rows = array();
while($r = mysql_fetch_assoc($result)) {
$rows[] = $r;
}
print json_encode($rows);
ну а в Javascript работаешь как с любым другим массивом.

НО: если будешь так делать, сначала просто выведи полученный JSON, дабы изучить его строение, шоб правильно обращаться к паре ключ:значение, а то я тогда лоханулся... часа 2 искал баг, которого не было
и еще: не забудь кодировать в utf8 и не выводи массив с тысячами записей, а то нарвешься вот на это -
Fatal error: Allowed memory size of 134217728 bytes exhausted (tried to allocate 22806573 bytes).
ну или не кодируй, и выводи сколько хош... пока не нарвешься..)))

razerxxx 16.04.2012 13:36

Запросы с json ответами можно смотреть в firebug-е, и прочих инспекторах (хром, опера).

TrogWar 16.04.2012 21:33

Конечно же смешной - я и не собираюсь открывать test.php, иначе бы дописал остальную html-заглушку и переделал массив в строку текста через mysql_fetch_array() и цикл. Но мне-то нужно передать обратно массив, а не строку.

За инфу про JSON спасибо про такой метод я как раз не задумался.
У меня кириллицы практически никакой нет и не будет - все в utf-8, так что минус проблема.

Про выделение памяти это очень важное дополнение! Как тогда быть, если в перспективе из мускула будут таким образом вытаскиваться по 7-10 столбцов по 3000-4000 значений в каждом? Должна быть возможность выведения всех этих строк сразу на страницу.
Что-нибудь можете посоветовать чтобы избежать той ошибки с памятью?

Le-mark43 16.04.2012 23:15

насчет этого не парься пока, практика показывает, что такое появляется, в основном при выводе в кодировке в utf8, ты как нить посмотри, Json строк на 10 при хотя бы 5 столбцах (записи в базе в кириллице), ужаснёшься.
да поправят меня профессора, но utf8 кодирует кириллические символы длинной аж до 6 байт, для сравнения омериканские символы и символы unicode как и asci - до 2 байт.
поэтому если выводишь в кодировке 1251, можно особо не париться, 3000 строк на 15 столбцов, нихрена не пустых - выводятся за милую душу...
но на всякий пожарный, дабы не переборщить делают через try{}catch{}, как не знаю, скоро предстоит и мне с этим разбираться.

Le-mark43 16.04.2012 23:23

Да, кстати, кто-то говорил, что объем памяти можно выставить в профайле Apache, (denwer)... погугли! вдруг тебе больше повезёт.

TrogWar 19.04.2012 06:17

Le-mark43, спасибо за информацию! Объём можно, а я и позабыл об этом..

Таблица из 4х столбцов: один char и три float'а. char будет только где-то в ~10% случаев (не более) написан кириллицей. Апач, мускул, пхп, все страницы принудительно настроены на работу в utf-8 (general).
Насколько я читал, между cp1251 и utf-8 только в кириллице - на каждую букву юник выделяет два байта вместо одного как в 1251, а вот для латиницы всё одинаково.
То бишь, если передаётся много кириллицы в utf-8, то, фактически, увеличивается весь трафик в два раза, что не есть гуд.
Плюс надо учитывать момент, что при урезании кириллической (и только!) строки (например, "text.length-1") будет отрезан только один из двух бит буквы. Последствия очевидны (:

Но это всё лирика.. Вот чего я боюсь - переполнения памяти, слишком сильного пожирания трафика или урезания данных при передаче на узком месте между test.php и index.php по XHR'у.
Есть ли разница - передавать с помощью JSON или тупо строкой (echo в test.php и req.responseText в test.js)? Пока что ничего конкретного, чтобы всё в одном месте собрано было, не нашёл =/

Le-mark43 20.04.2012 20:11

как передавать лично я разницы не видел, главное, чтоб на выходе из php у тебя был массив, дабы потом в js его можно было свободно обработать.
просто массив формировать гораздо удобнее JSONом, он для этого походу и создан был
по поводу утф8 и кириллицы, я, чем больше нарывался на ошибку с памятью, тем больше понимал, что память тут вообще не причем.
Allowed memory size of 134217728 bytes exhausted (tried to allocate 22806573 bytes).
если перевести, то это означает:
допустимый размер памяти 134217728 байт исчерпан (попытка выделить 22806573 байта),
первая цифра всегда больше второй, зависит она от настрйки профиля в апаче, максимум 128 метров, как и говорится в сообщении об ошибке.
вопрос: если максимально можно использовать 128 метров, то какого хрена не можешь выделить 21,7 метра?
хотя возможно цифра в скобках означает на сколько превышен лимит...
Причем, я заметил, что так бывает не всегда, иногда при выводе этого же объема информации (не такого же, а именно этого же), такой штуки не вылезает, а почему?
вообщем, что бы там не говорили, не верю я в нехватку памяти для обработки скрипта, ну а поскольку предложений по решению у меня нет, то и говорю, аккуратнее с количеством записей в утф8.))

Le-mark43 20.04.2012 20:18

и кстати, вместо char делай лучше varchar, база меньше занимать будет

TrogWar 21.04.2012 21:14

Спасибо за развёрнутый ответ и предостережение :) Когда решу проблемы типа asap, займусь этой.

Пользуюсь "char" потому, что это БД для тестов, а не рабочая. Тестовые таблицы бессмысленно делать большими (если конечно, это не тесты на скорость БД) => место совершенно некритично, а поиск и фрагментация уменьшаются.


Часовой пояс GMT +3, время: 14:59.