Форум программистов, компьютерный форум, киберфорум
ProCode
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск  

Пример простейшего калькулятора на PHP без перезагрузки страницы (чистый Ajax, без jQuery и других библиотек)

Запись от ProCode размещена 30.01.2017 в 19:05
Показов 3414 Комментарии 4

Привет. Это, в каком-то смысле, продолжение креатива Исполнение PHP-скрипта без перезагрузки страницы и без знания JavaScript(!) - Xajax но здесь я решил не использовать сторонние библиотеки вовсе, а сделать образец "чистого" Ajax для тех, кто только начинает знакомиться с этой технологией.

Это наверное самый простой образец применения Ajax из возможных Скрипт принимает от пользователя 2 числа, и выводит ему их вычисленную сумму. И всё это - без перезагрузки страницы. Пример работы скрипта можно увидеть здесь: http://procode.pw/primer/ajax/ajax.html

Скрипт состоит из двух файлов: ajax.php и ajax.html которые лежат в одной папке. Вот содержимое ajax.php:

PHP
1
2
3
<?php
 
echo $_POST["x"] + $_POST["y"];
Всё более чем просто, не так ли? -) На сервер приходит POST-запрос с данными. Скрипт складывает две переменных из этого запроса, и отправляет полученную сумму обратно, в поток вывода.

Теперь посмотрим на код, который делает этот самый POST-запрос (файл, ajax.html):

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<script type="text/javascript">
 
  function calculate() {
 
    var x = document.getElementById('x').value; // получить значение поля 'x' из формы
    var y = document.getElementById('y').value; // получить значение поля 'y' из формы
    var ajaxObject = new XMLHttpRequest(); // создать новый объект XMLHttpRequest
    ajaxObject.open('POST', 'ajax.php'); // открыть соединение
    ajaxObject.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); // установить формат содержимого POST-запроса
    ajaxObject.send('x=' + encodeURIComponent(x) + '&y=' + encodeURIComponent(y)); // отправить POST-запрос
    ajaxObject.onreadystatechange = function() { // установить функцию-обработчик изменения свойства readyState
      if (ajaxObject.readyState == 4) { // если readyState стало 4, т.е. ответ от сервера пришел и готов к обработке
        if(ajaxObject.status == 200) { // и если ответ успешен
          document.getElementById('calculate').innerHTML = ajaxObject.responseText; // выводим ответ сервера пользователю в <span id="calculate"></span>  
        }
      }
    }
  }
  
</script>
HTML5
1
2
3
4
5
6
7
<h4>Это образец работы простейшего AJAX-калькулятора</h4>
<form>
  введите число X: <input type="text" name="x" id="x" /><br />
  введите число Y: <input type="text" name="y" id="y" /><br />
  <input type="button" value="Вычислить X+Y" onclick="calculate()" />
</form>  
  <p>Вычисленная сумма X + Y равна: <span id="calculate"></span></p>
Как видим, ajax.html состоит из двух частей.

1. Это функция calculate() написанная на JavaScript. Именно она делает всю основную работу по отправке запроса на сервер, принятию ответа от сервера, и выводу этого ответа на экран.

2. Обычная веб-форма с двумя полями ввода и одной кнопкой при нажатии на которую, вызывается функция calculate();

Весь код достаточно подробно прокомментирован, поэтому сейчас ничего более расписывать не буду (может если позже, в виде дополнения опишу механику подробнее). Если есть конкретные вопросы по коду - отвечу в топике.

Код сознательно упрощен за счет небольшой части функциональности (он не будет работать в старых версиях IE).

Удачи, парни! Да пребудет с вами Сила!
Размещено в PHP
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Всего комментариев 4
Комментарии
  1. Старый комментарий
    Аватар для ProCode
    P.S. Разместил было этот текст в разделе "PHP для начинающих", но тамошние модераторы его закрыли так что вопросы по коду можете задать здесь.
    Запись от ProCode размещена 30.01.2017 в 19:08 ProCode вне форума
  2. Старый комментарий
    Спасибо! Достаточно годное приспособление!
    Запись от DarKing1999 размещена 09.02.2017 в 19:23 DarKing1999 вне форума
  3. Старый комментарий
    Аватар для Fedor92
    Цитата Сообщение от ProCode
    P.S. Разместил было этот текст в разделе "PHP для начинающих", но тамошние модераторы его закрыли так что вопросы по коду можете задать здесь.
    Хех... А чего Вы хотели? Топик у Вас посвящён ajax, а Вы его на PHP-ветку кидаете... На ветку PHP надо совать код типа такого:
    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>';
        ?>
    Тогда к Вам и претензий не будет, а ajax живёт на ветке javascript... И то, если у Вас вопросы по коду возникли... А если решили вести просветительскую работу, то такие топики лучше сразу в блоге размещать, чтобы зря не пропадали...
    Запись от Fedor92 размещена 10.02.2017 в 22:55 Fedor92 вне форума
  4. Старый комментарий
    Попробую на своём сайте этот код.
    Запись от alex335 размещена 15.02.2017 в 20:43 alex335 вне форума
 
Новые блоги и статьи
сукцессия 29. Переход от одних деревьев на другие делать более или менее вероятностным?
anaschu 12.07.2026
Насколько смена типов микоризы — исключительное событие в двухвековой сукцессии? Оценка вероятности в пространстве параметров В текущей версии модели успешно реализован ключевой механизм. . .
сукцессия 27. Думаю, как переделывать уже написанную статью с планами на сукцессию.
anaschu 12.07.2026
Анализ соответствия модели требованиям Реализованные компоненты: Механизм закисления почвы через протонную помпу Конкуренция между типами микориз pH как триггер сукцессии C/ P соотношение. . .
Сукцессия 26. Мат модель создана.
anaschu 12.07.2026
Модель смены растительных сукцессий посредством управления грибами работает внутри небольшой ячейки почвы, восстанавливающейся после пожара, где ненадолго бывшее царство хвойных снова захватили. . .
Решил проблему с ошибкой пагинации сообщений с сервера на алгоритме обхода дерева "Эстафета хвоста".
Hrethgir 12.07.2026
Проблема была в том, что удалялась именно новая кнопка, а не старая. Ни один ИИ не обнаружил это, а сам я смог только когда с работой стало попроще и когда заставил работать будущее автономное. . .
сукцессия 25. Хронология ошибок
anaschu 12.07.2026
# От 50-тонного гриба до устойчивого леса: хроника ошибок при построении модели вековой сукцессии микоризы ## О чём эта статья В процессе построения ОДУ-модели (система дифференциальных. . .
сукцессия 24. Промежуточное общее описание модели
anaschu 12.07.2026
Хендофф: модель АМ→ЭКМ сукцессии микоризы (ризосфера, 50 лет) Содержание проекта Симуляция вековой (50 лет) экологической сукцессии в почве леса Основные участники: АМ-гриб, ЭКМ-гриб,. . .
сукцессия 23. Более физиологичная физиология, более экологичная экология, более диффурные диффуры.
anaschu 12.07.2026
Что реально нашли и починили за эти 5 часов Правило Линдемана (КПД конверсии сахара в тело, kEff) — раньше 100% полученного углерода шло прямо в биомассу гриба; теперь только kEff=0. 5 (после. . .
сукцессия 22. От артефактов к физиологии: калибровка агентной модели грибной сукцессии для воспроизведения сезонной динамики и pH-плато
anaschu 11.07.2026
Аннотация В данной работе представлена калибровка агентной модели динамики грибных сообществ (fungal-succession), направленная на устранение нефизичных артефактов (коллапс биомассы, мгновенное. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru