„AJAX“ Вашата клиентска заявка

Кой не харесва „AJAX“? Добре. Ние се движим.

С AJAX вашият потребител не трябва да напуска страницата по време на подаване на формуляр и това добавя един вид „безпроблемно“ потребителско изживяване. За разработчиците обаче може да стане скучно и отнемащо време винаги да кодират логиката за конкретни сценарии. Ами ако можем да имаме унифициран пакет, който обработва всички наши заявки от страна на клиента и показва резултата на уеб страницата, без да пише нито един ред код? Това прави „MMUO“.

Този пакет, както подсказва името (Mmuo означава Духна езика игбо), изпълнява множество функции и задачи, които няма да видите. Въпреки това, в името на днешната ни статия ще се съсредоточим върху функцията за заявка на AJAX (можете да потърсите документацията за други невероятни функции). Просто инсталирайте пакета така (ако използвате npm или със съответната команда за управление на пакети, която използвате):

$ npm install mmuo

И вие сте вътре. Пакетът разкрива функция registerEventListeners(), която вече има някои слушатели на събития и класове, за да можете просто да се потопите и да използвате. Просто импортирайте функцията във вашия проект и я използвайте веднага. Пример:

import {registerEventListeners} from "mmuo"

//Always nice to register events when the DOM has been fully loaded
window.addEventListener("DOMContentLoaded", function() {
    registerEventListeners()
});

Или, ако предпочитате да се свързвате чрез <script> във вашия HTML документ, особено ако не използвате пакет, добавете префикс към функцията(ите) с 'mmuo':

<script src="/path_to_node_module_or_installation_directory/mmuo/dist/mmuo.umd.js"></script>   

<script>
    window.addEventListener("DOMContentLoaded", function() {
        mmuo.registerEventListeners()
    });
</script>

Тази функция вече има някои регистрирани събития със „специални“ имена на клас или ID, на които можете просто да дадете всеки елемент. Всички възможни имена вече са документирани в официалната документация.

За да изпълните AJAX заявка, препоръчваме всеки тип вход да бъде поставен в div за правилен стил и подравняване. Ако използвате нашата функция registerEventListeners(), тогава се уверете, че атрибутът за идентификатор или клас е зададен на form. Пример:

<form action="submit" id="form" method="post">
    <div>
        <input type="text" name='name'>
    </div>

    <div>
        <input type="email" name='email'>
    </div>

    <div>
        <input type="password" name='password'>
    </div>
    
    <div>
        <input type="submit" value="Log In" />
    </div>
</form>

Можете да поставите колкото искате входни елементи и те ще бъдат изпратени на вашия сървър.

Важно е вашият бутон за изпращане да има атрибут type="submit", за да можем да идентифицираме тригера. Също така, доколкото е възможно, опитайте се да оградите вашия input маркер(и) в div.

По подразбиране „Mmuo“, използвайки Axios, очаква JSON отговор със свойство „message“, което съдържа данните, които да бъдат показани на потребителя при успешна заявка. Ако не намери такъв, целият отговор (от сървъра) ще бъде показан на потребителя. HTTP кодът на състоянието се използва за откриване на успешна (или неуспешна) заявка. Обикновено това ще означава, че заявките, които са успешни, трябва да имат код на състоянието 200, докато неуспешните заявки обикновено трябва да имат код на състояние 422. Ако използвате PHP и се притеснявате за генерирането на подходящ хедър и/или предупреждение, можете да използвате този популярен пакет Zam, който се интегрира лесно с този преден пакет.

Можете също така да посочите във вашия отговор за грешка (или неуспешен) свойство „target“, което се отнася до стойността на атрибута nameна конкретен вход на формуляр, където съответното съобщение за грешка трябва да се покаже следващ. Например, ако грешката възникне(е) по време на съобщение за валидиране/дезинфекция на имейл, така че искате да докладвате тази грешка на потребителя, има смисъл да покажете това съобщение за грешка до или близо до зоната за въвеждане. Просто въведете стойността на атрибута „име“ на конкретния вход и този пакет ще се погрижи за останалото.

Вашият отговор обикновено ще бъде нещо подобно в този случай:

{
    "message": {
        "message":"Please enter your email address here",
        "target":"email" //This refers to the HTML input form that this validation message for (if any). It is completely optional.
    }
}

Or,

{
    "message":"Please enter your email address here",
    "target":"email" //This refers to the HTML input form 'NAME' that this validation message is meant for (if any). 
}

С горното съответното съобщение за грешка ще се покаже веднага след входния елемент, за който то (съобщението) е предназначено (стига да е зададен съответният HTTP код за състояние. За заявка(и) на формуляр, моля, използвайте 422 за отговор(и) за грешка при работа с валидиране на формуляр).

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

„AJAX“ Вашата клиентска заявка — Най-лесният начин

Подобни въпроси