Відправка форми ajax на сервер за допомогою jquery

11 0 Новини високих технологій

Як багато раз ви стикалися з тим, що ввели некоректні дані, з-за чого сторінка перезавантажувалася і повністю усувала введені в полях символи. Щоб це виправити, існує досить популярний підхід до побудови користувальницького інтерфейсу, і ім'я йому - ajax. Він зустрічається у багатьох проектах і використовується різними способами.

Відправка форми ajax: підключення бібліотек

Підключіть бібліотеку jquery до index.php.



<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js">

Існує ще один спосіб включення jquery в документ. Необхідно завантажити бібліотеку з офіційного сайту jquery, помістити її в потрібну папку і вставити посилання на неї схожим чином:

<script async="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
<!-- fb_336x280_mid -->

<script> (adsbygoogle = window.adsbygoogle ||[]).push({});
   

Підключення та налаштування документів

1. Створіть у папці з сайтом документ формату .php із будь-яким зручним для вас назвою - це буде відправка форми ajax php. У ній ви можете написати, яким форматом буде виводитися текст з повідомленням. Наприклад, form1.php.

Відправка форми ajax на сервер за допомогою jquery

2. У папці з файлами javascript створіть файл .js із будь-яким зручним назвою. Наприклад, form.js.

Відправка форми ajax на сервер за допомогою jquery

3. Підключіть цю папку до вашого документа.

   

<script type="text/javascript" src="/js/form.js">

4. Створіть форму з наступними параметрами:

  
<!--form1.php это файл формы в папке сайта-->




В ній же не забудьте створити поля для введення даних.

<script async="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
<!-- fb_336x280_2 -->

<script> (adsbygoogle = window.adsbygoogle ||[]).push({});

5. Відкрийте файл form1.php в каталозі з сайтом, якому напишіть:

    

Тепер при відправці форми у браузері буде виводитися інформація про даних.

В цьому ж файлі можна написати, що саме буде виводитися або яким чином. Так само тут можна писати цикли або алгоритми.

Відправка форми ajax jquery

1. У створеному файлі form.js потрібно написати код, який відповідає за те, щоб файл працював після повного завантаження сторінки сайту.

  $(document).ready(function(){
//Тут буде виконуватися наш наступний код
});

2. Потім вам потрібно вибрати кнопку submit. Зробіть все це в цьому ж файлі.

  $("form").submit(function(event) {
event.preventDefault();
//тут буде писатися наступний код
});

Перша частина коду відповідає за вибір елемента на сторінці, а друга - за запобігання дії за замовчуванням.

3. Потім, наприклад, візьміть відправку форми ajax при вдалій надсилання даних.

  $.ajax({
type: $(this).attr('method'),
url: $(this).attr('action'),
data: new FormData(this),
contentType: false,
cache: false,
processdata: false,

success: function(result){
alert(result);
}
});

Нижче докладно розглянута кожна настройка.

  • type - тип запиту, який надсилається в письмовій формі; так як варто POST, тип запиту буде відповідний;
  • this - вибір елемента усередині конструкції;
  • attr - скорочено від attraction (залучення), тобто залучається певний параметр обраної мети (form);
  • url - параметр, який відповідає за те, куди буде надсилатися запит; в даному випадку - те, що написано в параметрах форми (form1.php);
  • data - вказує дані форми;
  • contentType - відповідає за відправку заголовків на сервер; в даному випадку це не потрібно;
  • cache - відповідає за збереження кешу у користувача;
  • processData - відповідає за перетворення даних в рядок;
  • success - виводить результат успішної відправки даних; тому, якщо відправка даних увінчалася успіхом, то виконуються дії функції.

4. Готово, тепер при відправці форми ajax ви будете отримувати дані без оновлення сторінки.


<script type="text/javascript">
var blockSettings2 = {blockId:"R-A-271049-5",renderTo:"yandex_rtb_R-A-70350-39",async:!0};
if(document.cookie.indexOf("abmatch=") >= 0) blockSettings2.statId = 70350;
!function(a,b,c,d,e){a[c]=a[c]||[],a[c].push(function(){Ya.Context.AdvManager.render(blockSettings2)}),e=b.getElementsByTagName("script")[0],d=b.createElement("script"),d.type="text/javascript",d.src="//an.yandex.ru/system/context.js",d.async=!0e.parentNode.insertBefore(d,e)}(this,this.document,"yandexContextAsyncCallbacks");

Результат можна змінити за допомогою файлу form1.php, де можна вказати, що саме буде виводитися в результаті. Наприклад,

    

Ви можете поекспериментувати і створити перевірку на правильність введення певних даних: якщо дані не вірні, то виводиться повідомлення, а інакше - перенаправляє на сторінку. Також можливо багато що інше, що тільки побажає ваша душа.
Відправка форми ajax на сервер за допомогою jquery
Також існує надсилання даних на сервер асинхронно. Це коли користувач вводить текст, а він відразу ж підсвічується червоним кольором, повідомляючи про те, що введені дані не вірні. Про це існує безліч мануалів на просторах інтернету, де все зрозуміло пояснюється і показується на прикладах.

Висновок

Безсумнівно, ajax - корисний інструмент у створенні сайтів. Щоб робити якісні сторінки і інтерфейси, він просто необхідний. Варто відзначити, що дуже важливо знати jquery для розуміння повної картини того, що написано в коді, адже простий copy-paste не завжди може допомогти і навчити вас розуміння коду. Завжди варто пам'ятати, що версії мов оновлюються, і деякі функції можуть просто зникнути. Тому не всі способи рішення можуть бути актуальні, найчастіше написаний код просто не працює або видає не той результат, який хотілося б бачити у себе на екрані.