Bezdôvodný úspech php. S pozdravom, drahý priateľ! Vyžiadanie html údajov pomocou funkcie Load

03.11.2019

Tento článok obsahuje príklady kódu, ktorý používam na odosielanie požiadaviek ajax na server pomocou jQuery. Ich úlohy môžu byť rôzne, preto pre ne môžete využiť rôzne funkcie, ktoré zjednodušujú písanie kódu.

Vyžiadanie html údajov pomocou funkcie Load

Toto je najjednoduchšia požiadavka ajax cez jQuery s prijímaním html údajov a ich vložením do prvku dom s id="result" (obsah prvku je nahradený):

$("#výsledok").načítať("");

Pokročilejší prípad použitia pre zaťaženie:

$("#result").load("", (par1:val1, par2:val2, ...), function(response, status, xhr) ( if (status == "success") ( alert("Hotovo) "); ) else ( alert("Chyba: " + xhr.status + " " + xhr.statusText); ) ));

V tomto príklade sa parametre odovzdávajú aj serveru a po prijatí odpovede sa skontroluje, či nedošlo k chybe (napríklad neprišla odpoveď zo servera) a vykonajú sa rôzne akcie.

Žiadosti Ajax s funkciami GET a POST

Tieto funkcie odosielajú požiadavku Ajax pomocou metód get a post http. Dovoľte mi uviesť niekoľko príkladov ich použitia.

$.get("", // adresa na odoslanie požiadavky (par1:val1, par2:val2, ...), // prenos niektorých údajov s funkciou požiadavky(údaje) ( // niektoré akcie s tými, ktoré boli prijaté od údaje servera ));

Nevyžaduje sa prenos dát, ani vykonávanie žiadnych akcií po prijatí odpovede zo servera, t.j. v tomto prípade je možné riadky 3 a 4-6 v prípade potreby odstrániť a tým ďalej skrátiť kód.

Typ dát prijatých zo servera je možné špecifikovať pridaním dataType (pozri nižšie) – štandardne sa určuje automaticky.

Použitie príspevku je podobné, ale v nasledujúcom príklade používam volanie funkcie po prijatí odpovede zo servera.

$.post("", (par1:val1, par2:val2, ...), onSuccess); function onSuccess(data) ( // niektoré akcie s údajmi prijatými z údajov servera )

V skutočnosti sú funkcie get a post skrátené verzie funkcie ajax, o ktorej budem diskutovať nižšie.

Načítavanie údajov json pomocou getJSON

getJSON je skrátená verzia požiadavky ajax využívajúca metódu GET a prijímanie údajov vo forme json. Metóda je vhodná napríklad na získanie akéhosi poľa dát a následnej práce s nimi.

$.getJSON("", (par1:val1, par2:val2, ...)).success(function(data) ( // urobte niečo s údajmi, napríklad, prejdite cez ne a vytlačte: for (var i =0 i 10, "text" => "testovací riadok 1"); $arr = pole("id" => 20, "text" => "testovací riadok 2"); => "testovací riadok 3");

Rovnakým spôsobom môžete preniesť objekty stdClass zo servera ich konverziou na reťazec json.

Jednoduchá požiadavka ajax cez jQuery pomocou funkcie AJAX

Teraz uvediem príklad jednoduchej požiadavky get pomocou funkcie ajax a prijímania html dát.

$.ajax(( url: "", dataType: "html", úspech: funkcia(údaje) ( // niektoré akcie s prijatými údajmi údajov ) ));

Požiadavka na server sa uskutočňuje pomocou metódy get, pretože parameter zodpovedný za typ požiadavky je štandardne GET;

Zložitejší príklad požiadavky ajax pomocou jQuery

Príklad vykonania požiadavky pomocou funkcie ajax s prenosom dát metódou post a spracovaním udalostí. Nižšie popíšem doplnkové parametre, ktoré sa najčastejšie používajú.

$.ajax(( url: "", typ: "post", data: "", // môže byť reťazec, alebo môžete napríklad takto: $("input, input:checked, input:checked , select, textarea" ) dataType: "json", beforeSend: function() ( $("#sendajax").button("loading"); ), complete: function() ( $("#sendajax").tlačidlo ("reset") , úspech: function(json) ( // niektoré akcie s prijatými údajmi), chyba: function(xhr, ajaxOptions, thrownError) ( alert(thrownError + "\r\n" + xhr.statusText + "\r \n" + xhr.responseText);

tlačidlo Odoslať:

Odoslať

Vo vyššie uvedenom príklade sa po kliknutí na tlačidlo najskôr zmení stav tlačidla (text na ňom sa zmení na „Odosielam...“ a stane sa neaktívnym), čo sa vykonáva pomocou parametra beforeSend. Potom sa odošle žiadosť s prenesenými potrebnými údajmi. Po prijatí odpovede zo servera sa stav tlačidla vráti do predchádzajúceho stavu (text sa zmení na „Odoslať“ a stane sa aktívnym). Odpoveď je prijatá vo forme údajov json.

Stručne popíšem parametre pre odoslanie ajax požiadavky, ktoré môžu byť najčastejšie užitočné:

url	Adresa na odoslanie žiadosti Ajax
typu	Ako poslať žiadosť GET alebo POST
údajov	Údaje odoslané na server. Môže tam byť reťazec s parametrami a ich hodnotami vo formáte par1=val1&par2=val2&..., objekt jQuery, napríklad $("vstup") alebo iné údaje.
dátový typ	Typ údajov prijatých zo servera. Môže to byť html, json, text, skript a xml.
cache	Ukladanie požiadavky do vyrovnávacej pamäte prehliadača (false - neukladať do vyrovnávacej pamäte).
async	Asynchrónne vykonávanie požiadavky, t.j. program pokračuje vo vykonávaní bez čakania na odpoveď zo servera. Ak zadáte false, požiadavka sa vykoná synchrónne a stránka nebude reagovať na nič, kým zo servera nedostane odpoveď.
processData	Konverzia odoslaných údajov do formátu URL. Ak nechcete, aby sa údaje konvertovali, nastavte hodnotu na hodnotu false. Napríklad pri odosielaní obrázka na server alebo xml údajov.
contentType	Typ prenášaných údajov, predvolený "application/x-www-form-urlencoded; charset=UTF-8". Ak zadáte hodnotu false, typ sa neprenesie do hlavičky, čo môže byť potrebné napríklad pri odosielaní obrázka na server.
predOdoslaním	Funkcia vykonaná pred odoslaním požiadavky ajax.
kompletný	Funkcia vykonaná po prijatí odpovede zo servera (akákoľvek odpoveď, úspešná alebo neúspešná).
úspech	Funkcia sa vykoná, keď je požiadavka úspešná.
chyba	Funkcia, ktorá sa má vykonať v prípade chyby.

Nižšie uvediem niekoľko ďalších príkladov použitia žiadostí ajax.

Odoslanie formulára so všetkými údajmi pomocou požiadavky ajax cez jQuery

Vzorový kód html formulára:

Vaše meno:

JavaScript kód:

$("#myform").submit(function(e) ( e.preventDefault(); $.ajax(( typ: $(this).attr("method"), url: "", údaje: $(toto ).serialize(), async: false, dataType: "html", success: function(result)( alert("Form Upload"); ) ));

Aby sme zabránili opätovnému načítaniu stránky po kliknutí na tlačidlo „odoslať“, najprv prepíšeme predvolené akcie prehliadača pomocou e.preventDefaults() .

V parametri data prejdeme všetky polia formulára pomocou $(this).serialize() - táto funkcia konvertuje všetky vstupy a selektuje na reťazec vhodný na odoslanie na server.

Tiež sa tu používa parameter async: false, takže kým sa formulár neodošle na server, nie je možné kliknúť ani urobiť nič iné.

Odoslanie obrázka alebo súboru s požiadavkou ajax cez jQuery

Problém s odoslaním súboru alebo obrázka na server bez opätovného načítania stránky vzniká pomerne často. V tomto príklade sa pozriem na 2 funkcie naraz: výber súboru kliknutím na tlačidlo, ktoré môže byť navrhnuté akýmkoľvek spôsobom, a zobrazenie postupu pri prenose súboru na server pomocou požiadavky Ajax.

html kód bude vyzerať takto:

Nahrajte obrázok

#addfile ( pozícia: relatívna; pretečenie: skryté; šírka: 180px; výška: 34px; ) #load_file ( pozícia: absolútna; hore: 0; vľavo: 0; šírka: 180px; výška: 34px; veľkosť písma: 0px; nepriehľadnosť : 0 filter: alpha(nepriehľadnosť:0);

Podstatou myšlienky je, že nad tlačidlom je zobrazený štandardný vstup pre výber súboru, ktorý je však úplne priehľadný a má rovnaké rozmery ako tlačidlo. Týmto spôsobom používateľ vidí tlačidlo, ale keď naň umiestni kurzor myši, v skutočnosti umiestni kurzor na vstup. Preto, keď klikne na tlačidlo, skutočne sa stlačí vstup na výber súboru. Aby kurzor po výbere súboru neblikal, je veľkosť písma nastavená na 0px.

Teraz javascriptový kód na odoslanie súboru na server zobrazujúci priebeh:

$(funkcia() ( $("#načítať_súbor").on("zmeniť", načítať súbor); )); function loadfile() ( $("#addfile span").html("0% načítané"); files = $("#load_file").files; var form = new FormData(); form.append("upload" , súbory $.ajax(( url: "", typ: "POST", údaje: formulár, vyrovnávacia pamäť: false, processData: false, contentType: false, xhr: function() ( var myXhr = $.ajaxSettings.xhr); (); if (myXhr.upload) ( myXhr.upload.addEventListener("progress",ShowProgress, false); ) return myXhr ), dokončite: function(data)( $("#addfile span").html(" Načítať obrázok"); $("#load_file").val(""); ), úspech: funkcia(správa)( výstraha(správa); ), chyba: funkcia(jqXHR, textStatus, errorThrown) ( výstraha(textStatus+" "+errorThrown); ) )); ) funkcia ShowProgress(e) ( if(e.lengthComputable)( $("#addfile span").html("Loaded "+Math.round(100*e.loaded/e. celkom)+"%");

Pri nahrávaní súboru na server tlačidlo zobrazí, koľko % už bolo prenesených na server. Po dokončení načítania sa názov tlačidla vráti tak, ako bol, a hodnota vstupu súboru sa nastaví na prázdnu, aby bolo možné znova vybrať nový súbor.

Príklad serverovej časti v PHP (na žiadosť Evgeniy):

$správa = "";

if (empty($_FILES["upload"]["name"]) || $_FILES["upload"] == "none") ( $message = "Nevybrali ste súbor"; ) else if ($ _FILES[ "nahrať"]["veľkosť"] == 0 || $_FILES["nahrať"]["veľkosť"] > 9437184) ( $message = "Veľkosť súboru nie je v rámci normy (maximálne 9 MB)" ; ) else if ( ($_FILES["upload"]["type"] != "image/jpeg") && ($_FILES["upload"]["type"] != "image/pjpeg") && ( $_FILES["upload "]["type"] != "image/gif") && ($_FILES["upload"]["type"] != "image/png")) ( $message = "Len JPG" , je povolené nahrávať obrázky GIF a PNG."; ) inak if (!is_uploaded_file($_FILES["upload"]["tmp_name"])) ( $message = "Vyskytol sa problém. Skúste súbor nahrať znova." ; ) else ( $ ftype = $_FILES["nahrať"]["type"]; $fname = "newname_image.".($ftype == "image/gif" ? "gif" : ($ftype == "image /png" ? " png" : "jpg")); if (move_uploaded_file($_FILES["upload"]["tmp_name"], $_SERVER["DOCUMENT_ROOT"].."/files/.$fname))) ( $message = "Obrázok sa úspešne načítal."; ) else ( $message = "Niečo sa pokazilo." Skúste súbor stiahnuť znova."; ) ) exit($message);

Informácie o nahranom obrázku budú obsiahnuté v $_FILES["upload"] , pretože Skript pridal súbor takto: form.append("upload", files);

V súlade s tým všetko, čo od programu PHP vyžaduje, je skontrolovať, či súbor zodpovedá očakávaným parametrom, presunúť súbor do požadovaného priečinka (v príklade priečinok so súbormi) pod požadovaným názvom (v príklade nový_obrázok_názov) a vrátiť prehliadaču odpoveď, ktorá sa v mojom príklade jednoducho zobrazí používateľovi pomocou príkazu alert(správa);

Situácií, v ktorých je možné a dokonca potrebné využívať požiadavky Ajaxu, je veľmi veľa a nie je možné ich tu všetky rozoberať. Ak však máte nejaké návrhy, aké ďalšie príklady by tu mohlo mať zmysel pridať, napíšte ich do komentárov.

Vráti údaje JSON. Používa sa na vrátenie úspešných odpovedí v požiadavkách AJAX. Odpoveď bude vždy obsahovať prvok success=true. Ukončí prácu php skriptu (die).

Nie sú tam žiadne háčiky.

Návraty

null. Zobrazí údaje JSON a ukončí php.

Ak odošlete údaje do parametra $data, pridajú sa: // Typ vrátených údajov pred zakódovaním do JSON: $response = array("success" => true); // ak nie je zadané $data $response = array("success" => true, "data" => $data); // ak je zadané $data Použitie wp_send_json_success($data, $status_code);
$data(reťazec/pole/číslo/objekt/logická hodnota) Údaje, ktoré sa pridajú k výsledku v prvku dátového poľa pred zakódovaním do JSON. Stavový kód HTTP na nastavenie. Aké sú stavové kódy? C WP 4.7.
Predvolená hodnota: null Príklady #1 Určenie úspešného spracovania požiadavky AJAX

Tento kód jQuery odošle požiadavku AJAX do súboru pluginu ajax/save_field.php:

JQuery(document).ready(function($)( $("#btn_save").click(function(e)( e.preventDefault(); $.post(pluginUrl + "ajax/save_field.php", $(" #my-form").serialize(), function(json)( if(json.success) alert(json.data.message); else alert("Error" + json.data); )); )); ) );

Toto je kód v súbore save_field.php, ktorý spracováva odoslanú požiadavku. Tu je návod, ako použiť wp_send_json_success() :

Najjednoduchší spôsob práce s AJAXom je prepojiť framework jQuery, čo je presne to, čo som urobil. jQuery nám poskytuje ľahko zrozumiteľnú a ľahko použiteľnú syntax na odosielanie požiadaviek AJAX, tak prečo to nevyužiť?

Vytvorenie skriptu js

Syntax súboru validate.js

$(document).ready(function())( var email = ""; $("#email").keyup(function())( var value = $(this).val(); $.ajax(( zadajte: "POST", url:"email.php", data:"email="+hodnota, success:function(msg)( if(msg == "valid")( $("#message").html( "Tento e-mail je možné použiť. Tento e-mail je už prijatý." ) ) )); "Prosím, vložte údaje do všetkých e-mailov" )else( $.ajax(( typ: "POST", url:"email.php", data:"add_email="+email, success:function(msg)( $); ("#správa" ).html(msg) ));

PHP handler

Tento skript dostane požiadavku POST od klienta, spracuje ju a vráti výsledok. AJAX prečíta výsledok a na základe neho urobí rozhodnutie.
Syntax súboru Email.php

$connection = mysqli_connect("localhost","email","email","email"); if(isset($_POST["e-mail"]) && $_POST["e-mail"] != "")( $email = $_POST["e-mail"]; $email = mysqli_real_escape_string($connection,$email); ak (!filter_var($email, FILTER_VALIDATE_EMAIL))( echo "invalid"; )else( $sql = "SELECT id FROM email WHERE email="$email""; $result = mysqli_query($connection,$sql); if( mysqli_num_rows($result) == 1)( echo "invalid"; )else( echo "valid"; ) ) ) if(isset($_POST["add_email"]) && $_POST["add_email"] != "" )( $email = mysqli_real_escape_string($connection,$_POST["add_email"]); $sql = "INSERT INTO email(email) VALUES("$email")"; if(mysqli_query($connection,$sql))( echo Success"; )else( echo "Chyba"; ) )

V našom PHP skripte je to najbežnejší kód, ktorý spracuje požiadavku na odoslanie a vytlačí určitý text na stránku. Výsledkom je, že AJAX odošle požiadavku php skriptu, skript ho spracuje a vytvorí výsledok, AJAX prečíta výsledok a zmení stránku v reálnom čase.

AJAX odošle skriptu požiadavku POST pomocou tohto kódu:

$.ajax(( type:"POST", url:"email.php", data:"email="+hodnota, success:function(msg)( if(msg == "valid")( $("#message") ").html("Tento e-mail je možné použiť."); email = hodnota; )else( $("#správa").html("Tento e-mail je už prijatý."); ) ) ));

typ - Typ požiadavky, POST alebo GET. V našom prípade POST;
url - adresa skriptu, na ktorý je odoslaná požiadavka;
údaje - údaje, ktoré sa prenášajú v žiadosti;
úspech - čo robiť v dôsledku úspešného vykonania žiadosti. V našom prípade sa funkcia volá;

V samotnom skripte sa pri každom zadaní znaku do poľa email kontroluje prítomnosť emailu v databáze. V skripte je za spracovanie vstupu zodpovedná sekcia $("#email").keyup(function()()); , ktorý skontroluje stlačenie klávesu v poli s id = "email" .
Ako vidíte, kód je pomerne jednoduchý a nevyžaduje špeciálne zručnosti na pochopenie, všetko je spojené so spracovaním udalostí keyup() - stlačenie klávesu, kliknutie () - kliknutie myšou na prvok. Potom nasleduje AJAX požiadavka a odpoveď zo skriptu. Pomocou php a ajaxu tak môžete získať takmer neobmedzené možnosti vytvárania interaktívnych stránok.
Tento kód nepredstiera, že je kvalitný, ale ak ho vyviniete, pridáte správne overenia na úrovni klienta a servera a zavediete css, môžete ho použiť vo svojich projektoch.
Ak máte nejaké otázky, neváhajte napísať komentáre.
Prajem pekný deň a do skorého videnia :)

AJAX je skupina technológií, ktoré sa používajú pri vývoji webových aplikácií na vytváranie interaktívnych aplikácií. AJAX vám umožňuje prenášať dáta zo servera bez opätovného načítania stránky. Týmto spôsobom môžete dosiahnuť veľmi pôsobivé výsledky. A knižnica jQuery výrazne zjednodušuje implementáciu AJAX pomocou vstavaných metód.

Na implementáciu technológie použite metódu $.ajax alebo jQuery.ajax:

$.ajax(vlastnosti) alebo $.ajax(url [, vlastnosti])

Druhý parameter bol pridaný vo verzii 1.5 jQuery.

url - adresa požadovanej stránky;

vlastnosti - vlastnosti dopytu.

Úplný zoznam možností nájdete v dokumentácii jQuery.

V tomto návode používame niekoľko najčastejšie používaných parametrov.

úspech (funkcia) - táto funkcia sa volá po úspešnom dokončení požiadavky. Funkcia prijíma 1 až 3 parametre (v závislosti od verzie použitej knižnice). Prvý parameter však vždy obsahuje údaje vrátené zo servera.

dáta (objekt/reťazec) - užívateľské dáta, ktoré sú odovzdané požadovanej stránke.

dataType (reťazec) - možné hodnoty: xml, json, skript alebo html. Popis typu údajov, ktoré sa očakávajú v odpovedi servera.

typ (reťazec) - typ požiadavky. Možné hodnoty: GET alebo POST. Predvolená hodnota: GET.

url (reťazec) – URL pre požiadavku.

Príklad 1

Jednoduchý prenos textu.

$.ajax(( url: "odpoveď.php?akcia=vzor1", úspech: funkcia(údaje) ( $(".výsledky").html(údaje; ) ));

Pre odpoveď je prvok .result div.

Čakáme na odpoveď

Server jednoducho vráti reťazec:

Echo "Príklad 1 - prenos úspešne dokončený";

Príklad 2

Používateľské údaje odovzdávame do PHP skriptu.

$.ajax(( typ: "POST", url: "response.php?action=sample2", data: "name=Andrew&nickname=Aramis", success: function(data)( $(.results").html( údaje);

Server vráti reťazec s vloženými prenášanými údajmi:

Echo "Príklad 2 - prenos úspešne dokončený. Parametre: name = " . $_POST["meno"] . ", prezývka=" . $_POST["prezývka"];

Príklad 3

Odovzdanie a spustenie kódu JavaScript

$.ajax(( dataType: "script", url: "response.php?action=sample3", ))

Server spustí kód:

Echo "$(.results").html("Príklad 3 - Spustenie JavaScriptu");";

Príklad 4

Používame XML. Príklad možno použiť na prácu s externým XML, napríklad s informačným kanálom RSS.

$.ajax(( dataType: "xml", url: "response.php?action=sample4", success: function(xmldata)( $(".results").html(""); $(xmldata).find ("položka").každá(funkcia())( $(" ").html($(toto).text()).appendTo(".výsledky"); ) ));

Server by mal vrátiť kód XML:

Header("Content-Type: application/xml; charset=UTF-8");