Відправка асинхронних запитів на jquery.

Відео: Javascipt. AJAX. Основи асинхронних запитів

Всім привіт! Сьогодні ми розберемо важливу тему, а саме як відправляти AJAX запити на JQuery.

Якщо ви використовуєте на своєму сайті бібліотеку JQuery, то вам більше не потрібно писати величезний код, щоб відправити запит AJAX, а потім ще турбується про кросбраузерності, тому що бібліотека зробить все за вас! Давайте відразу перейдемо до практики. Приклад візьмемо самий банальний: відправляємо 2 числа на сервер, а він повертає нам їх суму.

Для початку напишемо наш простий сервер server.php

$ a = $ _POST[`A`] - 
$ b = $ _POST[`B`] - 
echo $ a+$ b-

Тепер перейдемо до HTML

Відео: Технологія jQuery. Налагодження асинхронних запитів (AJAX). (Денис Хомич - Видавництво Info-DVD)

 
 
 JQuery AJAX 
 charset="Utf-8"gt; 
  
  
 
 
type="Text"id="A"gt; 
type="Text"id="B"gt; 
id="Submit"gt;Відправити! 
id="Block"gt;

HTML до неподобства простий: 2 текcтових поля, блок, куди будуть виведені дані з сервера і кнопка для відправки даних.

Відео 01 03 Асинхронні запити (Lynda.com - js and AJAX)

Тепер перейдемо до нашого файлу main.js, де і напишемо наш скрипт.

$(document).ready(function(){ 
$("#submit").click(function(){ 
var fnumb = $("#a").val() - 
var snumb = $("#b").val() - 
 alert(fnumb +":"+ snumb) - 
}) - 
}) -

Ось, що у нас поки вийшло. Коли документ повністю завантажений, ми вішаємо на нашу кнопку подія клік, в якому відбираємо значення з полів функцією val (). Щоб перевірити, що у нас все правильно, виведемо ці значення функцією alert (). Обов`язково перевірте мене, раптом помилився -)

Відео: Створення AJAX форм зворотного зв`язку на сайті

Що ж, коли ви переконалися, що все спрацювало нормально, перейдемо до наступного етапу: відправці асинхронного запиту

$(document).ready(function(){ 
 $("#submit").click(function(){ 
var fnumb = $("#a").val() - 
var snumb = $("#b").val() - 
 $.ajax({ 
url:"Server.php", 
type:"POST", 
dataType:"Text", 
data:("A ="+fnumb+"B ="+snumb), 
success:function(data) { 
 $("#block").text(data) - 
} 
}) - 
}) - 
}) -

Отже, розберемо, що ми тут зробили. ми викликали метод ajax об`єкта jquery і передали туди об`єкт з властивостями. Що ж ці властивості означають?

url - адреса сервера, куди відправляться дані
type - метод запиту. За замовчуванням GET
dataType - тип даних, які ми плануємо отримати від сервера. Може бути: text, html, script, xml, json, jsonp
data - це власне дані, які ми хочемо відправити сервера. Зауважте, що параметри поділяються знаком
success - в разі успіху, викликаємо анонімну функцію, в яку прийдуть дані. А в тілі фунції просто вставляємо їх в блок div

От і все. Тепер, якщо ви введете 2 числа в тектових поля і натиснете кнопку "відправити", то отримаєте суму цих чисел без перезавантаження сторінки. Звичайно, параметрів більше, і ми розібрали далеко не все, але ви отримали базу, використовуючи яку вже можна зробити класні речі! Якщо ви відчуваєте труднощі з розумінням даної статті, то подивіться безкоштовний курс по jаvascript, JQuery і Ajax

Поділися в соціальних мережах:

Схожі