- Bootstrap 4 dla zaawansowanych. Jak pisać znakomite aplikacje interne...Cena: 31.85 zł
- Nie każ mi myśleć! O życiowym podejściu do funkcjonalności stron...Cena: 34.30 zł
- HTML i CSS. Zaprojektuj i zbuduj witrynę WWW. Podręcznik Front-End D...Cena: 57.85 zł
- HTML,CSS i JavaScript dla każdego. Wydanie VIICena: 64.35 zł
Listy rozwijane powiązane ze sobą - AJAX i PHP
Często zachodzi potrzeba aby jedna lista rozwijana wpływała na drugą np. gdy wybieramy państwo z jednej listy na drugiej liści pojawiają sie miasta tego państwa lub gdy wybieramy markę samochodu na liście obok wyświetlają sie modele danej marki.
Skrypt ten przedstawia w jaki sposób osiągnąć ten efekt przy pomocy AJAX
Listing
//index.html ###################################################
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Ajax</title>
<link href="ajaxcss.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="ajaxcore.js"></script>
<script type="text/javascript" src="ajax.js"></script>
</head>
<body onload="initLbAutors()">
<div id="mainDiv" class="mainDiv">
<select id="lbAutors" style="width:250px;" disabled
onchange="lbAutorsChange()">
<option>Lista autorów</option>
</select>
<br><br>
<select id="lbBooks" style="width:250px;" disabled
onchange="lbBooksChange()">
<option>Lista książek</option>
</select>
</div>
<div id="dataDiv" class="dataDiv">
</div>
</body>
</html>
//dane.php
<?php
$autorzy = array
(
1 => "Orson Scott Card",
2 => "Robin Hobb"
);
$tytuly = array
(
1 => array(
1 => "Gra Endera",
2 => "Mówca umarłych",
3 => "Ksenocyd"
),
2 => array(
4 => "Uczeń skrytobójcy",
5 => "Królewski skrytobójca",
6 => "Wyprawa skrytobójcy"
)
);
if(isSet($_GET['id'])){
$id = $_GET['id'];
$str = "";
if($id == "autors"){
foreach($autorzy as $id => $autor){
$str .= $autor . "\n" . $id . "\n\n";
}
echo rtrim($str);
}
else if(array_key_exists($id, $tytuly)){
$arr = $tytuly[$id];
$str = "";
foreach($arr as $id => $tytul){
$str .= $tytul . "\n" . $id . "\n\n";
}
echo rtrim($str);
}
else{
echo "error\nNieprawidłowe dane.";
}
}
else{
echo "error\nNieprawidłowe wywołanie skryptu.";
}
?>
//ajaxcss.css ###################################################
.mainDiv
{
color: #333333;
position: relative;
background-color: #EFEFEF;
border: 1px solid #000000;
margin: 10px 10px 10px 10px;
padding: 14px 14px 14px 14px;
width: 300px;
height: 100px;
visibility: visible;
}
.dataDiv
{
color: #333333;
position: relative;
background-color: #ffffff;
border: 1px solid #000000;
margin: 10px 10px 10px 10px;
padding: 14px 14px 14px 14px;
width: 300px;
visibility: visible;
}
.myButton
{
font-family:helvetica,sans-serif;
font-size:84%;
font-weight:bold;
border:1px solid;
border-top-color:#696;
border-left-color:#696;
border-right-color:#363;
border-bottom-color:#363;
}
.myTextInput
{
border:1px solid;
background-color: #F8F8F8;
border-top-color:#696;
border-left-color:#696;
border-right-color:#363;
border-bottom-color:#363;
width:70%;
}
//ajaxcore.js ###################################################
function getXMLHttpRequestObject()
{
try{
return new XMLHttpRequest();
}
catch(e){
try{
return new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e){
return false;
}
}
}
function startGETRequest(url, onComplete, onEnd)
{
var XMLHttpRequestObject = getXMLHttpRequestObject();
if(XMLHttpRequestObject){
XMLHttpRequestObject.open("GET", url);
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4){
if(XMLHttpRequestObject.status == 200){
var responseXML = XMLHttpRequestObject.responseXML;
var responseText = XMLHttpRequestObject.responseText;
onComplete(responseText, responseXML);
}
delete XMLHttpRequestObject;
onEnd();
}
}
XMLHttpRequestObject.send(null);
}
}
function startPOSTRequest(url, params, onComplete, onEnd)
{
var XMLHttpRequestObject = getXMLHttpRequestObject();
if(XMLHttpRequestObject){
XMLHttpRequestObject.open("POST", url);
XMLHttpRequestObject.setRequestHeader(
'Content-Type', 'application/x-www-form-urlencoded');
XMLHttpRequestObject.onreadystatechange = function()
{
if (XMLHttpRequestObject.readyState == 4){
if(XMLHttpRequestObject.status == 200){
var responseXML = XMLHttpRequestObject.responseXML;
var responseText = XMLHttpRequestObject.responseText;
onComplete(responseText, responseXML);
}
delete XMLHttpRequestObject;
onEnd();
}
}
XMLHttpRequestObject.send(params);
}
}
//ajax.js ###################################################
function initLbAutors()
{
url = "http://localhost/dane.php?id=autors";
startGETRequest(url, onAutorsComplete, onEnd);
}
function onAutorsComplete(text, xml)
{
autors = text.split("\n\n");
if(autors[0] == "error"){
if(autors.length == 2){
alert(autors[1]);
}
else{
alert("Błąd podczas przetwarzania danych.");
}
}
else{
var lbAutors = document.getElementById('lbAutors');
lbAutors.options.length = 0;
lbAutors[0] = new Option("Wybierz autora", "");
for(i = 0; i < autors.length; i++){
items = autors[i].split("\n");
if(items.length == 2){
lbAutors[i + 1] = new Option(items[0], items[1]);
}
}
lbAutors.disabled = false;
}
}
function lbBooksChange()
{
var div = document.getElementById("dataDiv");
var lbBooks = document.getElementById("lbBooks");
id = lbBooks[lbBooks.selectedIndex].value;
if(id == "") return;
tytul = lbBooks[lbBooks.selectedIndex].text;
str = "Wybrana została książka " + tytul;
str += " o identyfikatorze " + id + ".";
div.innerHTML = str;
}
function lbAutorsChange()
{
var lbAutors = document.getElementById("lbAutors");
var id = lbAutors[lbAutors.selectedIndex].value;
if(id == "") return;
var lbBooks = document.getElementById("lbBooks");
lbBooks.disabled = true;
url = "http://localhost/dane.php?id=" + id;
startGETRequest(url, onBooksComplete, onEnd);
}
function onBooksComplete(text, xml)
{
books = text.split("\n\n");
if(books[0] == "error"){
if(rows.length == 2){
alert(books[1]);
}
else{
alert("Błąd podczas przetwarzania danych.");
}
}
else{
var lbBooks = document.getElementById('lbBooks');
lbBooks.options.length = 0;
lbBooks[0] = new Option("Wybierz książkę", "");
for(i = 0; i < books.length; i++){
items = books[i].split("\n");
if(items.length == 2){
lbBooks[i + 1] = new Option(items[0], items[1]);
}
}
lbBooks.disabled = false;
}
}
function onEnd()
{
}
Dodano przez: igor
Ranga: Administrator serwisu Punktów: 0
Ranga: Administrator serwisu Punktów: 0
Komentarze użytkowników
:: Losowe artykuły
:: Wymiana linków
Modowe inspiracje |
Android Gry i Aplikacje |
ZaplanujTransport.pl: Przeprowadzki, transport, aukcje |
Logo dla firmy |
Change Tires - Car Weather Forecast Reminder |
Laminas: MVC Framework for PHP |
IT Books Reviews and Programming: JS, JAVA, PHP, ANDROID, CSS |
Katalog roślin |
Programming articles: JAVA, PHP, C++, Python, JavaScript |
Kancelaria Adwokacka Łukasz Huszno