Usando ajax il basic:
-
Alcune nozioni di base di lato Server e lato client;
-
Ned alcune nozioni di base su javascript(jquery);
-
E alcune nozioni di base su html e javascript.
Per la prima parte:
La programmazione lato server consiste nella scrittura di codice che viene eseguito sul server, utilizzando linguaggi supportati dal server (come Java, PHP, C#; è possibile scrivere codice che viene eseguito sul lato server in JavaScript). La programmazione lato client consiste nella scrittura di codice che verrà eseguito sul client e viene eseguita in linguaggi che possono essere eseguiti dal browser, come JavaScript, html e css.
Per il secondo:
L'ajax è importante dichiarare jQuery Core.
Esempio:
<head>
...
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
Usa l'ultima versione jQuery Core.
Avere la nozione di chi lavora l'AJAX.
Ajax funziona eseguendo questi passaggi:
- Si verifica un evento in una pagina web (la pagina viene caricata, viene cliccato un pulsante)
- Un oggetto XMLHttpRequest viene creato da JavaScript
- L'oggetto XMLHttpRequest invia una richiesta a un server web
- Il server elabora la richiesta
- Il server invia una risposta alla pagina web
- La risposta viene letta da JavaScript
- L'azione corretta (come l'aggiornamento della pagina) viene eseguita da JavaScript
Per saperne di più Usa questo link:https://www.w3schools.com/xml/ajax_intro.asp
Configura la richiesta:
URL:
Digitare:stringa
Descrizione:una stringa contenente l'URL a cui viene inviata la richiesta.
dati:
Digitare:PlainObject o String o Array
Descrizione:Dati da inviare al server. Viene convertito in una stringa di query, se non è già una stringa. Viene aggiunto all'URL per le richieste GET. Vedere l'opzione processData per impedire questa elaborazione automatica. L'oggetto deve essere una coppia chiave/valore. Se value è un Array, jQuery serializza più valori con la stessa chiave in base al valore dell'impostazione tradizionale (descritta di seguito).
dataType (predefinito:Intelligent Guess (xml, json, script o html)):
Digitare:stringa
Descrizione:il tipo di dati che ti aspetti dal server. Se non ne viene specificato nessuno, jQuery proverà a dedurlo in base al tipo MIME della risposta (un tipo MIME XML produrrà XML, in 1.4 JSON produrrà un oggetto JavaScript, in 1.4 script eseguirà lo script e qualsiasi altra cosa sarà restituito come stringa). I tipi disponibili (e il risultato passato come primo argomento per la tua callback di successo) sono:
xml:restituisce un documento XML che può essere elaborato tramite jQuery.
html:restituisce HTML come testo normale; i tag di script inclusi vengono valutati quando inseriti nel DOM.
script:valuta la risposta come JavaScript e la restituisce come testo normale. Disabilita la memorizzazione nella cache aggiungendo un parametro della stringa di query, _=[TIMESTAMP], all'URL a meno che l'opzione cache non sia impostata su true. Nota:questo trasformerà i POST in GET per le richieste di domini remoti.
json:valuta la risposta come JSON e restituisce un oggetto JavaScript. Le richieste "json" tra domini vengono convertite in "jsonp" a meno che la richiesta non includa jsonp:false nelle sue opzioni di richiesta. I dati JSON vengono analizzati in modo rigoroso; qualsiasi JSON non valido viene rifiutato e viene generato un errore di analisi. A partire da jQuery 1.9, viene rifiutata anche una risposta vuota; il server dovrebbe invece restituire una risposta di null o {}. (Vedi json.org per ulteriori informazioni sulla corretta formattazione JSON.)jsonp:carica in un blocco JSON usando JSONP. Aggiunge un "?callback=" in più alla fine dell'URL per specificare la richiamata. Disabilita la memorizzazione nella cache aggiungendo un parametro della stringa di query, "_=[TIMESTAMP]", all'URL a meno che l'opzione cache non sia impostata su true.text:una stringa di testo normale. valori multipli separati da spazi:a partire da jQuery 1.5, jQuery può convertire un tipo di dati da ciò che ha ricevuto nell'intestazione Content-Type in ciò che ti serve. Ad esempio, se si desidera che una risposta di testo venga trattata come XML, utilizzare "text xml" per il tipo di dati. Puoi anche fare una richiesta JSONP, riceverla come testo e interpretarla da jQuery come XML:"jsonp text xml". Allo stesso modo, una stringa abbreviata come "jsonp xml" tenterà prima di convertire da jsonp a xml e, in caso contrario, convertirà da jsonp a testo, quindi da testo a xml.
digitare (predefinito:'OTTIENI'):
Digitare:stringa
Descrizione:il metodo HTTP da utilizzare per la richiesta (ad es. "POST", "GET", "PUT"). (versione aggiunta:1.9.0)
successo:
Tipo:Funzione (dati Anything, String textStatus, jqXHR jqXHR )
Descrizione:una funzione da chiamare se la richiesta ha esito positivo. Alla funzione vengono passati tre argomenti:i dati restituiti dal server, formattati in base al parametro dataType o alla funzione di callback dataFilter, se specificata; una stringa che descrive lo stato; e l'oggetto jqXHR (in jQuery 1.4.x, XMLHttpRequest). A partire da jQuery 1.5, l'impostazione success può accettare una serie di funzioni. Ogni funzione verrà chiamata a turno. Questo è un evento Ajax.
Per ulteriori informazioni sulla configurazione, utilizzare il collegamento:http://api.jquery.com/jquery.ajax /
Esempio:
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.
Per la terza e ultima parte:
- Come chiamare la funzione javascript da html e passare il parametro tra i due. Usa questo link:come chiamare la funzione javascript da html e passare il parametro attraverso di essa
Un esempio funzionante completo:
<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>
PHP lato server (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>
Qualsiasi dubbio, chiedi il mio aiuto.
Buon lavoro! E non dimenticare di accettare la risposta se può essere d'aiuto.
