Loading:


Dodanie danych z serwera do już istniejącej treści - AJAX i PHP

Skrypt pokazuje jak pobrać treść z serwera i dodać ją do już istniejącej treści.



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>
<div id="selectorsDiv" class="mainDiv">
<input type="button" class="myButton" value="Pierwszy artykuł"
       onclick="loadArticle(1)" id="btn1">
<input type="button" class="myButton" value="Drugi artykuł"
       onclick="loadArticle(2)" id="btn2">
<input type="button" class="myButton" value="Trzeci artykuł"
       onclick="loadArticle(3)" id="btn3">
</div>
<div id="dataDiv" class="dataDiv">
</div>

</body>
</html>


//dane.php  ###########################################

<?php
if(isSet($_GET["id"])){
  $id = $_GET["id"];
  switch($id){
    case 1: $fileName = "./art1.html";break;
    case 2: $fileName = "./art2.html";break;
    case 3: $fileName = "./art3.html";break;
    default: die("error");
  }
  if(($str = file_get_contents($fileName)) === false){
    echo "error";
  }
  else{
    echo $str;
  }
}
else{
  echo "error";
}
?>





//art3.html   ###########################################


<p>
To jest treść trzeciego artykułu. To jest treść trzeciego artykułu.
To jest treść trzeciego artykułu. To jest treść trzeciego artykułu.
To jest treść trzeciego artykułu. To jest treść trzeciego artykułu.
To jest treść trzeciego artykułu. To jest treść trzeciego artykułu.
To jest treść trzeciego artykułu. To jest treść trzeciego artykułu.
To jest treść trzeciego artykułu. To jest treść trzeciego artykułu.
To jest treść trzeciego artykułu. To jest treść trzeciego artykułu.
To jest treść trzeciego artykułu. To jest treść trzeciego artykułu.
To jest treść trzeciego artykułu. To jest treść trzeciego artykułu.
To jest treść trzeciego artykułu. To jest treść trzeciego artykułu.
To jest treść trzeciego artykułu. To jest treść trzeciego artykułu.
To jest treść trzeciego artykułu. To jest treść trzeciego artykułu.
To jest treść trzeciego artykułu. To jest treść trzeciego artykułu.
</p>


//art2.html   ###########################################


<p>
To jest treść drugiego artykułu. To jest treść drugiego artykułu.
To jest treść drugiego artykułu. To jest treść drugiego artykułu.
To jest treść drugiego artykułu. To jest treść drugiego artykułu.
To jest treść drugiego artykułu. To jest treść drugiego artykułu.
To jest treść drugiego artykułu. To jest treść drugiego artykułu.
To jest treść drugiego artykułu. To jest treść drugiego artykułu.
To jest treść drugiego artykułu. To jest treść drugiego artykułu.
To jest treść drugiego artykułu. To jest treść drugiego artykułu.
To jest treść drugiego artykułu. To jest treść drugiego artykułu.
To jest treść drugiego artykułu. To jest treść drugiego artykułu.
To jest treść drugiego artykułu. To jest treść drugiego artykułu.
To jest treść drugiego artykułu. To jest treść drugiego artykułu.
To jest treść drugiego artykułu. To jest treść drugiego artykułu.
</p>


//art1.html   ###########################################


<p>
To jest treść pierwszego artykułu. To jest treść pierwszego artykułu.
To jest treść pierwszego artykułu. To jest treść pierwszego artykułu.
To jest treść pierwszego artykułu. To jest treść pierwszego artykułu.
To jest treść pierwszego artykułu. To jest treść pierwszego artykułu.
To jest treść pierwszego artykułu. To jest treść pierwszego artykułu.
To jest treść pierwszego artykułu. To jest treść pierwszego artykułu.
To jest treść pierwszego artykułu. To jest treść pierwszego artykułu.
To jest treść pierwszego artykułu. To jest treść pierwszego artykułu.
To jest treść pierwszego artykułu. To jest treść pierwszego artykułu.
To jest treść pierwszego artykułu. To jest treść pierwszego artykułu.
To jest treść pierwszego artykułu. To jest treść pierwszego artykułu.
To jest treść pierwszego artykułu. To jest treść pierwszego artykułu.
To jest treść pierwszego artykułu. To jest treść pierwszego artykułu.
</p>



//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: 420px;
  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: 420px;
  height: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;
  width:120px;
  margin:5px;
}



//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 ###########################################

disableButtons = false;

function loadArticle(id)
{
  if(disableButtons) return;
  if(id < 1 || id > 3) return;
  url = "dane.php?id=" + id;
  disableButtons = true;
  startGETRequest(url, onComplete, onEnd);
}

function onComplete(text, xml)
{
  if(text == "error"){
    alert("Dane nie są dostępne.");
  }
  else{
    var dataDiv = document.getElementById('dataDiv');
    dataDiv.innerHTML += text;
  }
}

function onEnd(text, xml)
{
  disableButtons = false;
}




Dodano przez: igor
Ranga: Administrator serwisu Punktów: 0
Komentarze użytkowników
Szkoda że żaden z tych przykładów mi nie dizała. Mimo dokładnego skopiowania.
autor: alla | 376 | 2009-07-22 13:18:17


Brak podania błędu uniemożliwia rozwikłanie problemu
autor: Igor | 379 | 2009-07-22 21:24:33


Przydałaby się instrukcja jak tego używać :)
autor: knx | 382 | 2009-07-23 12:01:26


Po prostu tworzysz pliki o nazwach jak podane i odpalasz, a potem to już inwencja własna
autor: Igor | 384 | 2009-07-23 12:36:02


    • 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-2024 v.1.5 | design: diviXdesign & rainbowcolors