Brug af ajax det grundlæggende:
-
Nogle grundlæggende begreber om serversiden og klientsiden;
-
Ned nogle grundlæggende javascript(jquery) begreber;
-
Og nogle grundlæggende html og javascript.
For den første del:
Server-side programmering er at skrive kode, der kører på serveren, ved hjælp af sprog, der understøttes af serveren (såsom Java, PHP, C#; det er muligt at skrive kode, der udføres på server-siden i JavaScript). Programmering på klientsiden er at skrive kode, der kører på klienten, og udføres på sprog, der kan udføres af browseren, såsom JavaScript, html og css.
For det andet:
Ajax er det vigtigt at erklære jQuery Core.
Eksempel:
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
Brug den sidste version af jQuery Core.
Få en idé om, hvem AJAX'en arbejder.
Ajax arbejder ved at udføre disse trin:
- En hændelse opstår på en webside (siden er indlæst, der klikkes på en knap)
- Et XMLHttpRequest-objekt er oprettet af JavaScript
- XMLHttpRequest-objektet sender en anmodning til en webserver
- Serveren behandler anmodningen
- Serveren sender et svar tilbage til websiden
- Svaret læses af JavaScript
- Korrekt handling (som sideopdatering) udføres af JavaScript
For mere Brug dette link:https://www.w3schools.com/xml/ajax_intro.asp
Konfigurer anmodningen:
url:
Type:Streng
Beskrivelse:En streng, der indeholder den URL, som anmodningen sendes til.
data:
Type:PlainObject eller String eller Array
Beskrivelse:Data skal sendes til serveren. Den konverteres til en forespørgselsstreng, hvis den ikke allerede er en streng. Den er vedhæftet url'en for GET-anmodninger. Se procesData-indstillingen for at forhindre denne automatiske behandling. Objekt skal være nøgle/værdi-par. Hvis værdi er et array, serialiserer jQuery flere værdier med samme nøgle baseret på værdien af den traditionelle indstilling (beskrevet nedenfor).
dataType (standard:Intelligent Gæt (xml, json, script eller html)):
Type:Streng
Beskrivelse:Den type data, du forventer tilbage fra serveren. Hvis ingen er angivet, vil jQuery forsøge at udlede det baseret på svarets MIME-type (en XML MIME-type vil give XML, i 1.4 vil JSON give et JavaScript-objekt, i 1.4 vil scriptet udføre scriptet, og alt andet vil blive returneres som en streng). De tilgængelige typer (og resultatet videregivet som det første argument for dit succes-tilbagekald) er:
xml:Returnerer et XML-dokument, der kan behandles via jQuery.
html:Returnerer HTML som almindelig tekst; inkluderede script-tags evalueres, når de indsættes i DOM.
script:Evaluerer svaret som JavaScript og returnerer det som almindelig tekst. Deaktiverer cachelagring ved at tilføje en forespørgselsstrengparameter, _=[TIMESTAMP], til URL'en, medmindre cacheindstillingen er sat til sand. Bemærk:Dette vil forvandle POST'er til GET'er for fjerndomæneanmodninger.
json:Evaluerer svaret som JSON og returnerer et JavaScript-objekt. "json"-anmodninger på tværs af domæner konverteres til "jsonp", medmindre anmodningen inkluderer jsonp:false i anmodningsindstillingerne. JSON-dataene parses på en streng måde; enhver misdannet JSON afvises, og en parse-fejl udløses. Fra og med jQuery 1.9 afvises et tomt svar også; serveren skal returnere et svar på null eller {} i stedet for. (Se json.org for mere information om korrekt JSON-formatering.)jsonp:Indlæses i en JSON-blok ved hjælp af JSONP. Tilføjer et ekstra "?callback=?" til slutningen af din URL for at angive tilbagekaldet. Deaktiverer cachelagring ved at tilføje en forespørgselsstrengparameter, "_=[TIMESTAMP]", til URL'en, medmindre cacheindstillingen er sat til true.text:En almindelig tekststreng.flere mellemrumsadskilte værdier:Fra og med jQuery 1.5 kan jQuery konverter en dataType fra det, den modtog i Content-Type-headeren til det, du har brug for. Hvis du f.eks. ønsker, at et tekstsvar skal behandles som XML, skal du bruge "text xml" til datatypen. Du kan også lave en JSONP-anmodning, få den modtaget som tekst og fortolket af jQuery som XML:"jsonp text xml". På samme måde vil en stenografistreng såsom "jsonp xml" først forsøge at konvertere fra jsonp til xml, og hvis det ikke sker, konvertere fra jsonp til tekst og derefter fra tekst til xml.
type (standard:'GET'):
Type:Streng
Beskrivelse:HTTP-metoden, der skal bruges til anmodningen (f.eks. "POST", "GET", "PUT"). (version tilføjet:1.9.0)
succes:
Type:Funktion (Alt data, String textStatus, jqXHR jqXHR )
Beskrivelse:En funktion, der skal kaldes, hvis anmodningen lykkes. Funktionen bliver bestået af tre argumenter:De data, der returneres fra serveren, formateret i henhold til dataType-parameteren eller dataFilter-tilbagekaldsfunktionen, hvis den er angivet; en streng, der beskriver status; og jqXHR-objektet (i jQuery 1.4.x, XMLHttpRequest). Fra og med jQuery 1.5 kan succesindstillingen acceptere en række funktioner. Hver funktion kaldes efter tur. Dette er en Ajax-begivenhed.
For mere information om konfiguration, brug linket:http://api.jquery.com/jquery.ajax /
Eksempel:
AJAX:
$.ajax({
url: 'test.php',
type: 'POST',
datatype: 'Json',
data: {'var1': val_1, 'var2': val_2},
success: function (response) {
$('.search-results').html(response);
}
});
PHP:
$val = $_POST['var1'];//recive the values from ajax
$val = $_POST['var2'];
...// The code to recive and create html code.
echo json_encode($html);//send values back to the main page.
For tredje og sidste del:
- Sådan kalder man javascript-funktionen fra html og sender parameter mellem de to. Brug dette link:hvordan man kalder javascript-funktionen fra html og sender parameter igennem den
Et fuldt fungerende eksempel:
<html>
<head>
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
</head>
<body>
<form>
<select name="users" onchange="showUser(this.value)">
<option value="">Select a person:</option>
<option value="1">Peter Griffin</option>
<option value="2">Lois Griffin</option>
<option value="3">Joseph Swanson</option>
<option value="4">Glenn Quagmire</option>
</select>
</form>
<br>
<div id="txtHint"><b>Person info will be listed here...</b></div>
<script>
function showUser(str) {
if (str == "") {
document.getElementById("txtHint").innerHTML = "";
return;
} else {
var var_1 =
$.ajax({
url: 'test.php',
type: 'POST',
datatype: 'Json',
data: {'q': str},
success: function (response) {
if(response.error_state = ""){
document.getElementById("txtHint").innerHTML = response.html;
}
else{
document.getElementById("txtHint").innerHTML = response.response.error_state;
}
}
});
}
}
</script>
</body>
</html>
Server side PHP (teste.php):
<!DOCTYPE html>
<html>
<head>
<style>
table {
width: 100%;
border-collapse: collapse;
}
table, td, th {
border: 1px solid black;
padding: 5px;
}
th {text-align: left;}
</style>
</head>
<body>
<?php
$q = intval($_POST['q']);
$error_state = "";
$con = mysqli_connect('localhost','peter','abc123','my_db');
if (!$con) {
//die('Could not connect: ' . mysqli_error($con));
$error_state = "<p>"."Could not connect:". mysqli_error($con)."</p>";
}
mysqli_select_db($con,"ajax_demo");
$sql="SELECT * FROM user WHERE id = '".$q."'";
$result = mysqli_query($con,$sql);
$html = "<table>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysqli_fetch_array($result)) {
$html = $html. "<tr>";
$html = $html. "<td>" . $row['FirstName'] . "</td>";
$html = $html. "<td>" . $row['LastName'] . "</td>";
$html = $html. "<td>" . $row['Age'] . "</td>";
$html = $html. "<td>" . $row['Hometown'] . "</td>";
$html = $html. "<td>" . $row['Job'] . "</td>";
$html = $html. "</tr>";
}
$html = $html. "</table>";
mysqli_close($con);
echo json_encode (array(
'html'=>$html,
'error_state'=>$error_state
));
?>
</body>
</html>
Er du i tvivl, så spørg bare om min hjælp.
Godt arbejde! Og glem ikke at acceptere svaret, hvis det hjælper.