• 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

VPS Starter Arubacloud
0 głosów
1,660 wizyt
pytanie zadane 22 listopada 2019 w JavaScript przez Czang Kai Shrek Obywatel (1,990 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,990 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,120 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 93 wizyt
0 głosów
2 odpowiedzi 498 wizyt
0 głosów
1 odpowiedź 233 wizyt
pytanie zadane 29 stycznia 2018 w C i C++ przez Nokata Początkujący (300 p.)

92,452 zapytań

141,262 odpowiedzi

319,078 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

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

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...