Loading:


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



Napisz Artyku³

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: 28716
Komentarze użytkowników
    • Tre¶æ komentarza
      Kod do komentarza (opcjonalnie)
      PHP JavaScript MySQL Smarty SQL HTML CSS ActionScript
      Autor
      Token
      token

       

       








funkcje.net
Wszelkie prawa zastrzeżone©. | Funkcje.net 2008-2020 v.1.5 | design: diviXdesign & rainbowcolors