Hur att hämta resultat från AJAX samtal med JavaScript

March 13

Det är dags att bygga några JavaScript-program för att se vad jQuery kan göra för dig när du hämtar resultat från AJAX samtal. Även dina verkliga situationer blir mer komplex, är processen kommer att vara densamma.

Hur man arbetar med standard ut

Detta exempel använder DoMath.php skript för att utföra matematiska och ändra bara resultatet fält ett formulär på en sida. Du måste använda din server setup för att göra detta exempel arbete eftersom servern exekverar PHP-skript och returnerar sedan resultatet. Använda jQuery gör processen av att arbeta med AJAX betydligt enklare. Följande kod visar det formulär som används för denna uppgift.

<Form id = "Datainmatn">
<h1> scripting en Addition Rutin med AJAX </ h1>
<Div>
<Label> Värde 1: </ label>
<Input id = "val1"
name = "val1"
värde = "1"
type = "text" />
</ Div>
<Div>
<Label> Värde 2: </ label>
<Input id = "val2"
name = "val2"
value = "2"
type = "text" />
</ Div>
<Div>
<Label> Resultat: </ label>
<Span id = "resultat"> </ span>
</ Div>
<Input id = "btnChange"
type = "knapp"
value = "Lägg Numbers"
onclick = "PerformAdd ()" />
</ Form>

I exemplet används standard <input type = "text"> kontroller för datainmatning. Observera att du måste definiera namnet attribut för dessa kontroller, eller jQuery .serialize () metoden fungerar inte. Det är en bra idé att tilldela kontrollerna standardvärden. Utgången är en enkel <span>.

Applikationen gör sin funktion när användaren klickar Lägg siffrorna, som är en <input type = "knapp"> kontroll. Denna metod ger ett alternativ till att använda en knapp lämna stil. Dock fungerar antingen tillvägagångssätt lika bra. Fördelen med detta tillvägagångssätt är att du kan använda en namngiven funktion, PerformAdd (), för att hantera händelsen click. Följande kod visar hur PerformAdd () gör sitt arbete:

fungera PerformAdd ()
{
$ ("# Resultat"). Belastning (
"Http: //localhost/DoMath.php",
$ ("# Datainmatn") serialisera ()).
}

Exemplet placerar utdata i en <span> med ett id på resultatet. Du har åtkomst till denna <span> av dess identifierare och samtalsbelastning () för att fylla den med information från önskad källa. Du ger placeringen av källan, som är DoMath.php.

Den PHP-skript kräver indata, som du lägger som ett andra argument. För att få de uppgifter du tillgång <form> taggen, som har en identifierare Datainmatn, och du ringer serialisera (), vilket serialiserar varje kontroll som har ett namn attribut tilldelats. När du använder standardvärdena är serialiserad uppgifter val1 = 1 & val2 = 2. Sammantaget är den fullständiga URL http:? //localhost/DoMath.php Val1 = 1 & val2 = 2.

Hur att hämta resultat från AJAX samtal med JavaScript

Fördelarna med JSON

Arbeta med XML ger ett plattformsoberoende, cross-browser-lösning för lagring av data som även fungerar med nästan alla programmeringsspråk på planeten. Det är verkligen inte att få någon mer generisk än XML. XML kan vara svårt att tolka in i en form som datorn kan förstå. Följaktligen såg utvecklare för ett enklare sätt att lagra komplexa data. JavaScript Object Notation (JSON) är en av de nya lösningarna.

Liksom XML, fungerar JSON med alla plattformar och med alla webbläsare. Använda jQuery gör arbetet med JSON lätt. Intressant nog PHP ger de funktioner som krävs för att översätta komplexa PHP data till JSON-format.

Hur man skapar JSON uppgifter

Som namnet antyder, JSON förlitar sig på JavaScript-objekt för att lagra information. Du använder faktiskt objektlitteraler att lagra data.

Detta exempel lagrar JSON data på disk i en fil.

{
"Användare":
[
{
"Namn": "George Smith",
"Nummer": 28,
"Födelsedag": "/ Date (377244000000) /"
},
{
"Namn": "Amy Jones",
"Nummer": 41,
"Födelsedag": "/ Date (414914400000) /"
},
{
"Namn": "Sammy Wang",
"Nummer": 33,
"Födelsedag": "/ Date (-147.380.400.000) /"
}
]
}

Materialet består av en grupp av användare. Det finns tre användare i filen. Varje inmatning har samma områden som berör det: Namn, Nummer, och födelsedag. Observera att strängar visas inom citationstecken. Nummer visas utan citationstecken. JSON faktiskt inte ger stöd för standardobjekttyper, så detta exempel använder en av de typer som du ofta ser.

Om filen innehöll ett booleskt värde, verkar det som sant eller falskt utan citationstecken. Sammanfattningsvis JSON stöder dessa datatyper:

  • Sträng
  • Nummer
  • Boolean
  • null

Dessutom JSON-filer stöder två strukturtyper: objektlitteral och matris. Detta exempel visar både strukturtyper för dig så att du vet hur man hanterar dem i JavaScript med jQuery.

Hur vill visa JSON uppgifter skärmen

Formuläret för detta exempel innehåller rubriken och en <input type = "knapp"> kontroll. När användaren klickar på knappen, kallar det Viewdata, som visas i följande exempel koden.

funktionsViewData ()
{
// Skaffa data från disk.
$ .getJSON ("Test.json",
funktion (data)
{
// Skapa en array för att hålla data.
Var poster = [];
// Analysera data genom att titta på
// Varje post i de Användare invända.
$ .Varje (Data.Users,
funktion (nyckel, värde)
{
items.push ("<li>" +
value.Name + "<br />" +
value.Number + "<br />" +
(New Date (
parseInt (value.Birthday.substr (6)))
) .toDateString ()
+ "</ Li>");
});
// Placera resultatet i en oordnad lista.
$ ('<Ul />', {html: items.join ("")}).
appendTo ("kropp");
});
}

Exemplet börjar genom att ringa .getJSON (), som läser Test.json från enheten och placerar innehållet i uppgifterna. Den anonym funktion accepterar data som input. För att skapa utdata för detta exempel, skapar koden en tom array, objekt. Använda objekt förenklar koden.

Nästa steg är att behandla varje användar poster i Users arrayen finns i Test.json. Koden anropar .Varje () och skickar den data.Users, så att öglan kommer att behandla var och en av objektlitteraler den innehåller. Den anonyma funktionen tar emot en nyckel och värdepar för varje användarposter.

För att komma åt var och en av nyckel / värdepar för objektet bokstav poster, samverkar du med lämpliga egenskaper: Namn, Nummer, och födelsedag. Bearbetning namn och nummer är enkel - bara passerar dem till utgången som det är.

För att bearbeta den udda utseende .NET datum, måste du separera textdelen från den numeriska delen av strängen och slå sedan det värdet till ett heltal som innehåller antalet millisekunder sedan 1 januari år 1970.

Om du vill ge en tidigare än den 1 januari 1970, du använder ett negativt antal millisekunder. Antalet millisekunder används för att skapa ett nytt Date () objekt. Koden kallar toDateString () för att ge trevligare utseende utgång.

Vid denna punkt, objekt innehåller tre gruppelement, som alla är ett listobjekt <li> taggen innehåller fakta om användarna. Koden skapar en ny oordnad lista <ul> taggen och placerar objekt inom det genom att ringa join (). Den resulterande listan läggs till det aktuella dokumentet genom att använda appendTo () metoden.

Hur att hämta resultat från AJAX samtal med JavaScript