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

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

Запись от ProCode размещена 30.01.2017 в 19:05
Показов 3444 Комментарии 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 вне форума
 
Новые блоги и статьи
Жара жесть.
kumehtar 18.08.2026
Пролетают летом дни Тридцать пять жары в тени. Каждый август год от года Дарит жаркую погоду.
Когда логика программы не спасает от человеческих ошибок
Maks 18.08.2026
В последнее время всё чаще и чаще сталкиваюсь с таким явлением, как абсолютная невнимательность (или глупость) пользователей. Проявляется это чаще всего на работе в коллективе. Допустим, человек с. . .
Лето уходит
kumehtar 17.08.2026
Мысли в слух
kumehtar 17.08.2026
Забавно, насколько сейчас стала доступна информация. Например о магии, духовном развитии, медитациях, и других подобных направлениях, ранее зачастую тайных, передаваемых от учителя к ученику. Хотя. . .
Перемещение строк из ТЧ в другой документ с учетом текущего пробега
Maks 17.08.2026
Реализация из решения ниже выполнена на примере нетипового документа "Автозапчасти", с ТЧ "Шины". За основу взят алгоритм отсюда: https:/ / www. cyberforum. ru/ blogs/ 359708/ 10838. html Задача: . . .
Саморегулирующийся социальный контракт для сервера cross-section.
Hrethgir 14.08.2026
С кодом конечно таких глубоких размышлений пока не было, впрочем я уже привык к алгоритмизации. Суть предмета записи: снова в диалоге с нейросетью (я взял пока себе ник для учётки админа - Rector). . . .
Часы электронные
Uhbif79 12.08.2026
Выкладываю программу часов. Программа позволяет: 1. Использовать системное время и дату, 2. Есть возможность вводить время и дату вручную. 3. Реализованы 2 будильника: начало и конец рабочего дня. . . .
Часы с будильником на основе класса QLCDNumber
Uhbif79 12.08.2026
Всем добрый день, выкладываю программу часов с будильником на основе класса QLCDNumber. Здесь я пробовал самостоятельно создавал классы, впервые столкнулся с видимостью переменной одного класса из. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru