Post в jquery : Отправить, получить данные, с примерами

"jquery post" или "Отправить получить jquery post". Сделаем живой пример с передачей "post" на страницу php. Там мы сложим два числа и вернем результат в скрипт с помощью функции "post в jquery"

"post в jquery", как работает, с примером!

1. Форма для отправки "post в jquery"
2. Скрипт + "post в jquery"
3. Php файл для "post в jquery"
Живой пример "post в jquery"

4. Скачать

Форма для отправки "post в jquery"

Для отправки "post в jquery" нам понадобится форма без form.

Которая будет состоять из 4 полей:

Поле для числа 1.

Поле для числа 2.

Поле для числа отправить "post в jquery".

Поле(div) для числа возвращенного результата.

Форма в сборе для "post в jquery"

<input type = "number" placeholder = "число 1" id="number1">
<input type = "number" placeholder = "число 2" id = "number2">
<button id="send">Сложить</button>
<div id="rezult">здесь "Ответ из php обработчика"</div>

Сколько всего будет файлов?

Файлов будет два:

"index.html" - где будет форма со скриптом.

"jquery_post.php" - php обработчик отправленных значение и вывод с помощью echo




Скрипт + "post в jquery"

Разберем скрипт отправки данных с помощью "post в jquery":

Естественно, что самым первым шагом нам нужно подключить jquery.

Запускаем скрипт после полной загрузки страницы: аналог window_onload

$( document ).ready(function(){

Нажимаем на кнопку отправить с помощью click

$( "#send" ).click(function(){

Два числа получаем из полей:

var number1 = $('#number1').val();

var number2 = $('#number2').val();

+ просто для удобства отдельную переменную под php файл:

var url_post = 'jquery_post.php';

Отправляем с помощью "post в jquery" на страницу php два полученных числа:

$.post( url_post, { number1 , number2 },

Запускаем произвольную функцию. В аргументе функции будет возвращенный результат из php файла:

function( data ) {

И вернем полученный результат в 4 поле:

$( "#rezult" ).html(data);

Всё просто...

Соберем весь скрипт "post в jquery" вместе:

<script>

$( document ).ready(function(){

  $( '#send' ).click(function(){

     var number1 = $('#number1').val();

     var number2 = $('#number2').val();

     var url_post = 'jquery_post.php';

     $.post( url_post, { number1 , number2 },

        function( data ) {

        $( '#rezult' ).html(data);

        }

  );

  });

});

</script>




Php файл для "post в jquery"

Ну а в php файле для "post в jquery" вообще всё просто:

Получаем данные из двух ячеек массива post

Если две переменные существую - складываем.

Иначе выводим -"ошибку".

<?
$number1 = strip_tags (trim($_POST['number1']));
$number2 = strip_tags (trim($_POST['number2']));
if($number1 and $number2){ echo '<div class="border">результат сложения: '. ($number1+$number2); }
else{echo '<red>Что-то пошло не так...</red>';}


Живой пример работы "post в jquery"

И собственно живой пример, который можно протестировать:

Живой пример