Jestem początkujący w temacie AJAX, więc proszę o wyrozumiałość.
Utworzyłem bardzo prosty formularz na stronie HTML. Użytkownik wpisuje nazwisko osoby, które następnie powinno być wyświetlone pod formularzem w sekcji div id='wyniki' przez skrypt AJAX. Niestety po kliknięciu przycisku wyświetlana jest nowa strona z wynikami wyszukiwania.
Proszę o pomoc i z góry dziękuję.
Pozdrawiam
Kod html formularza:
Kod
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<title>Pracownicy wg nazwiska</title>
<script src="ajax.js" type="text/javascript"></script>
<script src="nazwisko.js" type="text/javascript"></script>
</head>
<body>
<p>Wprowadź nazwisko i kliknij "Dalej" aby przeglądać listę osób o podanym nazwisku.</p>
<form action="wyniki_ajax.php" method="get" id="nzw_form">
<table>
<tr><td><input id="idn" name="idn" type="text"/></td><td><input type="submit" name="dalej" value="Dalej"/><td></tr>
</table>
</form>
<div id='wyniki'></div>
</body>
</html>
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl" lang="pl">
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-2" />
<title>Pracownicy wg nazwiska</title>
<script src="ajax.js" type="text/javascript"></script>
<script src="nazwisko.js" type="text/javascript"></script>
</head>
<body>
<p>Wprowadź nazwisko i kliknij "Dalej" aby przeglądać listę osób o podanym nazwisku.</p>
<form action="wyniki_ajax.php" method="get" id="nzw_form">
<table>
<tr><td><input id="idn" name="idn" type="text"/></td><td><input type="submit" name="dalej" value="Dalej"/><td></tr>
</table>
</form>
<div id='wyniki'></div>
</body>
</html>
Kod AJAX:
Kod
window.onload = init;
function init(){
var ajax = getXMLHttpRequestObject();
if(ajax){
if(document.getElementById('wyniki')){
document.getElementById('nzw_form').onsubmit=function(){
var idn=document.getElementById('idn').value;
ajax.open('get','wyniki_ajax.php?idn=' + encode.URIComponent(idn));
ajax.onreadystatechange=function(){
handleResponse(ajax);
}
ajax.send(null);
return false;
}
}
}
}
function handleResponse(ajax){
if(ajax.readyState == 4){
if((ajax.status == 200)||(ajax.status == 304)){
var wyniki = document.getElementById('wyniki');
wyniki.innerHTML = ajax.responseText;
wyniki.style.display='block';
}else{
document.getElementById('nzw_form').submit();
}
}
}
function init(){
var ajax = getXMLHttpRequestObject();
if(ajax){
if(document.getElementById('wyniki')){
document.getElementById('nzw_form').onsubmit=function(){
var idn=document.getElementById('idn').value;
ajax.open('get','wyniki_ajax.php?idn=' + encode.URIComponent(idn));
ajax.onreadystatechange=function(){
handleResponse(ajax);
}
ajax.send(null);
return false;
}
}
}
}
function handleResponse(ajax){
if(ajax.readyState == 4){
if((ajax.status == 200)||(ajax.status == 304)){
var wyniki = document.getElementById('wyniki');
wyniki.innerHTML = ajax.responseText;
wyniki.style.display='block';
}else{
document.getElementById('nzw_form').submit();
}
}
}
Kod pliku wyniki_ajax.php:
Kod
<?php
header('Content-Type:text/html;charset=iso-8859-2');
$idn = 0;
if(isset($_GET['idn'])){
$idn = $_GET['idn'];
}
if($idn <> ""){
require_once("mysql_conn.php");
$sql = "SELECT * FROM dane_test WHERE nazwisko='".$idn."'";
$res = mysql_query($sql);
echo "<table>";
echo "<tr><th>Lp.</th><th>Imię</th><th>Nazwisko</th></tr>";
$i = 1;
while($row = mysql_fetch_assoc($res)){
echo "<tr><td>".$i."</td><td>".$row['imie']."</td><td>".$row['nazwisko']."</td></tr>";
}
echo "</table>";
mysql_close($dbc);
}else{
echo "<p class='blad'>Aby przeglądać pracowników o podanym nazwisku - wprowadź je.</p>";
}
header('Content-Type:text/html;charset=iso-8859-2');
$idn = 0;
if(isset($_GET['idn'])){
$idn = $_GET['idn'];
}
if($idn <> ""){
require_once("mysql_conn.php");
$sql = "SELECT * FROM dane_test WHERE nazwisko='".$idn."'";
$res = mysql_query($sql);
echo "<table>";
echo "<tr><th>Lp.</th><th>Imię</th><th>Nazwisko</th></tr>";
$i = 1;
while($row = mysql_fetch_assoc($res)){
echo "<tr><td>".$i."</td><td>".$row['imie']."</td><td>".$row['nazwisko']."</td></tr>";
}
echo "</table>";
mysql_close($dbc);
}else{
echo "<p class='blad'>Aby przeglądać pracowników o podanym nazwisku - wprowadź je.</p>";
}