Автор: - Yurik Дата публикации - 10.05.2005 Просмотров: - 12491
Передача переменных из PHP в Javascript
Достаточно часто передачу некоторых значений из PHP в Javascript делают так:
[php]
<script language="javascript">
var a=<?php echo $a; ?>;
alert('A is: '+a);
</script>
[ /php]
[nb]Что плохого в таком подходе? Плохо то что JS-код генерируется "на лету", т.е. если он сгенерируется не так как мы того ожидали, получится ошибка или вобще битый JS-код, который трудно отлаживать, особенно если кода много. В дополнение, мы получаем кучу кода который засоряет наш PHP-скрипт (или шаблон), если JS-скрипт используется многократно - его приходится или копировать или инклудить что также усложняет настройку и поддержку продукта. Кроме того лишняя информация (при каждом запросе) пожирает трафик, например в форуме phpBB на каждую страницу генерируется 3-5 кб JS-кода. [/nb]
Лишиться всех этих проблем можно выносом всего JS-кода в отдельный статический *.js файл. Тогда как же передавать ему динамические данные? Очень просто - через скрытые елементы форм. В большинстве случаев JS используют для той или иной работы с <form> так что она у нас есть на странице, но даже если и нет, то к елементу можно обратиться через getElementById. Как же будет выглядеть наш простейший пример в этом случае:
[php]
<script language="javascript">
function foo(){
var a=document.formName.id1.value;
alert('A is: '+a);
}
</script>
[ /php]
а в PHP скрипте сделаем
[php]
<form name=formName>
...
<input type=hidden name=id1 value="<?php echo htmlspecialchars($var); ?>">
</form>
[ /php]
Теперь единожды отлаженный JS-скрипт будет 1 раз подгружаться клиенту и не будет вызывать разных ошибок вызванных тем что PHP вставил не то значение (например Notice о неустановленной переменной $var). К тому же JS-код стал reusable с любого скрипта, осталось только в теле документа передать ему другое значение.
Таким же способом можно и передавать более сложные переменные, например массивы связанных данных. Для примера возьмём случай когда нужно передать массив ID товаров которые пользователь выбирает через checkbox кнопки и JS-скрипт должен тут же пересчитать например стоимость выбраных, умножив её на количество каждого выбраного товара.
[php]
<script language="javascript">
function calc(){
var el=document.tovar.elements;
var counter=document.tovar.counter.value;
var total=0;
for (var i=1; i<=counter; i++){
if (el['id'+i].checked=-true){
num=parseInt(el['q'+i].value);
price=parseFloat(el['price'+i].value);
total=total+num*price;
}
}
alert('Общая цена: '+total);
}
</script>
У нас получился статический reusable JS для подсчёта цены, который работает со связанным типом данных из PHP: по всем отмеченным ID умножаем количество на цену и получаем сумму.
