Wytłumaczenie skryptu ajax

Question

Moglibyście mi wytłumaczyć krok po kroku ten skrypt? Byłbym bardzo wdzięczny...

    $("#dane").submit(function(){
        
            var formData = new FormData(this);
        
            $.ajax({
                url: "skrypt.php",
                type: 'POST',
                data: formData,                                            // cale do nauka
                async: false,
                success: function (data) {
                 document.getElementById("liczby").innerHTML =data;
                },
                cache: false,
                contentType: false,
                processData: false
                });
                return false;

Answer 1

$("#dane").submit(function(){

Po naciśnięciu na submit o id="dane" odpala się ta funkcja.

var formData = new FormData(this);

Zwraca bieżącą wartość z formularza.

url: "skrypt.php",

Wysłanie zapytania (request xhr) do servera, do skryptu o nazwie skrypt.php.

type: 'POST',

Ustawienie metody z której będzie się komunikować server z client'em, ta metoda to POST, a nie GET. Czyli nie będzie nic widać w pasku adresu.

data: formData,            

Wysłanie danych do servera (skryptu np. PHP).

async: false,

https://stackoverflow.com/questions/1478295/what-does-async-false-do-in-jquery-ajax

Does it have something to do with preventing other events on the page from firing?

Yes.

Setting async to false means that the statement you are calling has to complete before the next statement in your function can be called. If you set async: true then that statement will begin it's execution and the next statement will be called regardless of whether the async statement has completed yet.

success: function (data) {
   document.getElementById("liczby").innerHTML =data;
},

Jeśli połączenie z serverem (skryptem np. PHP) się powiodło to wykonaj funkcję.

cache: false,

To znaczy, że jest wyłączone indeksowanie pamięci podręcznej, ciasteczka (cookies) się nie zapisują.

contentType: false,

Domyślnie jest to: 'application/x-www-form-urlencoded; charset=UTF-8', czyli informujesz przeglądarkę jaki typ zawartości wysyłasz i w jakim kodowaniu.

https://stackoverflow.com/questions/18701282/what-is-content-type-and-datatype-in-an-ajax-request

processData: false

Domyślnie (true) przekazuje dane w data option jako object (techicznie coś innego niż string). Ustawione na true, wysyła zapytanie i przetwarza dane, gdy jest na false traktuje to jako zwykły tekst, są to nieprzetworzone dane. W skrócie: true -> przetwarza dane, false -> nie przetwarza danych, cokolwiek, by to nie znaczyło.

http://api.jquery.com/jquery.ajax/

return false;

Zwróć false po zakończeniu połączenia/funkcji.

Moja subiektywna opinia jest taka, że proponowałbym Tobie, abyś nauczył się czystego JavaScript'u, a później ewentualnie douczył się JQuery, bo tak na marginesie ta biblioteka nie jest do niczego potrzebna.

https://blog.garstasio.com/you-dont-need-jquery/ajax/

Comments

Dziękuje Ci,. Byłem pewny że zaraz bedzie hejt że google nie boli itd :D Dzięki!