Jquery zamieszcza przykładowe parametry danych. Jak pisać Ajax, pobierać i wysyłać żądania w czystym JavaScript
Funkcja jQuery $.post() umożliwia pobranie danych z serwera za pomocą żądania HTTP z wykorzystaniem metody POST. Aby pobrać dane przy użyciu metody żądania HTTP DOSTAWAĆ możesz użyć funkcji jQuery $.get().
Należy pamiętać, że funkcja $.post() jest skróconą wersją funkcji $.ajax() z następującymi parametrami:
$.ajax(( typ : "POST " // Metoda HTTP zastosowana dla żądania url : "url ", // ciąg zawierający adres URL, na który wysyłane jest żądanie dane: dane, // dane, które zostaną wysłane do sukces serwera: sukces, // funkcja wywołania zwrotnego wywoływana, jeśli żądanie AJAX zakończy się pomyślnie dataType: "dataType" // typ danych, jaki spodziewasz się otrzymać z serwera));
metoda DOSTAWAĆ w odróżnieniu POST Po przesłaniu formularza zebrane informacje przekazywane są jako część adresu URL:
Url?name=wartość&nazwa=wartość // Metoda GET wykorzystuje pary nazwa=wartość
Podczas wysyłania danych metodą POST dane są przesyłane w taki sposób, że użytkownik nie widzi już danych przesłanych do modułu obsługi formularza (dodaje dane formularza w treści żądania http, które nie są wyświetlane w adresie URL).
Podczas pracy z metodami HTTP należy zwrócić uwagę na pewne niuanse DOSTAWAĆ I POST:
- metoda DOSTAWAĆ ogranicza ilość informacji przesyłanych w adresie URL (około 3000 znaków), metoda POST nie ma takich ograniczeń.
- Nigdy nie używaj tej metody DOSTAWAĆ, jeśli chcesz przesłać wrażliwe dane (na przykład hasło użytkownika, ponieważ zostanie ono przesłane w ciągu adresu URL - w postaci zwykłego tekstu).
- Strona wygenerowana metodą DOSTAWAĆ, możesz oznaczyć go zakładką (adres strony będzie zawsze unikalny) oraz stroną wygenerowaną metodą POST Nie jest to możliwe, ponieważ adres strony się nie zmienia (w adresie URL nie są przesyłane żadne dane).
- Należy pamiętać, że przy użyciu metody DOSTAWAĆ Dane możesz przekazać nie poprzez formularz, a poprzez adres URL strony.
Strony ładowane funkcją $.post() nigdy nie są buforowane, dlatego też wartości cache (określa czy strony będą buforowane, domyślnie true ) i ifModified (sprawdza pola nagłówka Last-Modified, domyślnie false ) parametry funkcji jQuery .ajaxSetup() (ustawia wartości domyślne dla przyszłych żądań AJAKS) nie będzie mieć wpływu na te zapytania.
Dodano w wartościach parametrów jQuery 1.0| adres URL | Linia zawierająca Adres URL adres, na który jest wysyłany AJAKS wniosek. Wymagany parametr. |
| dane | Obiekt lub ciąg znaków, który wraz z plikiem zostanie wysłany na serwer AJAKS wniosek. |
| powodzenie | Funkcja wywołania zwrotnego wywoływana if AJAKSżądanie zakończy się pomyślnie. Parametr opcjonalny. Funkcja przyjmuje następujące parametry:
|
| typ danych | Określa typ danych, które chcesz otrzymać z serwera. Jeśli typ danych nie zostanie określony, jQuery spróbuje go określić na podstawie typu MIME z odpowiedzi ( XML-a typ MIM spowoduje XML, począwszy od jQuery 1.4 json da przedmiot JavaScript, scenariusz wykona skrypt, a wszystko inne zostanie zwrócone jako ciąg znaków). Parametr opcjonalny. Dostępne typy (wynik przekazywany jest jako pierwszy argument funkcji zwrotnej sukcesu):
|
W tym przykładzie wiążemy JavaScript obsługa zdarzenia „submit” (obsługa przesłania formularza), która uruchamiana jest w momencie wysłania formularza (w naszym przypadku wypełnienia) po kliknięciu elementu z typem przesyłania (przycisk wysyłania formularza).
Dodatkowo tworzymy zmienną zawierającą zakodowany zestaw elementów formularza w postaci ciągu znaków – wynik uruchomienia metody .serialize(). Następnie za pomocą funkcji jQuery $.post() wykonujemy asynchroniczne żądanie AJAX z następującymi parametrami:
- url to plik, do którego uzyskujemy dostęp („user.php”), zawiera on następujący kod PHP:
Ponieważ żądanie postu jest najczęściej wykorzystywane podczas wysyłania danych z formularza, korzystamy z formularza po stronie klienta:
$("#loginForm").submit(function(event) ( // Zapobieganie regularnemu przesyłaniu formularzy event.preventDefault(); $.post("ajax.php", ("login":$("#login"). val(), "hasło": $("#hasło").val()), funkcja(dane) ( $("#result").html(dane); ));Zatem część serwera, do której będzie miał dostęp formularz – plik ajax.php – pozostaje taka sama. Tylko w tym przypadku teraz dla parametru data w metodzie post bierzemy dane z pól tego formularza.
Pamiętaj, że blokujemy normalne przesyłanie formularza (event.preventDefault();), w przeciwnym razie doszłoby do przekierowania.
Serializacja formularzaPonieważ formularze często nie są ograniczone do dwóch pól, łatwiej jest zastosować serializację formularzy. Serializacja odbywa się metodą serialize i w efekcie tworzy obiekt javascript, którego właściwości odpowiadają polom formularza. Wartości przechowywane przez te właściwości są takie same, jak wartości odpowiednich pól formularza.
Zastosujmy więc serializację formularza:
$("#loginForm").submit(function(event) ( // Zapobieganie regularnemu przesyłaniu formularzy event.preventDefault(); $.post("ajax.php", $("#loginForm").serialize(), funkcja (dane) ( $("#result").html(dane); ));W przeciwieństwie do poprzedniego przykładu, mamy tu dwie różnice. Po pierwsze, zauważ, że pola wejściowe mają atrybut name. Podając parametr data, serializujemy dane formularza za pomocą metody serialize: $("#loginForm").serialize() . W tej metodzie parametry przekazywane są do treści żądania. Ponadto nazwy parametrów są wartościami atrybutów nazw pól wejściowych. Wartości parametrów to odpowiadające wartości wprowadzone w pola tekstowe.
I tak za pomocą php możemy wyodrębnić te wartości: $login=$_POST["login"] .
W tym artykule powiem Ci jak napisać czysty JavaScript i Ajax bez korzystania z bibliotek.
Ajax to technologia używana z JavaScriptem. Używając Ajaxa, możesz wysyłać żądania GET, POST i bez odświeżania strony.
Najpierw musimy zrozumieć, jak działa Ajax. Ajax działa w JavaScript przy użyciu standardowej funkcji XMLHttpRequest, ale w IE trzeba użyć funkcji ActiveXObject („Microsoft.XMLHTTP”).Pokażę Ci na przykładach jak to wszystko działa.
Zaczynajmy.Aby skrypt działał w różnych przeglądarkach, musisz sprawdzić obiekt Ajax.
Oto kod weryfikacyjny:
Var M = (); // Tutaj tworzymy obiekt do tworzenia metod i właściwości. M._xhr = funkcja())(spróbuj (this.a = nowy ActiveXObject("Msxml2.XMLHTTP");) catch (e) (spróbuj (this.a = nowy ActiveXObject("Microsoft.XMLHTTP");) catch ( E ) (this.a = false;)) if(!this.a && typeof XMLHttpRequest!="niezdefiniowany") ( this.a = nowy XMLHttpRequest();)zwróć this.a;)
Następnie musisz utworzyć kilka funkcji, aby uprościć kod i uczynić go wygodniejszym. Oto kod:M._d = dokument; M._func = funkcja(obj) (zwróć Obiekt.prototyp.toString.call(obj) === ""; ) M._array = funkcja(obj) ( zwróć Obiekt.prototyp.toString.call(obj) === ""; ) M._ge_by_tag = funkcja(id)( this.p = M._d.getElementsByTagName(id); this.ct = this.p.length; this.count = 0;do(zwróć to.p;to .count++;)while(this.count = 200 && r.status< 300) { this.text = r.responseText;if(d.onDone) d.onDone(this.text, r); else if(d.onJsonDone) d.onJsonDone(eval("("+this.text+")"),r); else if(d.onFail) d.onFail = ""; }else {alert(r.status);}}}}}
Teraz musisz zrozumieć kod:R.setRequestHeader("Typ zawartości", "aplikacja/x-www-form-urlencoded");r.setRequestHeader("X-Requested-With", "XMLHttpRequest");
Ta linia oznacza, że używamy Ajaxa.
Dalej.R.open("POST", link, prawda); r.wyślij(q);
I ten moduł obsługi otwiera żądanie do serwera, gdzie send wysyła dane.
Ten kod dotyczy żądania POST, ale w przypadku żądania GET musisz trochę zmienić. Po prostu nie musisz wysyłać danych za pomocą funkcji send. Aby wysłać żądanie GET i jego dane, wystarczy dodać „+”?”+q” po linku w otwartym. Tutaj przesyłamy dane w postaci zwykłego tekstu. Na przykład:R.open("GET", link+"?"+q, prawda); r.send(null); // Wpisz tutaj wartość null. ponieważ nic nie trzeba wysyłać.
test.php?text=Witaj, świecieTo wszystko z kodem. Teraz jak użyć kodu.
Oto przykład:
test demonstracyjny window.onload = funkcja())( M.get("/test.php",( // M.post lub M.get query:(text:"hello"), // Zapytanie o wartość onDone:function( a )( // Jeśli wszystko jest w porządku, wyświetl wynik. M._ge_by_id("result").innerHTML = a; ), onFail:function(a)( // A jeśli nie, pokaż alert o błędzie(" Błąd"); ) ));
Istnieje również możliwość konwersji wyniku do formatu JSON.
Oto kod:Ten artykuł zawiera przykłady kodu, którego używam do wysyłania żądań ajax do serwera za pomocą jQuery. Ich zadania mogą być różne, dlatego można zastosować dla nich różne funkcje, które ułatwiają pisanie kodu.
Żądanie danych HTML za pomocą funkcji LoadTo najprostsze żądanie ajaxowe poprzez jQuery z odebraniem danych HTML i wstawieniem ich do elementu dom z id="result" (zastępowanie zawartości elementu):
$("#wynik").load("");
Bardziej zaawansowany przypadek użycia obciążenia:
$("#result").load("", (par1:wartość1, par2:wartość2, ...), funkcja(odpowiedź, status, xhr) ( if (status == "sukces") ( alert("Gotowe "); ) else ( alert("Błąd: " + xhr.status + " " + xhr.statusText); ) ));
W tym przykładzie do serwera przekazywane są również parametry, a po otrzymaniu odpowiedzi sprawdzane jest, czy nie wystąpił błąd (np. nie otrzymano odpowiedzi z serwera) i wykonywane są różne działania.
Żądania Ajax z funkcjami GET i POSTFunkcje te wysyłają żądanie Ajax przy użyciu metod http get i post. Podam kilka przykładów ich zastosowania.
$.get("", // adres do wysłania żądania (par1:val1, par2:val2, ...), // przesłanie części danych za pomocą funkcji żądania (data) ( // niektóre akcje z tymi otrzymanymi od dane danych serwera));
Nie jest wymagany transfer danych ani wykonywanie jakichkolwiek działań po otrzymaniu odpowiedzi z serwera, tj. w tym przypadku linie 3 i 4-6 można w razie potrzeby usunąć i tym samym jeszcze bardziej skrócić kod.
Rodzaj danych odbieranych z serwera można określić dodając dataType (patrz niżej) - domyślnie jest on ustalany automatycznie.
Korzystanie z postu jest podobne, ale w poniższym przykładzie używam wywołania funkcji po otrzymaniu odpowiedzi z serwera.
$.post("", (par1:val1, par2:val2, ...), onSuccess); funkcja onSuccess(data) ( // niektóre akcje na danych otrzymanych z serwera data )
W rzeczywistości funkcje get i post są skróconymi wersjami funkcji ajax, co omówię poniżej.
Pobieranie danych JSON za pomocą getJSONgetJSON to skrócona wersja żądania ajax wykorzystującego metodę GET i odbierającego dane w postaci json. Metoda jest wygodna na przykład do uzyskania pewnego rodzaju tablicy danych, a następnie pracy z nią.
$.getJSON("", (par1:val1, par2:val2, ...)).success(function(data) ( // zrób coś z danymi, na przykład przejrzyj je i wypisz: for (var i =0; i 10, "tekst" => "linia testowa 1" $arr = tablica("id" => 20, "tekst" => "linia testowa 2"); => "linia testowa 3"); echo json_encode($arr);
W ten sam sposób możesz przesyłać obiekty stdClass z serwera, konwertując je na ciąg json.
Proste żądanie ajax za pośrednictwem jQuery przy użyciu funkcji AJAXTeraz podam przykład prostego żądania get wykorzystującego funkcję ajax i odbierającego dane HTML.
$.ajax(( url: "", typ danych: "html", sukces: funkcja(dane) ( // niektóre akcje na otrzymanych danych) ));
Żądanie do serwera jest wykonywane przy użyciu metody get, ponieważ parametrem odpowiedzialnym za typ żądania jest domyślnie GET;
Bardziej złożony przykład żądania ajax przy użyciu jQueryPrzykład realizacji żądania z wykorzystaniem funkcji ajax z transmisją danych metodą post i przetwarzaniem zdarzeń. Poniżej opiszę dodatkowe parametry, które są najczęściej wykorzystywane.
$.ajax(( url: "", typ: "post", dane: "", // może być ciągiem znaków lub możesz na przykład tak: $("input, input:checked, input:checked , wybierz, obszar tekstowy") typ danych: "json", beforeSend: funkcja() ( $("#sendajax").button("loading"); ), ukończ: funkcja() ( $("#sendajax").button („reset”) ; ), sukces: funkcja (json) ( // niektóre akcje na odebranych danych), błąd: funkcja (xhr, ajaxOptions, rzuconyError) ( alert(thrownError + „\r\n” + xhr.statusText + "\r \n" + xhr.responseText);
Przycisk Prześlij:
Wysłać
W powyższym przykładzie po kliknięciu w przycisk najpierw zmienia się stan przycisku (tekst na nim zmienia się na „Wysyłanie...” i staje się nieaktywny), co odbywa się za pomocą parametru beforeSend. Następnie wysyłane jest żądanie z przekazaniem niezbędnych danych. Po otrzymaniu odpowiedzi z serwera stan przycisku powraca do poprzedniego stanu (tekst zmienia się na „Wyślij” i staje się aktywny). Odpowiedź jest odbierana w postaci danych json.
Opiszę pokrótce parametry wysyłania żądania ajax, które najczęściej mogą się przydać:
adres URL Adres wysłania żądania Ajax typ Jak wysłać żądanie GET lub POST dane Dane wysyłane na serwer. Może występować ciąg znaków z parametrami i ich wartościami w formacie par1=val1&par2=val2&..., obiekt jQuery, np. $("input"), lub inne dane. typ danych Rodzaj danych odbieranych z serwera. Może to być HTML, JSON, tekst, skrypt i XML. Pamięć podręczna Buforowanie żądania przez przeglądarkę (false - nie buforuj). asynchroniczny Asynchroniczna realizacja żądania, tj. program kontynuuje wykonywanie bez oczekiwania na odpowiedź z serwera. Jeśli podasz wartość false, żądanie zostanie wykonane synchronicznie, a strona nie będzie na nic odpowiadać, dopóki nie otrzyma odpowiedzi z serwera. przetwarzać dane Konwersja przesłanych danych do formatu URL. Jeśli chcesz, aby dane nie były konwertowane, ustaw wartość false. Na przykład podczas wysyłania obrazu na serwer lub danych XML. Typ zawartości Typ przesyłanych danych, domyślnie „application/x-www-form-urlencoded; charset=UTF-8”. Jeśli podasz false, to typ nie zostanie przekazany w nagłówku, co może być konieczne np. przy wysyłaniu obrazu na serwer. przedWyślij Funkcja wykonywana przed wysłaniem żądania ajax. kompletny Funkcja wykonywana po otrzymaniu odpowiedzi z serwera (dowolnej odpowiedzi, pomyślnej lub nie). powodzenie Funkcja wykonywana, gdy żądanie zakończy się pomyślnie. błąd Funkcja do wykonania w przypadku błędu. Poniżej podam jeszcze kilka przykładów wykorzystania żądań ajaxowych.
Przesłanie formularza ze wszystkimi danymi poprzez żądanie ajax za pośrednictwem jQueryPrzykładowy kod formularza HTML:
Twoje imię:
Kod JavaScript:
$("#myform").submit(function(e) ( e.preventDefault(); $.ajax(( typ: $(this).attr("method"), url: "", dane: $(this ).serialize(), async: false, dataType: "html", sukces: funkcja(wynik)( alert("Formularz przesłany"); ) ));
Aby zapobiec ponownemu załadowaniu strony po kliknięciu przycisku „wyślij”, najpierw zastępujemy domyślne działania przeglądarki za pomocą funkcji e.preventDefaults() .
W parametrze data przekazujemy wszystkie pola formularza za pomocą $(this).serialize() - funkcja ta konwertuje wszystkie wejścia i selekcje na ciąg znaków odpowiedni do przesłania na serwer.
Wykorzystano tu także parametr async: false, dzięki czemu do czasu wysłania formularza na serwer nie można nic więcej kliknąć ani zrobić.
Wysyłanie obrazu lub pliku z żądaniem ajax za pośrednictwem jQueryProblem przesłania pliku lub obrazu na serwer bez przeładowania strony pojawia się dość często. W tym przykładzie przyjrzę się jednocześnie 2 funkcjom: wybraniu pliku poprzez kliknięcie przycisku, który można dowolnie zaprojektować oraz wyświetleniu postępu podczas przesyłania pliku na serwer za pomocą żądania Ajax.
Kod HTML będzie wyglądał następująco:
Załaduj obrazek
#addfile ( pozycja: względna; przepełnienie: ukryty; szerokość: 180px; wysokość: 34px; ) #load_file ( pozycja: bezwzględna; góra: 0; lewa: 0; szerokość: 180px; wysokość: 34px; rozmiar czcionki: 0px; krycie : 0; filtr: alfa(opacity:0); #load_file:hover (kursor: wskaźnik;)
Istotą pomysłu jest to, że na górze przycisku wyświetlane jest standardowe wejście służące do wyboru pliku, ale jest ono całkowicie przezroczyste i ma takie same wymiary jak przycisk. W ten sposób użytkownik widzi przycisk, ale kiedy najedzie na niego kursorem, tak naprawdę najeżdża na dane wejściowe. Odpowiednio, kiedy kliknie przycisk, faktycznie zostanie naciśnięte wejście wyboru pliku. Aby zapobiec miganiu kursora po wybraniu pliku, rozmiar czcionki jest ustawiony na 0px.
Teraz kod javascript do wysyłania pliku na serwer wyświetlający postęp:
$(funkcja() ( $("#load_file").on("change", loadingfile); )); funkcja loadingfile() ( $("#addfile span").html("załadowano 0%"); files = $("#load_file").files; var formularz = new FormData(); form.append("prześlij" , pliki); $.ajax((url: "", typ: "POST", dane: formularz, pamięć podręczna: false, ProcessData: false, contentType: false, xhr: funkcja() ( var myXhr = $.ajaxSettings.xhr (); if (myXhr.upload) ( myXhr.upload.addEventListener("postęp",ShowProgress, false); ) return myXhr; ), ukończ: funkcja(dane)( $("#addfile span").html(" Załaduj obraz"); $("#load_file").val(""); ), sukces: funkcja(wiadomość)(alert(wiadomość); ), błąd: funkcja(jqXHR, textStatus, errorThrown) ( alert(textStatus+" "+errorThrown); ) )); ) funkcja ShowProgress(e) ( if(e.lengthComputable)( $("#addfile span").html("Loaded "+Math.round(100*e.loaded/e. łącznie)+"%");
Podczas przesyłania pliku na serwer przycisk pokaże, ile % zostało już przesłanych na serwer. Po zakończeniu ładowania nazwa przycisku zostaje zwrócona w niezmienionej postaci, a wartość wejściowa pliku zostaje ustawiona na pustą, aby można było ponownie wybrać nowy plik.
Przykład części serwerowej w PHP (na prośbę Evgeniy):
$wiadomość = ""; if (empty($_FILES["upload"]["nazwa"]) || $_FILES["upload"] == "none" ( $message = "Nie wybrałeś pliku"; ) else if ($ _FILES[ "upload"]["size"] == 0 || $_FILES["upload"]["size"] > 9437184) ( $message = "Rozmiar pliku nie mieści się w normie (maksymalnie 9 MB)" ; ) else if ( ($_FILES["typ"] != "obraz/jpeg") && ($_FILES["przesłanie"]["typ"] != "obraz/pjpeg") && ( $_FILES["upload "]["type"] != "image/gif") && ($_FILES["upload"]["type"] != "image/png")) ( $message = "Tylko JPG , można przesyłać obrazy GIF i PNG."; ) else if (!is_uploaded_file($_FILES["upload"]["tmp_name"])) ( $message = "Coś poszło nie tak. Spróbuj przesłać plik ponownie." ; ) else ( $ ftype = $_FILES["upload"]["type"]; $fname = "nowa nazwa_obrazu.".($ftype == "obraz/gif" ? "gif": ($ftyp == "obraz /png" ? " png": "jpg")); if (przenieś_przesłany_plik($_FILES["upload"]["tmp_name"], $_SERVER["DOCUMENT_ROOT"].."/files/.$fname)) ( $message = "Obraz załadowany pomyślnie."; ) else ( $message = "Coś poszło nie tak. Spróbuj ponownie pobrać plik."; ) ) exit($wiadomość);
Informacje o przesłanym obrazie będą zawarte w $_FILES["upload"] , ponieważ Skrypt dodał plik w następujący sposób: form.append("upload", files); W związku z tym wszystko, co jest wymagane od programu PHP, to sprawdzić, czy plik odpowiada oczekiwanym parametrom, przenieść plik do żądanego folderu (w przykładzie folder plików) pod żądaną nazwą (w przykładzie nowa nazwa_obrazu) i zwróć odpowiedź do przeglądarki, która w moim przykładzie jest po prostu wyświetlana użytkownikowi za pomocą polecenia alert(message);
Sytuacji, w których możliwe, a nawet konieczne jest użycie żądań Ajax jest bardzo wiele i nie sposób ich tu wszystkich omówić. Jeżeli jednak masz jakieś sugestie, jakie inne przykłady warto tu dodać, napisz je w komentarzach.