• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Jak wyświetlić dane z bazy danych mysql za pomocą javascript/Ajax

0 głosów
808 wizyt
pytanie zadane 22 listopada 2019 w JavaScript przez Czang Kai Shrek Obywatel (1,410 p.)
Witam,
Próbuję wyświetlić dane z bazy danych (w phpmyadmin) bez odświeżania strony, na takiej zasadzie że użytkownik będzie naciskał button i po kolei będą się wyświetlać elementy z bazy (jeden za drugim, gdzie poprzedni znika). Potrafię to zrobić w php, ale w js nie mam pojęcia jak. Można się ewentualnie odnieść do pobranych danych w php? Choć wtedy nwm czy będzie się przeładowywać.
Pozdrawiam.

2 odpowiedzi

+1 głos
odpowiedź 23 listopada 2019 przez ZenekChe Początkujący (250 p.)
Wystawiasz w PHPie route'a z opcją przyjęcia parametru( np. mojstrona.pl/api/kurczaki/1 - gdzie 1 to np. ID. ), w tym route piszesz sobie PHPowski kod który zwraca Ci dane - np. JSON lub XML.

W JS podpinasz event click do buttona który robi request typu get pod wskazany wyżej url. Możesz użyć `fetch`(nie wspierany na ie11) lub np. axios. Po kliku i odebraniu danych, robisz inkrementacje zeby  po kolejnym kliku button odpytał już ID == 2. No i oczywiście podmieniasz sobie dane na jakimś elemencie np. `innerText`

To tak skrótowo :D
komentarz 23 listopada 2019 przez Czang Kai Shrek Obywatel (1,410 p.)

Generalnie trochę nad tym posiedziałem i zrobiłem tak że przez JSONa wysyłana jest tablica z php do js i wyświetlają się jej elementy [0],[1],[2]... ale pojawił się nowy problem. Próbuję za pomocą onClick za każdym naciśnięciem zwiększać x pobrane_dane[x] by po koleji wyświetlały się elementy tablicy tylko że nie wiem jak połączyć to wyświetlanie ze wzrastaniem x w function guzik:

<script type="text/javascript">
	
	pobrane_dane = <?php echo json_encode($pobrane_dane) ?>; //zmienna globalna
	x = 0; //zmienna globalna
	
	
	function guzik(button,x)
	{
		button.value=(button.value == "Sprawdź") ? "Dalej" : "Sprawdź"; 
		x++;
	}
	
	document.write(pobrane_dane[x]);
	
	
</script>

Próbuję uzyskać efekt że wyświetla się słówko po polsku z bazy, użytkownik wpisuje do inputa angielskie tłumaczenie, naciska button "sprawdź", wyświetla się czy dobrze/źle napisał i funkcja guzik zmienia się na "dalej". Po kolejnym naciśnięciu to samo tylko kolejne słówko z bazy a button znowu zmienia nazwę na "sprawdź".
Chyba nie popłynąłem z fantazją? To wykonalne? laugh

komentarz 23 listopada 2019 przez ZenekChe Początkujący (250 p.)
edycja 23 listopada 2019 przez ZenekChe

funkcja guzik odpala Ci się zapewne z początkową tą samą wartością.
Można użyć domknięć(clousers) aby zapamiętały poprzednią wartość.


<script type="text/javascript">
     
    window.pobrane_dane = <?php echo json_encode($pobrane_dane) ?>;
          
    function guzik(button)
    {
const button = document.querySelector('#IDButtona');
        button.value=(button.value == "Sprawdź") ? "Dalej" : "Sprawdź"; 
let x = 0;
return () => {
 x++;
document.write(pobrane_dane[x]);
}
    }

let odpalGuzik = guzik(tutajButton)
 
</script>

Zrobiłem edycje Twojego kodu żebyś zobaczył domknięcie.

PS. i odpalasz `odpalGuzik()` na event click :)

PS#2 :) Teraz zobaczyłem dokładniej zapis :D przypisz do globalnej `x` jego wartość + 1 :) 
 


<script type="text/javascript">
     
    pobrane_dane = <?php echo json_encode($pobrane_dane) ?>; //zmienna globalna
    x = 0; //zmienna globalna
     
     
    function guzik(button,x)
    {
        button.value=(button.value == "Sprawdź") ? "Dalej" : "Sprawdź"; 
        x = x + 1;
    }
     
    document.write(pobrane_dane[x]);
     
     
</script>

 

0 głosów
odpowiedź 23 listopada 2019 przez Bartx Bywalec (2,100 p.)
edycja 23 listopada 2019 przez Bartx

Możesz użyć "$.get" z jQuery. 

Przykład:

$.get("skrypt.php", { name : "jan" }, function(res){
                    document.getElementById("wynik").innerHTML = res;
            });

1. skrypt.php podmieniasz na nazwę pliku php który chcesz wywołać

2. W klamrach możesz wpisać dane do wysłania do skryptu php. W php uzyskasz je przy pomocy GET.

3. Jeśli chcesz aby zapytanie było wykonywane po przyciśnięciu przycisku to cały powyższy kod zamknij w funkcji i dodaj atrybut "onclick" do przycisku, tak będzie najprościej.

Podobne pytania

0 głosów
0 odpowiedzi 54 wizyt
0 głosów
2 odpowiedzi 355 wizyt
0 głosów
1 odpowiedź 195 wizyt
pytanie zadane 29 stycznia 2018 w C i C++ przez Nokata Początkujący (300 p.)

86,483 zapytań

135,239 odpowiedzi

300,478 komentarzy

57,230 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto dwie polecane książki warte uwagi. Pełną listę znajdziesz tutaj.

...