Пример простейшего калькулятора на PHP без перезагрузки страницы (чистый Ajax, без jQuery и других библиотек)
Запись от ProCode размещена 30.01.2017 в 19:05
Показов 3414
Комментарии 4
Метки ajax, php, xmlhttprequest, для начинающих
|
Привет. Это, в каком-то смысле, продолжение креатива Исполнение PHP-скрипта без перезагрузки страницы и без знания JavaScript(!) - Xajax но здесь я решил не использовать сторонние библиотеки вовсе, а сделать образец "чистого" Ajax для тех, кто только начинает знакомиться с этой технологией. Это наверное самый простой образец применения Ajax из возможных Скрипт принимает от пользователя 2 числа, и выводит ему их вычисленную сумму. И всё это - без перезагрузки страницы. Пример работы скрипта можно увидеть здесь: http://procode.pw/primer/ajax/ajax.html Скрипт состоит из двух файлов: ajax.php и ajax.html которые лежат в одной папке. Вот содержимое ajax.php:
Теперь посмотрим на код, который делает этот самый POST-запрос (файл, ajax.html):
1. Это функция calculate() написанная на JavaScript. Именно она делает всю основную работу по отправке запроса на сервер, принятию ответа от сервера, и выводу этого ответа на экран. 2. Обычная веб-форма с двумя полями ввода и одной кнопкой при нажатии на которую, вызывается функция calculate();Весь код достаточно подробно прокомментирован, поэтому сейчас ничего более расписывать не буду (может если позже, в виде дополнения опишу механику подробнее). Если есть конкретные вопросы по коду - отвечу в топике. Код сознательно упрощен за счет небольшой части функциональности (он не будет работать в старых версиях IE). Удачи, парни! Да пребудет с вами Сила!
| |||||||||||||||
Метки ajax, php, xmlhttprequest, для начинающих
Размещено в PHP
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Всего комментариев 4
Комментарии
-
Запись от ProCode размещена 30.01.2017 в 19:08
-
Спасибо! Достаточно годное приспособление!

Запись от DarKing1999 размещена 09.02.2017 в 19:23
-
Хех... А чего Вы хотели?
Сообщение от ProCode
Топик у Вас посвящён ajax, а Вы его на PHP-ветку кидаете...
На ветку PHP надо совать код типа такого:
Тогда к Вам и претензий не будет, а ajax живёт на ветке javascript...PHP/HTML 1 2 3 4 5 6 7 8 9 10 11
<form action="<?php $_SERVER['SCRIPT_NAME']?>" method="POST"> <input type="text" name="first"> <input type="text" name="second"> <input type="submit" value="Сумма"> </form> <?php $a = $_POST['first']; $b = $_POST['second']; $summ = $a+$b; echo '<p>Сумма равна: '.$summ.'</p>'; ?>
И то, если у Вас вопросы по коду возникли... А если решили вести просветительскую работу, то такие топики лучше сразу в блоге размещать, чтобы зря не пропадали...Запись от Fedor92 размещена 10.02.2017 в 22:55
-
Попробую на своём сайте этот код.Запись от alex335 размещена 15.02.2017 в 20:43

Скрипт принимает от пользователя 2 числа, и выводит ему их вычисленную сумму. И всё это - без перезагрузки страницы. Пример работы скрипта можно увидеть здесь:



