We hebben de basismechanismen van de jQuery $.ajax() -methode besproken. Nu zou het een goed idee zijn om cases uit de praktijk te bekijken: hoe en waar u gegevens kunt verkrijgen voor verzending met een Ajax-verzoek.

Gegevens ontvangen van het formulier.

Er zijn verschillende manieren om gegevens uit formuliervelden te halen:

Selecteer elk veld afzonderlijk en verkrijg de waarde ervan. Dit is echter niet erg handig als er veel velden zijn.

Gebruik de serialize()-methode

Gebruik de serializeArray()-methode

Laten we stilstaan ​​bij de laatste twee en niet zozeer over het verkrijgen van gegevens ( alles is hier eenvoudig), maar over hoe u ze aan de serverzijde kunt verwerken. Neem bijvoorbeeld dit formulier:

HTML-code ( index.html-bestand)

Volledige naam:
E-mail:
Geslacht: Man Vrouw
Brieven ontvangen:
Ja
Nee

En laten we deze JS-code schrijven

jQuery ( script.js-bestand)

$(function())( $("#my_form").on("submit", function(e)( e.preventDefault(); var $that = $(this), fData = $that.serialize(); // OR // fData = $that.serializeArray(); $.ajax(( url: $that.attr("action"), // neem het pad naar de handler vanuit het action type attribuut: $that.attr( "method"), // transfer method - overgenomen van de methode attribuut data: (form_data: fData), dataType: "json", success: function(json)( // Als het verzoek succesvol is voltooid. .. if(json)( $that.replaceWith(json); // vervang het formulier door de gegevens ontvangen in het antwoord ) ));

Laten we nu een handler zo schrijven dat we duidelijk het verschil zien tussen de methoden serialize() en serializeArray()

PHP-handler ( bestandshandler.php)

Robert Sheckly

het is noodzakelijk om, naast het opgeven van het nieuwe bestandsadres - serverAddr ="http://zykov/data.xml", te worden vervangen in de functie

handleStateChange()

resp=xmlHttp.responseText;

resp=xmlHttp.responseXML.getElementsByTagName("naam").firstChild.data;

Dan in plaats van een bericht

De server stuurde: Hallo, klant!

er verschijnt een bericht

Server ingediend door: Robert Sheckly

AJAX is een groep technologieën die wordt gebruikt bij webontwikkeling om interactieve applicaties te creëren. Met AJAX kunt u gegevens van de server overbrengen zonder de pagina opnieuw te laden. Op deze manier kun je zeer indrukwekkende resultaten behalen. En de jQuery-bibliotheek vereenvoudigt de implementatie van AJAX aanzienlijk met behulp van ingebouwde methoden.

Gebruik de methode $.ajax of jQuery.ajax om de technologie te implementeren:

$.ajax(properties) of $.ajax(url [, eigenschappen])

De tweede parameter is toegevoegd in versie 1.5 van jQuery.

url - adres van de opgevraagde pagina;

eigenschappen - eigenschappen opvragen.

Zie de jQuery-documentatie voor een volledige lijst met opties.

In deze tutorial gebruiken we een aantal van de meest gebruikte parameters.

succes (functie) - deze functie wordt aangeroepen nadat het verzoek met succes is voltooid. De functie ontvangt 1 tot 3 parameters (afhankelijk van de versie van de gebruikte bibliotheek). Maar de eerste parameter bevat altijd de gegevens die door de server worden geretourneerd.

data (object/string) - gebruikersgegevens die worden doorgegeven aan de opgevraagde pagina.

dataType (string) - mogelijke waarden: xml, json, script of html. Beschrijving van het type gegevens dat wordt verwacht in het serverantwoord.

type (string) - verzoektype. Mogelijke waarden: GET of POST. Standaard: GET.

url (string) - URL voor het verzoek.

Voorbeeld 1

Gemakkelijke tekstoverdracht.

$.ajax(( url: "response.php?action=sample1", succes: function(data) ( $(.results").html(data); ) ));

Er is een .result div-element voor het antwoord.

Wij wachten op een antwoord

De server retourneert eenvoudigweg de string:

Echo "Voorbeeld 1 - overdracht succesvol voltooid";

Voorbeeld 2

We geven gebruikersgegevens door aan het PHP-script.

$.ajax(( type: "POST", url: "response.php?action=sample2", data: "name=Andrew&nickname=Aramis", succes: function(data)( $(.results").html( gegevens);

De server retourneert een string met de verzonden gegevens erin:

Echo "Voorbeeld 2 - overdracht succesvol voltooid. Parameters: naam = " . $_POST["naam"] . ", bijnaam= " . $_POST["bijnaam"];

Voorbeeld 3

JavaScript-code doorgeven en uitvoeren

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

De server voert de code uit:

Echo "$(".results").html("Voorbeeld 3 - JavaScript uitvoeren");";

Voorbeeld 4

Wij gebruiken XML. Het voorbeeld kan gebruikt worden om met externe XML te werken, bijvoorbeeld een RSS-feed.

$.ajax(( dataType: "xml", url: "response.php?action=sample4", success: function(xmldata)( $(".results").html(""); $(xmldata).find ("item").each(function())( $(" ").html($(this).text()).appendTo(".results"); ) ));

De server zou XML-code moeten retourneren:

Header("Contenttype: applicatie/xml; charset=UTF-8");