Mūsdienu tīmekļa laikmetā lielākā daļa vietņu kļūst arvien interaktīvākas. Ja iepriekš, lai saņemtu atjauninātus datus, bija nepieciešams atsvaidzināt visu lapu, tad tagad ir parādījušās tehnoloģijas, kas ļauj ielādēt nevis visu lapu, bet tikai atsevišķu tās daļu. Savukārt tas sniedz ērtības gan lietotājiem, gan serveru īpašniekiem, jo lapa lietotājam ielādēsies ātrāk, jo tiek ielādēta tikai atsevišķa lapas daļa, un serverim nav katru reizi jāģenerē lapa un jāiedod lietotājs. Šīs funkcijas ir viegli ieviest, izmantojot php un ajax.
Šodien mēs apskatīsim nelielu piemēru, lai labāk izprastu, kā darbojas AJAX koncepcija. Dažreiz iesācējiem ir grūti saprast, kā php un ajax mijiedarbojas viens ar otru; daudzi cilvēki meklē piemērus, kā pārbaudīt veidlapas lidojumā, nepārlādējot visu lapu. Īsi parādīšu, kā tas tiek darīts, lai izprastu pamatus un principus, kas ļaus ātrāk apgūt citus rīkus un turpmāk rakstīt savus skriptus.
Izdomāsim sev nelielu uzdevumu, pārbaudīsim e-pasta adreses esamību datu bāzē, nepārlādējot lapu, izmantojot php un ajax. Šis piemērs labi parādīs, kā mēs varam mijiedarboties ar serveri, nepārlādējot lapu pārlūkprogrammā, kā arī to bieži izmanto dažāda veida lietotāju veidlapu validācijām. Saknes direktorijā mēs izveidosim 3 failus ar nosaukumu index.php, email.php, validate.js.
Lapas izveideIzveidosim vienkāršu lapu ar vienu veidlapu, kurā ir tikai viens lauks e-pasta ievadīšanai.
Index.php faila sintakse
AJAX apmācība
Vienkāršākais veids, kā strādāt ar AJAX, ir savienot jQuery ietvaru, un tieši to es arī darīju. jQuery nodrošina mums viegli saprotamu un viegli lietojamu sintaksi AJAX pieprasījumu nosūtīšanai, kāpēc gan neizmantot to?
Js skripta izveideFaila validate.js sintakse
$(dokuments).ready(function())( var email = ""; $("#email").keyup(function())( var value = $(this).val(); $.ajax(() tips: "POST", url:"email.php", dati:"email="+vērtība, veiksme:function(msg)( if(msg == "derīgs")( $("#ziņa").html( "Šo e-pastu var izmantot. Šis e-pasts jau ir aizņemts."); ) ) )); )); $("#submit").click(function())( if(email == "")( alert( "Lūdzu, ievietojiet datus visos e-pastos"); )else( $.ajax(( ierakstiet: "POST", url:"email.php", data:"add_email="+email, success:function(msg)( $) ("#ziņa" ).html(msg); ) )); ) )); ));
PHP apdarinātājsŠis skripts saņems no klienta POST pieprasījumu, apstrādās to un atgriezīs rezultātu. AJAX nolasa rezultātu un pieņem lēmumu, pamatojoties uz to.
Email.php faila sintakse
$savienojums = mysqli_connect("localhost","e-pasts","e-pasts","e-pasts"); if(isset($_POST["e-pasts"]) && $_POST["e-pasts"] != "")( $e-pasts = $_POST["e-pasts"]; $e-pasts = mysqli_real_escape_string($connection,$email); if (!filter_var($email, FILTER_VALIDATE_EMAIL))( echo "nederīgs"; )else( $sql = "SELECT id FROM email WHERE email="$email""; $result = mysqli_query($connection,$sql); if( mysqli_num_rows($result) == 1)( atbalss "nederīgs"; )else( echo "derīgs"; ) ) ) if(isset($_POST["pievienot_e-pastu"]) && $_POST["pievienot_e-pastu"] != "" )( $e-pasts = mysqli_real_escape_string($savienojums,$_POST["pievienot_e-pastu"]); $sql = "IEVIETOT e-pastā(e-pasts) VALUES("$email")"; if(mysqli_query($savienojums,$sql))( echo Success"; )else( echo "Kļūda"; ) )
Mūsu PHP skriptā ir visizplatītākais kods, kas apstrādā publicēšanas pieprasījumu un drukā noteiktu tekstu lapā. Rezultātā AJAX nosūta pieprasījumu php skriptam, skripts to apstrādā un rada rezultātu, AJAX nolasa rezultātu un maina lapu reāllaikā.
AJAX nosūta skriptam POST pieprasījumu, izmantojot šo koda daļu:
$.ajax(( type:"POST", url:"email.php", data:"email="+value, success:function(msg)( if(msg == "derīgs")( $("#message" ").html("Šo e-pastu var izmantot."); email = value; )else( $("#message").html("Šis e-pasts jau ir aizņemts."); ) ) ));
tips — pieprasījuma veids, POST vai GET. Mūsu gadījumā POST;
url - skripta adrese, uz kuru tiek nosūtīts pieprasījums;
dati - dati, kas tiek pārsūtīti pieprasījumā;
veiksme - ko darīt veiksmīgas pieprasījuma izpildes rezultātā. Mūsu gadījumā funkcija tiek izsaukta;
Pašā skriptā e-pasta esamība datu bāzē tiek pārbaudīta katru reizi, kad e-pasta laukā tiek ievadīta rakstzīme. Skriptā sadaļa $("#email").keyup(function()()); ir atbildīga par ievades apstrādi. , kas pārbauda, vai laukā ar id = "e-pasts" nav nospiests taustiņš.
Kā redzat, kods ir diezgan vienkāršs un neprasa īpaši lielas prasmes, lai saprastu, viss ir saistīts ar notikumu apstrādi keyup() - taustiņa nospiešana, klikšķis () - peles klikšķis uz elementa. Tam seko AJAX pieprasījums un atbilde no skripta. Tādējādi, izmantojot php un ajax, jūs varat iegūt gandrīz neierobežotas iespējas veidot interaktīvas lapas.
Šis kods nepretendē uz kvalitatīvu, bet, ja jūs to izstrādājat, pievienojat pareizas validācijas klienta un servera līmenī un ieviešat css, tad to var izmantot savos projektos.
Ja jums ir kādi jautājumi, nevilcinieties rakstīt komentārus.
Novēlu jauku dienu un uz drīzu tikšanos :)
Atgriež JSON datus. Izmanto, lai atgrieztu veiksmīgas atbildes AJAX pieprasījumos. Atbildē vienmēr būs elements veiksme=true. Pārtrauc php skripta darbu (mirst).
Āķu nav.
Atgriežasnull. Parāda JSON datus un pārtrauc php.
Ja nosūtāt datus parametram $data, tie tiks pievienoti:
// Atgriezto datu veids pirms kodēšanas JSON: $response = array("veiksmi" => true); // ja $data nav norādīts $response = array("success" => true, "data" => $data); // ja ir norādīts $data
Izmantojot wp_send_json_success($data, $status_code); $dati (virkne/masīvs/skaitlis/objekts/būla) Dati, kas tiks pievienoti rezultātam datu masīva elementā pirms kodēšanas JSON.Noklusējums: nē$statusa_kods (skaitlis) Iestatāmais HTTP statusa kods. Kādi ir statusa kodi? C WP 4.7.
Noklusējums: null 1. piemēri AJAX pieprasījuma veiksmīgas apstrādes noteikšana
Šis jQuery kods nosūta AJAX pieprasījumu spraudņa failam ajax/save_field.php:
JQuery(document).ready(function($)( $("#btn_save").click(function(e)( e.preventDefault(); $.post(pluginUrl + "ajax/save_field.php", $(") #mana-veidlapa").serialize(), function(json)(if(json.success) alert(json.data.message); else alert("Kļūda" + json.data); )); )); ) );
Šis ir kods failā save_field.php, kas apstrādā iesniegto pieprasījumu. Lūk, kā izmantot wp_send_json_success() :