Колко пъти сте се сблъсквали с факта, че сте въвели грешни данни, поради което страницата се презареди и напълно изтрива символите, въведени в полетата. За да поправите това, има доста популярен подход за изграждане на потребителски интерфейс и името му е ajax. Появява се в много проекти и се използва по много начини.
Изпращане на ajax формуляр: свързване на библиотеки
Включете jquery библиотека в index.php.
Има друг начин за включване на jquery в документ. Трябва да изтеглите библиотеката от официалния сайт на jquery, да я поставите в дясната папка и да поставите връзката към нея по следния начин:
Свързване и настройка на документи
1. Създайте.php документ в папката със сайта с всяко удобно за вас име - това ще бъде изпращане на ajax php формата. В него можете да напишете в какъв формат ще се показва текстът със съобщението. Например form1.php.
2. Във вашата папка с javascript файлове създайте.js файл свсяко удобно име. Например form.js.
3. Свържете тази папка с вашия документ.
4. Създайте формуляр със следните параметри:
В него не забравяйте да създадете полета за въвеждане на вашите данни.
5. Отидете до файла form1.php в директорията със сайта, в която напишете:
Сега, когато изпращате формуляра, браузърът ще покаже информация за данните.
В същия файл можете да напишете какво точно ще се показва или как. Можете също да пишете цикли или алгоритми тук.
Изпращане на ajax jquery формуляр
1. В създадения файл form.js трябва да напишете кода, който отговаря за работата на файла след пълното зареждане на страницата на сайта.
$(document).ready(function(){ //Следващият ни код ще работи тук });
2. След това трябва да персонализирате бутона за изпращане. Направете всичко в един и същ файл.
$("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, успех: function(result){ alert(result); } });
Следват подробни описания на всяка настройка.
- тип -това е видът искане, което се подава във формуляра; тъй като струва POST, типът на заявката ще бъде подходящ;
- this - избор на елемент вътре в конструкцията;
- attr - съкратено от привличане (привличане), тоест привлича се определен параметър на избраната цел (форма);
- url - параметър, отговорен за това къде ще бъде изпратена заявката; в този случай това, което е написано в параметрите на формата (form1.php);
- data - определя данни от формуляра;
- contentType - отговаря за изпращането на заглавки към сървъра; в този случай не е необходимо;
- cache - отговорен за запазването на кеша на потребителя;
- processData - отговорен за преобразуването на данни в низ;
- успех - показва резултата от успешно подаване на данни; следователно, ако изпращането на данни е било успешно, тогава действията на функцията се изпълняват.
4. Готово, сега при изпращане на ajax формуляра ще получите данни без да опреснявате страницата.
Резултатът може да бъде променен с помощта на файла form1.php, където можете да посочите какво точно ще се покаже като резултат. Например
Можете да експериментирате и да създадете проверка за правилното въвеждане на определени данни: ако данните не са правилни, тогава се показва желаното съобщение, в противен случай то пренасочва към правилната страница. Възможни са и много други неща, каквото сърцето ви пожелае.
Има също изпращане на данни към сървъра асинхронно. Това е, когато потребителят въвежда текст и той веднага се маркира в червено, което показва, че въведените данни не са правилни. За товаима много ръководства в интернет, където всичко е ясно обяснено и показано с примери.
Заключение
Несъмнено ajax е полезен инструмент в изграждането на уебсайтове. За да направите висококачествени страници и интерфейси, това е просто необходимо. Струва си да се отбележи, че е много важно да знаете jQuery, за да разберете напълно картината и написаното в кода, защото простото копиране и поставяне не винаги може да ви помогне и да ви научи да разбирате кода. Винаги си струва да помните, че езиковите версии се актуализират и някои функции може просто да изчезнат. Следователно не всички решения може да са подходящи, често написаният код просто не работи или не дава резултата, който бихте искали да видите на екрана си.
