Интернет » Изпратете формата ajax на сървъра с помощта на jquery

Изпратете формата ajax на сървъра с помощта на jquery

Интернет

Колко пъти сте се сблъсквали с неправилно въвеждане на данни, което накара страницата да се рестартира и напълно да елиминира въведените в полетата знаци. За да поправите това, има много популярен подход към изграждането на потребителски интерфейс, а името му е ajax. Той се намира в много проекти и се използва по много начини.

Изпращане на формата ajax: свързване на библиотеки

Свържете библиотеката jquery към index.php.



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

Има и друг начин за включване на jquery в документ. Трябва да изтеглите библиотеката от официалния уебсайт на jquery, да я поставите в съответната папка и да я поставите по същия начин:

& lt; script async = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"> ;
& lt ;! - fb_336x280_mid - & gt;

& lt; script & gt; (adsbygoogle = window.adsbygoogle || []). push ({});

Свързване и конфигуриране на документи

1. Създаване на документ за форматиране в папка с сайт. php с всяко удобно за вас име - това ще изпрати ajax php форма. В него можете да напишете, в какъв формат ще се показва текстът със съобщението. Например form1.php.

2. В папката на javascript файловете създайте .js файл с всяко удобно име. Например form.js

3. Свържете тази папка с документа.



& lt; script type = "text /javascript" src = "/js /form.js" & gt;

4. Създайте формуляр със следните параметри: 

& lt ;! - form1.php е файл с форма в папката на сайта- - & gt;

В него не забравяйте да създадете полета за въвеждане на данни.

& lt; скрипт async = "//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js">
& lt ;! - fb_336x280_2 - & gt;

& lt; скрипт & gt; (adsbygoogle = window.adsbygoogle || []). push ({});

5. Отворете файла form1.php в указателя със сайта, на който пишете:

Сега, когато изпращате формуляра, браузърът ще показва информация за данните ,

В същия файл можете да напишете какво ще се показва или как. Така че тук можете да пишете цикли или алгоритми.

Изпращане на ajax jquery формуляр

1. В създадения файл form.js трябва да напишете кода, който е отговорен за гарантиране, че файлът работи след като сайтът е заредил напълно страницата.

$ (document) .ready (function () {
 //Ето следващия ни код 
});

2. След това трябва да изберете бутона за изпращане. Направи всичко в същия файл.

$ ("форма") submit (функция (събитие) {
 event.preventDefault ();
//следният код ще бъде записан тук 
});

Първата част на кода е отговорна за избора на елемента на страницата, а вторият за предотвратяване на действието по подразбиране.

3. След това, например, изпратете форма на ajax с успешно изпращане на данни.

$ .ajax ({
 type: $ (this) .attr ('method'),
url: $ (this) .attr ('action'),
) дата: нов FormData (this),
contentType: false,
cache: false,
processdata: false, 

успех: функция (резултат) {
 сигнал (резултат) 
} 
});

По-долу всеки обект се разглежда подробно.

  • тип - видът на заявката, която се изпраща писмено; тъй като е POST, типът на заявката ще бъде подходящ;
  • това - изборът на елемент в дизайна;
  • attr - съкратено отпривличане, т.е. определен параметър на избраната цел (форма);
  • url - параметърът, който отговаря за това къде ще бъде изпратена заявката; в този случай - какво е записано в параметрите на формата (form1.php);
  • data - определя данните за формата;
  • contentType - отговорен за изпращане на заглавията на сървъра; в този случай не се изисква;
  • cache - отговаря за съхранението на кеша от потребителя;
  • processData - отговаря за преобразуването на данни в низ;
  • успех - показва резултата от успешното изпращане на данни; така че ако изпращането на данните е било успешно, тогава функциите на функцията се изпълняват.

4. Завършете, сега, когато изпращате ajax формуляри, ще получавате данни, без да актуализирате страницата.


& lt; script type = "text /javascript" & gt;
може да blockSettings2 = {blockId: "R-A-271049-5", renderTo: "yandex_rtb_R-A-70350-39", async:! 0};
if (document.cookie.indexOf ("abmatch =") & gt; = 0) blockSettings2.statId = 70350;
Функция (a, b, c, d, e) {a [c] = a [c] || [], a [c] .push (функция () {Ya.Context.AdvManager.render (blockSettings2)}), e = b.getElementsByTagName ("скрипт") , d = b.createElement ("скрипт"), d.type = "text /javascript", d.src = "//an.yandex .ru /system /context.js ", d.async =! 0e.parentNode.insertBefore (d, e)} (това, този.документ," yandexContextAsyncCallbacks ");

Резултатът може да бъде променен с помощта на файла form1.php, където можете да посочите какво точно ще се показва като резултат. Например, 

 

Можете да експериментирате и да създадете проверка за верността на въвеждането на определени данни: ако данните са неправилни, тогава се показва съобщението или по друг начин се пренасочва към страницата. , Има и още нещо, което душата ви иска. 



Има и асинхронно изпращане на данни към сървъра. Това е, когато потребителят въведе текста и той веднага се маркира в червеноцвят, като посочва, че въведените данни са неправилни. За това има много ръководства в интернет, където всичко е ясно обяснено и показано в примерите.
Заключение



Безспорно ajax е полезен инструмент за създаване на сайтове. За да направите качествени страници и интерфейси, това е просто необходимо. Струва си да се отбележи, че е много важно да знаете jquery, за да разберете пълната картина на това, което е написано в кода, тъй като простото копиране не винаги може да ви помогне да научите разбирането на кода. Винаги си струва да си припомним, че езиковите версии се актуализират и някои функции просто могат да изчезнат. Следователно не всички решения могат да бъдат актуални, най-често писмен код просто не работи или не дава резултатът, който бих искал да видя на екрана ми. 






















Свързани публикации