Forum PHP.pl > [JavaScript][Ajax] wczytywanie danych z pliku

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][Ajax] wczytywanie danych z pliku

sznurkowa

12.08.2013, 12:11:36

Witam, jestem początkująca i nie radzę sobie ze znalezionym przykładem.
Mam plik index.html, ajax.js i dane.php

mój index to

[HTML] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl"> 
<head lang="pl">
  <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
  <script type="text/javascript" src="ajax.js"></script>
</head>
<body>
        <ul id="trans-nav">
                <li><a href="#" onClick="callwykres('dane.php', 'zawartosc', 'Trwa ładowanie strony...')">STRONA GŁÓWNA</a></li>
        </ul>
        <div id="zawartosc">
               <li><a href="#" onClick="callwykres('dane.php', 'zawartosc', 'Trwa ładowanie strony...')">test</a></li> <h2> Tutaj zostanie wczytana treść pliku dane.php</h2>
        </div>
</body>
</html>
[HTML] pobierz, plaintext

mój ajax.js

[PHP] pobierz, plaintext 
function getXMLHTTPRequest() {
try {
        req=new XMLHttpRequest(); /* np. Firefox */
}       catch(err1) {
        try     {
                req=new ActiveXObject("Msxm12.XMLHTTP"); /* niektóre wersje IE */
        }       catch(err2) {
                try {
                        req=new ActiveXObject("Microsoft.XMLHTTP"); /* niektóre wersje IE */
                }       catch(err3) {
                        req=false;
                }
        }
}
return req;
}
/* WCZYTYWANIE PODSTRON */
var http=getXMLHTTPRequest();
function callwykres(url, pageElement, callMessage) {
        document.getElementById(pageElement).innerHTML = callMessage;
        myRand=parseInt(Math.random()*9999999999);
        var myurl=url + "?rand=" + myRand;  
        http.open("GET",myurl,true);
        http.onreadystatechange = function() {responsewykres(pageElement);};
        http.send(null);
}
function responsewykres(pageElement) {
        if(http.readyState == 4) {
                if(http.status == 200) {
                        var output = http.responseText;
document.getElementById(pageElement).innerHTML = output;
                }
        }
}
[PHP] pobierz, plaintext

dane.php

[PHP] pobierz, plaintext 
<?php
header("Content-type: text/html; charset=iso-8859-2");
?>
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
  "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="pl">       
<head lang="pl">
  <meta http-equiv="Content-type" content="text/html; charset=iso-8859-2" />
</head>
<body>
   <h1> To są dane wczytana z pliku PHP </h1>
</body>
</html>
[PHP] pobierz, plaintext

Nie wczytuje mi nic, mam tylko ładowanie (napis).
Chcę wczytywać dane z pliku na przykład txt i rysować później wykres funkcją javascript, która mi działa, ale w innym pliku testowym jak podpinam jquery.js i jquery.flot.js

Nie wiem dlaczego nie wczytuje mi napisu z pliku dane.php i jak powiązać rysowanie wykresu w moim pliku index.html

[PHP] pobierz, plaintext 
$(function () {
    var d1 = [[17263.9, 25], [17265, 25], [12466, 99], [17267, 99]];
	var d2 = [[17244.905,88],[17245,185], [17248.395,73],[17248.395,79]];
	$.plot($("#placeholder"), [ d1, d2 ]);
});
[PHP] pobierz, plaintext

Tylko te dane chciałabym zaczytywać z pliku i wrzucać do dwóch serii danych.

b4rt3kk

12.08.2013, 12:46:21

Nie wiem czy jest sens utrudniać sobie życie stosując czystego JS-owego Ajaxa, skoro można użyć biblioteki jQuery i zrobić to o wiele prościej. Ale z tego co mówisz, skoro funkcja rysująca wykres potrzebuje bibliotek jQuery do działania, to musisz je podpiąć w swoim pliku index w sekcji HEAD.

sznurkowa

12.08.2013, 12:55:35

Cytat(b4rt3kk @ 12.08.2013, 12:46:21 )

Tak mam, ale to nie działa.

[PHP] pobierz, plaintext 
<script language="javascript" type="text/javascript" src="jquery.js"></script>
    <script language="javascript" type="text/javascript" src="jquery.flot.js"></script>
[PHP] pobierz, plaintext

Do index.html jak w kodzie jest - podpięte.
Problem w tym, że
a) coś jest w kodzie nie tak, bo mam "trwa ładowanie...", ale nie ładuje,
b)po doklejeniu jquery i flot w head , a na dole div placeholder i skryptu z wykresem var1 i var2 nie rysuje wykresu
c) no i problem jak zaczytaj serię danych do var1 i var2 z pliku, zeby nie wpisywać na sztywno

Ubiegnę pytania, tak mam zdefiniowany placeholder:

[PHP] pobierz, plaintext 
<div id="placeholder" style="width:600px;height:300px;"></div>
[PHP] pobierz, plaintext

b4rt3kk

12.08.2013, 13:15:04

Przede wszystkim sprawdź sobie czy funkcja działa:

[HTML] pobierz, plaintext 
function responsewykres(pageElement) {
alert(http.readyState);
if(http.readyState == 4) {
if(http.status == 200) {
var output = http.responseText;
document.getElementById(pageElement).innerHTML = output;
}
}
}
[HTML] pobierz, plaintext

sznurkowa

12.08.2013, 13:24:38

Cytat(b4rt3kk @ 12.08.2013, 13:15:04 )

Przede wszystkim sprawdź sobie czy funkcja działa:

[HTML] pobierz, plaintext 
function responsewykres(pageElement) {
alert(http.readyState);
if(http.readyState == 4) {
if(http.status == 200) {
var output = http.responseText;
document.getElementById(pageElement).innerHTML = output;
}
}
}
[HTML] pobierz, plaintext

Nie wiem jak, widzę, tylko brak wczytywania czyli nie działa.
Te pliki mam z przykładów znalezionych prócz wykresu, ktory pisałam sama w osobnym pliku.
Widzisz lepsze rozwiązanie do wczytywania danych (kilkuset więc ręczne wpisywanie var odpada), rysowania z nich wykresu, ale nie wyrzucania tego wszystkiego na stronę, tylko podczepienia do zewnętrznych plików txt z danymi i po kliknięciu wywołania danych i wyrysowania wykresu tylko dla tej serii, którą wybierzemy?

b4rt3kk

12.08.2013, 13:35:43

Proponuję byś użyła funkcji ajax z biblioteki jQuery lub możesz wczytać wszystkie dane poprzez PHP, a następnie funkcją JS wczytać je i przekazać do funkcji rysującej wykres.

W powyższej funkcji dodałem alerta, który miał wyświetlić stan wczytywania pliku (jeśli nic się nie pojawia, to znaczy że funkcja w ogóle nie jest uruchamiana).

Dorzuć sobie jQuery do HEAD strony i dopisz taki prosty skrypcik:

[HTML] pobierz, plaintext 
$(function(){
  $.ajax({
    url: "plik.php",
    success: function(msg) {
      alert(msg);
    }
});
[HTML] pobierz, plaintext

sznurkowa

13.08.2013, 08:31:43

Cytat(b4rt3kk @ 12.08.2013, 13:35:43 )

[HTML] pobierz, plaintext 
$(function(){
  $.ajax({
    url: "plik.php",
    success: function(msg) {
      alert(msg);
    }
});
[HTML] pobierz, plaintext

Spróbuję zrobić jak piszesz i odezwę się co wyszlo, dzięki.

To nie da rady..bo chcę wczytywać te dane, a okazuje się, że powinny być bezpośrednio z bazy czytane.
Jak to powinno wyglądać ?
- plik html z miejscem wywołania wykresu, w sekcji head podpięty javascript
- plik flot z jquery w tym samym katalogu co html
- plik jakiś config.php do łączenia się do bazy MDB_NAME, *_USER, *_PASS, ale jak wydobyć z tej bazy za pomocą select dane i jak przekazać do czytania do wykresu.

Znalazłam taki fragment, który czytałby mi z bazy

[PHP] pobierz, plaintext 
<?PHP
 
$sql_host = &#8218;nazwa_hosta’;
$sql_user = &#8218;nazwa_uzytkownika’;
$sql_user = &#8218;haslo’;
$sql_baza = &#8218;nazwa_bazy_danych’;
 
if (mysql_connect($sql_host, $sql_user, $sql_password) and mysql_select_db($sql_baza)) {
 
mysql_close();
}
 
?>
[PHP] pobierz, plaintext

Tylko nie wiem co dalej gdyby coś przeczytał.

b4rt3kk

13.08.2013, 09:20:39

Ten fragment kodu pozwoli Ci jedynie połączyć się z bazą danych. Musisz jeszcze napisać zapytanie do bazy i je wykonać i dopiero wtedy wyświetlić wyniki.

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.