Zapytanie SQL w JavaScript [Odcinek 3 kursu JS - wisielec]

Question

Cześć!

Jeżeli ktoś oglądał ten odcinek kursu JavaScript Pana Zelenta, to pewnie domyśla się o co chodzi - jest to wisielec napisany w JSie. Zrobiłem sobie małą tablicę na samym początku, w której są zapisane pytania:

var pass_list = new Array(5);
pass_list[0] = "HASŁO 1";
pass_list[1] = "HASŁO 2";
pass_list[2] = "HASŁO 3";
pass_list[3] = "HASŁO 4";
pass_list[4] = "HASŁO 5";

var pass_number = Math.floor(Math.random()*5) + 1;
var pass = pass_list[pass_number];

Co mógłbym zrobić, aby z bazy danych były pobierane pytania i zapisywane w tablicy? Dodam, że skrypt mam w oddzielnym pliku wisielec.js. Od strony bazy danych i pobrania wartości do tablicy array z PHP sobie poradzę spokojnie, ale jak to wcisnąć do JSa?

Answer 1

W jQuery masz jQuery.get() do komunikacji z serwerem. Podajesz adres strony, która ma być pobrana a na stronie zamiast całego kodu HTML generujsz tylko potrzebne dane i to najlepiej w formacie JSON bo JavaScript to łatwo przetworzy na tablicę. Zdaje się, że nawet jQuery.get() już samo tworzy z tego odpowiednią tablicę (lub większą strukturę)

https://api.jquery.com/jquery.get/

Bez użycia jQuery też jest to możliwe trzeba tylko poszukać funkcji odpowiedzialnych za AJAX. W różnych przeglądarkach może robić to inna funkcja więc trzeba obsłużyć wszystkie przypadki samemu.

Comments

W przeglądarce są "Narzędzia dewelopera/programisty" i tam jest "Konsola" w której można wykonywać kod JavaScript ale też wypisuje błędy w wykonywnaiu kodu.

Teraz pojawia sie tam kod, ze nie ma zdefionwanej tablicy `pass_list` w linii

var pass = pass_list[pass_number];

Wszystko to wynika z faktu, że większość kodu musi zostac wykonana wewnątrz tej funkcji w `get()` bo dopiero wtedy są dane odebrane z serwera.

---

<?php

echo "<script>";

$result = mysql_query("SELECT * FROM passwords");
while($row = mysql_fetch_array($result, MYSQL_NUM)) {
   echo "pass_list[", $row[0], "] = ", $row[1], ";" ;
}

echo "</script>";

?>

 

lub

 

<script>

<?php
$result = mysql_query("SELECT * FROM passwords");
while($row = mysql_fetch_array($result, MYSQL_NUM)) {
   echo "pass_list[", $row[0], "] = ", $row[1], ";" ;
}
?>

</script>

 

 

 

 

---

Jeśli użyjesz `var` wewnątrz funkcji to te zmienne będą lokalne i nie będą dostępne poza tą funkcją.

 

var pass_list;
var pass_number;
var pass;
var length;
var pass1;

$.get("passwords.php", function(data) {

   	pass_list = data;
   	pass_number = Math.floor(Math.random()*3) + 1;
	pass = pass_list[pass_number].toUpperCase();
	length = pass.length;

    pass1 = "";
    for (i=0; i<length; i++) {
        if(pass.charAt(i) == " ")
            pass1 = pass1 + " ";
        else
            pass1 = pass1 + "-";
    }
	
}, "json" );

 

---

Prawie działa, tak wygląda plik: passwords.php

<?php 
	$link = mysql_connect('localhost', 'XXX', 'XXXX');
	if(!$link) {
		die('Brak połączenia z bazą danych. Błąd: '.mysql_errno());
	}
	$dbselected = mysql_select_db('wisielec', $link);
	if(!$dbselected) {
		die('Nie można wybrać bazy danych. Błąd: '.mysql_errno());
	}
	 
	echo "<script>";
	$result = mysql_query("SELECT * FROM passwords");
		while($row = mysql_fetch_array($result, MYSQL_NUM)) {
   			echo "pass_list[", $row[0], "] = ", $row[1], ";" ;
		}
	echo "</script>";
?>

 

---

Nie wiem czy zwróciłem uwagę, że to są dwie różne metody.

1. z użyciem AJAX - doczytywanie za pomocą get() z pliku passwords.php gdzie używa sie `json_encode()`

2. bez użycia AJAX - w index.php generuje się kod JavaScript z hasłami i nie potrzebne jest `get().

Teraz masz wymieszane obie metody :)