Slik sender du inn data med Ajax

October 9

AJAX, eller "Asynkron Javascript og XML," kan brukes til å generere dynamisk hele nettsider uten omlasting dem, bidrar til å skape en jevn og engasjerende brukergrensesnitt. AJAX kan gjøre bruk av skjemaer for å tegne elementer på siden basert på brukerundersøkelser; å sende inn data fra et skjema med AJAX, bruker GET-metoden URL variabler og en kort Javascript-funksjon for å analysere elementene i skjemaet.

Bruksanvisning

1 Åpne filen som inneholder nettstedets kildekode (denne filen sannsynligvis ender i HTM, HTML eller php) ved hjelp av en HTML-editor eller et tekstredigeringsprogram som Notisblokk. Rull ned til skjemaet du har tenkt å sende med AJAX og sørge for at åpningen <form> -taggen har et "navn" attributtet. Hvis ikke, legger en --- for eksempel "<form enctype =" form / multi 'name =' ajaxform '> "initialiserer et skjema med navnet" ajaxform. "

2 Legg til følgende linje etter "</ form>" lukking tag som ender skjemaet du skal sende inn: "<div onclick =" submit ( 'ajaxform', 'destination.php', 'ajaxresult') "style =" border: 2px solid black; width: 64px; "> Send meg </ div>". Dette kodelinje vil skape en knapp kan du klikke for å sende inn skjemaet med AJAX.

3 Change "ajaxform" til navnet på skjemaet du har tenkt å sende inn, og endre "destination.php" til målet på formen (filen som håndterer enhver behandling av skjemaets data). Hvis målet returnerer informasjon som du ønsker å laste bruker innerhtml, endring 'ajaxresult "til id av <div> tag som vil bli lastet med resultatene.

4 Rull opp til header delen av dokumentet --- alt mellom "<head>" og "</ head>". Etter "<head>" åpning tag, tilsett litt Javascript for å sende inn skjemaet; kopier og lim inn følgende kode nøyaktig:

funksjonen sender (formname, mål, mål) {

URL = mål + »?";

for (i = 0; i <document.forms [formname] .elements.length; i ++) {

URL = URL + document.forms [formname] .elements [i] .name + "=" + document.forms [formname] .elements [i] .Value + "&";

}

URL = URL.substring (0, URL.length - 1);

if (window.XMLHttpRequest) {req = new XMLHttpRequest (); }

else if (window.ActiveXObject) {req = new ActiveXObject ( "Microsoft.XMLHTTP"); }

req.onreadystatechange = function () {submitclose (URL, destinasjon);};

req.open ( "GET", URL, true);

req.send ( "");

}

funksjon submitclose (URL, target) {

document.getElementById (mål) .innerHTML = req.responseText;

}

</ Script>

5 Lagre filen og avslutte den. Når du laster ned filen i nettleseren, kan du klikke på "Send meg" for å sende inn skjemaet med AJAX; hvis du har oppgitt et gyldig innerhtml <div> som den tredje argument i "send" -funksjonen, resultatene av skjemaet spørringen vil bli lastet inn i den div; hvis ikke, vil skjemaet sendes stille uten antydning til sluttbruker.