Loading:


Lista rozwijana z danymi w formacie XML - AJAX i PHP

Skrypt pobiera dane z pliku XML utworzonego przez PHP i umieszcza je na liście rozwijanej.



Napisz Artyku³

Listing


//Kod pliku index.html #########################################

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
  "http://www.w3.org/TR/html4/strict.dtd">
<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>
<div id="mainDiv" class="mainDiv">
<p>Proszę wybrać jeden z zestawów danych:</p>
<input type="button" value="Pierwszy zestaw" class="myButton"
       onclick="startRequest(1);" id="btnZestaw1">
<input type="button" value="Drugi zestaw" class="myButton"
       onclick="startRequest(2);" id="btnZestaw2">
<br><br>
<select id="listaOpcji" style="width:250px;"
        onchange="listaOpcjiChange()">
</select>
</div>
<div id="dataDiv" class="dataDiv">
</div>
</body>
</html>



//Kod pliku dane.php  #########################################

<?php
$zestaw1 = array(
  "Java. Ćwiczenia praktyczne",
  "Java. Ćwiczenia zaawansowane",
  "Praktyczny kurs Java");

$zestaw2 = array(
  "PHP. 101 praktycznych skryptów",
  "PHP i MySQL. Dla każdego",
  "PHP5. Praktyczny kurs");

if(isSet($_GET['zestaw'])){
  if($_GET['zestaw'] == 1){
    $zestaw = $zestaw1;
  }
  else if($_GET['zestaw'] == 2){
    $zestaw = $zestaw2;
  }
  else{
    echo "Nieprawidłowe dane.";
    exit;
  }
  $dom = new DOMDocument();
  $dom->encoding = "utf-8";
  $opcjeEl = $dom->createElement("opcje");
  $dom->appendChild($opcjeEl);

  foreach($zestaw as $opcja){
    $opcja = iconv("iso-8859-2", "utf-8", $opcja);
    $opcjaEl = $dom->createElement("opcja");
    $opcjaTxt = $dom->createTextNode($opcja);
    $opcjaEl->appendChild($opcjaTxt);
    $opcjeEl->appendChild($opcjaEl);
  }
  $xmlText = $dom->saveXML();

  header("Content-type: text/xml; utf-8");
  echo $xmlText;
}
else{
  echo "Nieprawidłowe dane.";
}
?>



//Kod pliku ajax.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: 130px;
  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%;
}




//Kod pliku 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);
  }
}


//Kod pliku ajax.js   #########################################

function listaOpcjiChange()
{
  var div = document.getElementById("dataDiv");
  var listaOpcji = document.getElementById("listaOpcji");
  var str = listaOpcji[listaOpcji.selectedIndex].value;
  div.innerHTML = str;
}

function startRequest(zestaw)
{
  var btnZestaw1 = document.getElementById('btnZestaw1');
  var btnZestaw2 = document.getElementById('btnZestaw2');
  btnZestaw1.disabled = true;
  btnZestaw2.disabled = true;
 
  url = "http://localhost/dane.php?zestaw=" + zestaw;
  startGETRequest(url, onComplete, onEnd);
}

function onEnd()
{
  var btnZestaw1 = document.getElementById('btnZestaw1');
  var btnZestaw2 = document.getElementById('btnZestaw2');

  btnZestaw1.disabled = false;
  btnZestaw2.disabled = false;
}

function przetwarzajXML(xml)
{
  var listaOpcji = document.getElementById("listaOpcji");
  var opcje = xml.documentElement.childNodes;

  listaOpcji.options.length = 0;
  listaOpcji[0] = new Option("Wybierz jedną z opcji", "");
  for(var i = 0; i < opcje.length; i++){
    if(opcje[i].nodeType == 1){
      var opcja = opcje[i].firstChild.nodeValue;
      listaOpcji[i + 1] = new Option(opcja, opcja);
    }
  }
}

function onComplete(text, xml)
{
  if (!xml || !xml.documentElement){
    alert(text);
  }
  else if (xml.documentElement.nodeName == "parsererror"){
    alert(text);
  }
  else{
    przetwarzajXML(xml);
  }
}




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