Ogólnie zasada tego jest taka. Po kliknięciu przycisku wysyłającego w formularzu JavaScript musi przechwycić to zdarzenie i przy użyciu XMLHTTPRequest przesłać dane poprzez metodę GET do serwera. Sprowadza się to do odczytu pliku z odpowiednio sformułowanym adresem np. plik.php?pole1=wartosc1 itp. Po pobraniu przy wykorzystaniu metod DOMu JavaScript powinien zaktualizować formularz. Trzeba też pamiętać, aby na koniec zdarzenia dodać "return: false;" - dlaczego? w przeciwnym razie skrypt przeładuje nas dalej do pliku zawartego w formularzu.
jQuery UI to trochę przesada. Jednak jQuery powinno jak najbardziej wystarczyć.
Oto mój przykład:
plik index.html:
plik get.php:
jQuery UI to trochę przesada. Jednak jQuery powinno jak najbardziej wystarczyć.
Oto mój przykład:
plik index.html:
Kod PHP:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>AJAX test</title>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script>
$(function(){
$("#submit").click(function() {
var text = $("#text").attr("value");
$.ajax({
url: "get.php?text="+text,
success: function(data) {
$('#result').html(data);
}
});
return false;
});
});
</script>
</head>
<body>
<form method="get" action="get.php">
<input type="text" id="text" name="text" />
<input type="submit" id="submit" />
</form>
<div id="result"></div>
</body>
</html>
Kod PHP:
<?php echo("You sended me: ".$_GET['text']); ?>