Witaj Gościu! ( Zaloguj | Rejestruj )

Forum PHP.pl

 
 Reply to this topicStart new topic
> [JavaScript][AJAX][PHP] - Najprostszy przykład odczytu danych z bazy
php__amator
post
Post #1





Grupa: Zarejestrowani
Postów: 217
Pomógł: 1
Dołączył: 26.05.2011
Skąd: Moon

Ostrzeżenie: (10%)
X----

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
Go to the top of the page
+Quote Post
Turson
post
Post #2





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

Ostrzeżenie: (0%)
-----

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


Ten post edytował Turson 30.03.2014, 11:50:11
Go to the top of the page
+Quote Post
php__amator
post
Post #3





Grupa: Zarejestrowani
Postów: 217
Pomógł: 1
Dołączył: 26.05.2011
Skąd: Moon

Ostrzeżenie: (10%)
X----

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 (IMG:style_emoticons/default/smile.gif)
a do inputów nie chce mi wrzucić tych danych.

Co mam z tym zrobić ?

Pozdrawiam
php/js-amator do 2
Go to the top of the page
+Quote Post
Turson
post
Post #4





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

Ostrzeżenie: (0%)
-----

$('.customer_name') odnosi się do klasy. W przypadku id (jak masz) używa się # a nie .
Go to the top of the page
+Quote Post
php__amator
post
Post #5





Grupa: Zarejestrowani
Postów: 217
Pomógł: 1
Dołączył: 26.05.2011
Skąd: Moon

Ostrzeżenie: (10%)
X----

oj, sorry, tak tak, zapomniałem poprawić.
oczywiście że tam jest #
ale to nie rozwiązuje problemu (IMG:style_emoticons/default/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 (IMG:style_emoticons/default/smile.gif) (IMG:style_emoticons/default/smile.gif) (IMG:style_emoticons/default/smile.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.

Ten post edytował phpamator 30.03.2014, 20:57:15
Go to the top of the page
+Quote Post
Turson
post
Post #6





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

Ostrzeżenie: (0%)
-----

Pokaż normalnie wyglądający kod
Go to the top of the page
+Quote Post
php__amator
post
Post #7





Grupa: Zarejestrowani
Postów: 217
Pomógł: 1
Dołączył: 26.05.2011
Skąd: Moon

Ostrzeżenie: (10%)
X----

OOO hej Turson'ie (IMG:style_emoticons/default/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
Go to the top of the page
+Quote Post
Turson
post
Post #8





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

Ostrzeżenie: (0%)
-----

A gdzie $.ajax { } itd?
Go to the top of the page
+Quote Post
php__amator
post
Post #9





Grupa: Zarejestrowani
Postów: 217
Pomógł: 1
Dołączył: 26.05.2011
Skąd: Moon

Ostrzeżenie: (10%)
X----

<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.
Go to the top of the page
+Quote Post
Turson
post
Post #10





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

Ostrzeżenie: (0%)
-----

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
Go to the top of the page
+Quote Post
php__amator
post
Post #11





Grupa: Zarejestrowani
Postów: 217
Pomógł: 1
Dołączył: 26.05.2011
Skąd: Moon

Ostrzeżenie: (10%)
X----

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 ?
Go to the top of the page
+Quote Post
Turson
post
Post #12





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

Ostrzeżenie: (0%)
-----

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ę (IMG:style_emoticons/default/smile.gif)

Ten post edytował Turson 31.03.2014, 21:20:37
Go to the top of the page
+Quote Post
trueblue
post
Post #13





Grupa: Zarejestrowani
Postów: 6 806
Pomógł: 1828
Dołączył: 11.03.2014

Ostrzeżenie: (0%)
-----

Nie tablicę, a obiekt.
Go to the top of the page
+Quote Post
php__amator
post
Post #14





Grupa: Zarejestrowani
Postów: 217
Pomógł: 1
Dołączył: 26.05.2011
Skąd: Moon

Ostrzeżenie: (10%)
X----

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ć (IMG:style_emoticons/default/sad.gif)
Go to the top of the page
+Quote Post
Turson
post
Post #15





Grupa: Zarejestrowani
Postów: 4 291
Pomógł: 829
Dołączył: 14.02.2009
Skąd: łódź

Ostrzeżenie: (0%)
-----

W poście #2 dostałeś przykład
Go to the top of the page
+Quote Post
php__amator
post
Post #16





Grupa: Zarejestrowani
Postów: 217
Pomógł: 1
Dołączył: 26.05.2011
Skąd: Moon

Ostrzeżenie: (10%)
X----

Ano ano, ale ja ślepy jestem, jak kret ...
Dzięki Tursonie (IMG:style_emoticons/default/smile.gif)
Go to the top of the page
+Quote Post
« Następny starszy · Przedszkole · Następny nowszy »
 

Reply to this topicStart new topic
2 Użytkowników czyta ten temat (2 Gości i 0 Anonimowych użytkowników)
0 Zarejestrowanych:

 

Tryb wyświetlania: Standardowy · Przełącz na: Linearny+ · Przełącz na: Drzewo

Śledź ten temat · Wyślij temat na e-mail · Wydrukuj ten temat · Subskrybuj to forum

RSS Aktualny czas: 23.08.2025 - 02:23
Powered By IP.Board © 2025  IPS, Inc.
All changes by PHP.pl Administrators
Hosting zapewnia NQ.pl hosting, trac, svn