Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [JavaScript][AJAX][PHP] - Najprostszy przykład odczytu danych z bazy
Forum PHP.pl > Forum > Przedszkole
php__amator
29.03.2014, 18:56:53
Witajcie przedszkolaki,
Sporo czasu upłynęło od ostatniego pytanie jakie zadałem, czas więc na kolejne.
Dzisiaj bardzo proszę o wsparcie w kwestii:
Formularz. w pierwszym polu mam podpięty skrypt odczytujący z bazy "na żywo" i gdy wpisujesz nazwisko, sprawdza czy takowe istnieje. Jeśli tak to wywala z boku w tabelce dane delikwenta.
Wszystko pięknie działa tylko, że te dane wywala w tabelce a ja chciałbym aby te dane lądowały w inputach i jakkolwiek radzę sobie z taką formą to nie potrafię (jeszcze) pobrać danych w inny sposób abym mógł rozrzucić je we wskazane miejsca.
Ktoś mocno zorientowany podpowiedział mi, że powinienem użyć JSON'a, przyznam się bez bicia - trochę poczytałem - ale nie za wiele jak narazie mi to pomogło.
jakby któryś z kolegów zechciał mi pomóc w tej kwestii. Poniżej skrypty.

Formularz:
[HTML] pobierz, plaintext 
  1. <head>
  2. <meta charset="utf-8">
  3. <title>Wprowadzanie danych</title>
  4. <link rel="stylesheet" type="text/css" href="styles/service.css" />
  5. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6. <script type="text/javascript" src="includes/jquery.min.js"></script>
  7. <script type="text/javascript">
  8. $(document).ready(function(){
  9.   $("#nazwisko").keyup(function(){
  10.     var kw = $("#nazwisko").val();
  11. 	if(kw != ''){$.ajax({ type: "POST",url: "szukaj_nazwisko.php",data: "kw="+ kw,success: function(option){
  12. 		   $("#results").html(option);}});
  13. 		   } else { $("#results").html("");
  14. 	 } return false;
  15. });  
  16.    $(".overlay").click(function(){
  17. 	 $("#results").css('display','none');
  18. });
  19.    $("#keywords").focus(function(){
  20.      $("#results").css('display','block');
  21. });
  22. });
  23. </script>
  24. </head>
  25. <body>
  26. <div class="ajax_body">
  27. <div id="inputbox" class="choice">
  28. <form action="detale.php" method="post">
  29. <table cellspacing="0" cellpadding="5">
  30. <thead>
  31. <tr><td id="cd" align="center" colspan="2">Dane klienta
  32.   </td></tr></thead>
  33. <tr>
  34. <td>
  35. Nazwisko
  36. </td>
  37. <td>
  38. <input id="nazwisko" name="klient_nazwisko" value="<?php echo $row['nazwisko'];?>" placeholder="Nazwisko klienta"></td></tr>
  39. <tr>
  40. <td width="192">
  41. Imię</td>
  42. <td width="163"><input name="klient_imie" value="<?php echo $row['nazwisko'];?>" placeholder="Imię klienta"></td></tr>
  43. <tr>
  44. <td><input type="submit" name="submit" value="Submit"></td><td><input type="reset" name="reset" value=" Reset "></td></tr>
  45. </table></form>
  46.  
  47. <div id="results">
  48. </div>
  49. </div>
  50.  
  51. </div>
  52. </body>
[HTML] pobierz, plaintext


Po stronie PHP:
[PHP] pobierz, plaintext 
  1. if(isset($_POST['kw']) && $_POST['kw'] != ''){
  2. 	require('includes/polaczenie.php');
  3. 	$dane_klienta = $_POST['kw'];
  4. 	$dane_klienta = mysql_real_escape_string($dane_klienta);
  5. 	$query = "SELECT * FROM klienci WHERE nazwisko_klienta LIKE '".$dane_klienta."%' LIMIT 6" ;
  6. 	$res = mysql_query($query);
  7. 	$count = mysql_num_rows($res);
  8. 	if($count > 0){
  9.     echo '<form method="post" action="detale.php"><table border="0" id="res" cellspacing="0" cellpadding="10">
  10. 	<thead class="thead"><td nowrap="nowrap">Nazwisko</td><td nowrap="nowrap">Imię</td><td nowrap="nowrap">Adres</td>
  11. 	<td nowrap="nowrap">Numer kontaktowy</td><td nowrap="nowrap"></td></thead>';
  12.     while($row = mysql_fetch_array($res))
  13. 	{
  14. 	 echo '<tr>
  15. <form action="detale.php" method="post"><td><input type="hidden" name="nazwisko_klienta" value="'.$row['nazwisko_klienta'].'">'.$row['nazwisko_klienta'].'</td>
  16. 	  <td nowrap="nowrap"><input type="hidden" name="imie_klienta" value="'.$row['nazwisko_klienta'].'">'.$row['imie_klienta'].'</td>
  17. 	  <td nowrap="nowrap"><input type="hidden" name="numer_domu" value="'.$row['numer_domu'].'"><input type="hidden" name="nazwa_ulicy" value="'.$row['nazwa_ulicy'].'">'.$row['numer_domu'].' '.$row['nazwa_ulicy'].'</td>
  18. 	  <td nowrap="nowrap"><input type="hidden" name="'.$contact.'" value="'.$contact.'">'.$contact.'</td>';
  19. 	  echo '<td align="center"><input id="laduj" type="submit" name="submit" value="Ładuj"></td><tr>';
  20. 	  }
  21. 	echo "</table></form>";
  22.   }
  23.   else
  24.   {
  25.     echo "<div id='no_result'><b>Klient niezarejestrowany !</b></div>";
  26.   }
  27. }
[PHP] pobierz, plaintext


Jak powinien wyglądać/co zmienić po stronie serwera (PHP) i co zmienić po stronie przeglądarki (JS)
żebym mógł w chwili odczytu dane osobnika od razu wrzucić do inputów w formularzu ?

Pozdrawiam
php/js amator
przedszkolak
Turson
30.03.2014, 11:49:16
Nie chce mi się dogłębnie analizować Twojego kodu, więc przykładowo pokażę po prostu przykład.

Plik PHP, który wywołujesz ajaxem
[PHP] pobierz, plaintext 
  1. <?php
  2. $return['imie'] = "Marcin";
  3. $reutrn['nazwisko'] = "Najman";
  4. echo json_encode($return);
[PHP] pobierz, plaintext


Tutaj chcesz władować tekst, który wyrzuci ajax
[HTML] pobierz, plaintext 
  1. <input id="imie">
  2. <input id="nazwisko">
[HTML] pobierz, plaintext

Teraz jak masz ajaxową funkcję success ona przyjmuje wartości z tego co zwrócił php, więc parsujesz jsona i masz tablicę
[JAVASCRIPT] pobierz, plaintext 
  1. success: function(msg){
  2.     var dane = jQuery.parseJSON(msg);
  3.     $('#imie').val(dane.imie);
  4.     $('#nazwisko').val(dane.nazwisko);
  5. }
[JAVASCRIPT] pobierz, plaintext
php__amator
30.03.2014, 17:19:07
Hejka Turson,
No coś tam się zaczyna dziać.
Zrobiłem tak:
w pętli while wrzuciłem
$return['customer_name'] = $row['customer_name'];
$return['customer_surname'] = $row['customer_surname'];
$return['house_number'] = $row['house_number'];
$return['street_name'] = $row['street_name'];
i buduje się tablica czego potwierdzeniem jest wyświetlony echo json_encode($return);
i wygląda tak:

{"customer_name":"Stefan","customer_surname":"Paprocki","house_number":"32","street_name":"Kołłątaja"}
{"customer_name":"Zygmunt","customer_surname":"Pieczka","house_number":"20","street_name":"Marynarzy"}
{"customer_name":"Piotr","customer_surname":"Kuczka","house_number":"54","street_name":"Zbrojna"}

Teraz skrypt
[HTML] pobierz, plaintext 
  1. [JAVASCRIPT] pobierz, plaintext 
    1. </div></li><li class="li2"><div class="de2">success: function(msg){</div></li><li class="li1"><div class="de1">    var dane = jQuery.parseJSON(msg);</div></li><li class="li2"><div class="de2">    $('.customer_name').val(dane.customer_name);</div></li><li class="li1"><div class="de1">    $('.customer_surname').val(dane.customer_surname);</div></li><li class="li2"><div class="de2">}</div></li><li class="li1"><div class="de1">
    [JAVASCRIPT] pobierz, plaintext 
  2.  
  3. <input id="customer_surname"> <!-- tu się nic nie dzieje -->
  4. <input id="customer_name"> <!-- i tu też się nic nie dzieje, inputy pozostają puste -->
  5.  
[HTML] pobierz, plaintext


efekt końcowy taki, że dostaję linie z danymi z każdego rekordu i to tyle smile.gif
a do inputów nie chce mi wrzucić tych danych.

Co mam z tym zrobić ?

Pozdrawiam
php/js-amator do 2
Turson
30.03.2014, 18:00:11
$('.customer_name') odnosi się do klasy. W przypadku id (jak masz) używa się # a nie .
php__amator
30.03.2014, 20:37:28
oj, sorry, tak tak, zapomniałem poprawić.
oczywiście że tam jest #
ale to nie rozwiązuje problemu smile.gif
A wogóle to zastanawiam się skąd się to wzięło:
</div>
</li>
<li class="li2">
<div class="de2">
success: function(msg){</div>
</li>
<li class="li1">
<div class="de1">
var dane = jQuery.parseJSON(msg);
</div>
</li>
<li class="li2">
<div class="de2">
$('.customer_name').val(dane.customer_name);</div></li><li class="li1"><div class="de1"> $('.customer_surname').val(dane.customer_surname);</div></li><li class="li2"><div class="de2">}</div></li><li class="li1"><div class="de1">
skoro wkleiłem zupełnie coś innego smile.gifsmile.gifsmile.gif
wkleiłem:
[HTML] pobierz, plaintext 
  1. [JAVASCRIPT] pobierz, plaintext 
    1. </div></li><li class="li2"><div class="de2">success: function(msg){</div></li><li class="li1"><div class="de1">    var dane = jQuery.parseJSON(msg);</div></li><li class="li2"><div class="de2">    $('#customer_name').val(dane.customer_name);</div></li><li class="li1"><div class="de1">    $('#customer_surname').val(dane.customer_surname);</div></li><li class="li2"><div class="de2">}</div></li><li class="li1"><div class="de1">
    [JAVASCRIPT] pobierz, plaintext 
  2. <div id="json">
  3. <table>
  4. <tr><td>Surname: </td><td><input type="text" id="customer_surname"></td></tr>
  5. <tr><td>Name: </td><td><input type="text" id="customer_name"></td></tr>
  6. </table>
  7. </div>
[HTML] pobierz, plaintext

Nie wiem skąd wzięły sie tagi<li></li>

Aaaa już wiem, jak wklejam kod na forum to samo dodaje takie bzdury.
Turson
30.03.2014, 22:03:39
Pokaż normalnie wyglądający kod
php__amator
30.03.2014, 22:53:05
OOO hej Turson'ie smile.gif
wkleje jak leci:

<script type="text/javascript">
success: function(msg){
var dane = jQuery.parseJSON(msg);
$('#customer_name').val(dane.customer_name);
$('#customer_surname').val(dane.customer_surname);
}
</script>
<input id="customer_surname" name="customer_surname" placeholder="Customer's surname">
<input id="customer_name" name="customer_name" placeholder="Customer's name">
a po stronie PHP
w pętli while wrzuciłem
$return['customer_name'] = $row['customer_name'];
$return['customer_surname'] = $row['customer_surname'];
$return['house_number'] = $row['house_number'];
$return['street_name'] = $row['street_name'];
jak pisałem tablica się buduje poprawnie, przynajmniej tak wygląda jak wyświetlam dane w $return
Turson
31.03.2014, 07:39:42
A gdzie $.ajax { } itd?
php__amator
31.03.2014, 19:03:21
<script>
$(document).ready(function(){
$("#nazwisko").keyup(function(){
var kw = $("#nazwisko").val();
if(kw != ''){$.ajax({ type: "POST",url: "szukaj_nazwisko.php",data: "kw="+ kw,success: function(option){
$("#results").html(option);}});
} else { $("#results").html("");
} return false;
});
$(".overlay").click(function(){
$("#results").css('display','none');
});
$("#keywords").focus(function(){
$("#results").css('display','block');
});
});
success: function(msg){
var dane = jQuery.parseJSON(msg);
$('#customer_name').val(dane.customer_name);
$('#customer_surname').val(dane.customer_surname);
}
</script>
<input id="customer_surname" name="customer_surname" placeholder="Customer's surname">
<input id="customer_name" name="customer_name" placeholder="Customer's name">
a po stronie PHP
w pętli while wrzuciłem
$return['customer_name'] = $row['customer_name'];
$return['customer_surname'] = $row['customer_surname'];
$return['house_number'] = $row['house_number'];
$return['street_name'] = $row['street_name'];

Luknij wyzej tam jest cały skrypt.

Turson
31.03.2014, 19:17:05
Używaj tagu javascript bo lepiej się go ogląda

nie
data: "kw="+ kw
a
data: { kw:kw}

i masz 2x success, gdzie ten o którym mowa leży nie tam gdzie trzeba
php__amator
31.03.2014, 19:29:52
a propo's zapisu data: "kw=" +kw i data: {kw:kw}
jaka różnica w działaniu obu tych form ?


no właśnie, gdzie powinien się znajdować ten o którym mowa ?
jak go włączyć do całości ?
w którym miejscu ?
Turson
31.03.2014, 21:15:55
Proponuję zajrzeć do przykładów http://api.jquery.com/jQuery.ajax/

Cytat
a propo's zapisu data: "kw=" +kw i data: {kw:kw}

przesyłasz tablicę, która będzie $_POST


@down,
nie zaprzeczę smile.gif
trueblue
31.03.2014, 21:18:44
Nie tablicę, a obiekt.
php__amator
2.04.2014, 21:11:36
No własnie ... i jak ten "obiekt" teraz rozbroić żeby elementy tego obiektu samoistnie właziły do okienek inputów ?

Walczę z tym i walczę i jak coś mi zaczyna działać to inne funkcje przestają ..... trochę mnie zaczyna trafiać sad.gif
Turson
2.04.2014, 21:58:10
W poście #2 dostałeś przykład
php__amator
3.04.2014, 00:02:25
Ano ano, ale ja ślepy jestem, jak kret ...
Dzięki Tursonie smile.gif
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.