Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Problem z pobieraniem danych z bazy MYSQL w tle
Forum PHP.pl > Forum > XML, AJAX
Artheso
31.03.2010, 13:46:34
Witam... znalazłem skrypt wysyłania danych bez przeładowania strony... działa on bez zarzutu... tak on wygląda:
index.php
[PHP] pobierz, plaintext 
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  5. <title>Dodawanie rekordu do bazy MySQL za pomocÄ&#8230; jQuery | www.WEBskrypty.pl</title>
  6. <script src="http://code.jquery.com/jquery-latest.js"></script>
  7.  
  8. <style type="text/css">
  9. #content{
  10.    font-family: Verdana;
  11.    font-size: 14px;
  12.    color: #333333;
  13.    width: 900px;
  14.    margin: 50px auto;
  15. }
  16.  
  17. a {
  18.    color: #db0f27;
  19.    margin: 0;
  20.    padding: 0;
  21.    text-decoration: underline;
  22. }
  23.  
  24. .logo a {
  25.    width: 241px;
  26.    height: 57px;
  27.    margin: 13px;
  28.    padding: 0;
  29.    display: block;
  30.    background: url(webskrypty_logo.png) no-repeat;
  31. }
  32.  
  33. legend {
  34.    font-weight: bold;
  35.    color: #2bb1d8;
  36.    font-size: 16px;
  37. }
  38.  
  39. fieldset {
  40.    border: 1px solid #cecece;
  41.    margin: 0;
  42.    padding: 13px;
  43. }
  44.  
  45. input {
  46.    padding: 3px;
  47.    margin: 3px 0px;
  48. }
  49.  
  50. #submit{
  51. 	margin: 0;
  52. 	padding: 6px 14px;
  53. 	text-shadow: 1px 1px 0px #ffffff;
  54.  
  55. }
  56.  
  57. .dodano {
  58.    margin: 0;
  59.    padding: 0px 0px 0px 13px;
  60. }
  61.  
  62. .tick {
  63.    vertical-align: middle;
  64.    margin: -2px 6px 0px 0px;
  65.    padding: 0;
  66. }
  67.  
  68. .info {
  69.    margin: 0;
  70.    padding: 0px 0px 0px 13px;
  71. }
  72. </style>
  73.  
  74. <script type"text/javascript">
  75. $(document).ready(function(){
  76.    $("form#submit").submit(function() {
  77.       // Przechwytujemy wartości z formularza i przesyłamy je do pliku insert.php
  78.       var imie = $('#imie').attr('value');
  79.       var nazwisko = $('#nazwisko').attr('value');
  80.       $.ajax({
  81.          type: "POST",
  82.          url: "insert.php",
  83.          data: "imie="+ imie + "&nazwisko=" + nazwisko,
  84.          success: function(){
  85.             // Wyświetlamy wiadomość o poprawnym dodaniu użytkownika	
  86.             $('div.dodano').fadeIn(400);
  87.             // Usuwamy wiadomość o poprawnym dodaniu użytkownika po 4 sekundach
  88.             setTimeout(function(){ $("div.dodano").fadeOut(400) }, 4000);
  89.          }
  90.       });
  91. 	return false;
  92. 	});
  93. });
  94. </script>
  95. </head>
  96. <body>
  97.  
  98. <div id="content">
  99. <div class="logo"><a href="http://www.webskrypty.pl/dodawanie-rekordu-do-bazy-mysql-za-pomoca-jquery/"></a></div>
  100. <form id="submit" method="post" name="submit" action="">
  101. 			<fieldset>
  102. 				<legend>DODAJ UĹťYTKOWNIKA</legend>
  103.  
  104. 				<label for="imie">ImiÄ&#8482;:</label>
  105. 				<br />
  106. 				<input type="text" name="imie" id="imie" class="text" size="20" />
  107. 				<br />
  108. 				<label for="nazwisko">Nazwisko:</label>
  109. 				<br />
  110. 				<input type="text" name="nazwisko" id="nazwisko" class="text" size="20" />
  111. 				<br /><br />
  112.  
  113. 				<button type="submit" id="submit"> Dodaj uĹĽytkownika </button>
  114. 			</fieldset>
  115. </form>
  116.  
  117. <div class="dodano" style="display:none;">
  118.    <p><img class="tick" src="tick.png" alt="" />UĹĽytkownik zostaĹ&#8218; dodany do bazy.</p>
  119. </div>
  120. <div class="info">
  121.    <p>&laquo; <a href="http://www.webskrypty.pl/dodawanie-rekordu-do-bazy-mysql-za-pomoca-jquery/">WrĂłÄ&#8225; do artykuĹ‚u</a></p>
  122. </div>		
  123. </div>
  124.  
  125. </body>
  126. </html>
[PHP] pobierz, plaintext



insert.php
[PHP] pobierz, plaintext 
  1. <?php
  2.    //Odbieranie danych metodÄ… post
  3.    $imie = htmlspecialchars(trim($_POST['imie']));
  4.    $nazwisko = htmlspecialchars(trim($_POST['nazwisko']));
  5.  
  6.    //Konfiguracja połączenia z baza mysql
  7.    $baza_host=(""); // PrzewaĹĽnie localhost
  8.    $baza_login=(""); // Login do bazy
  9.    $baza_haslo=(""); // Hasło do bazy
  10.    $baza_nazwa=(""); // Nazwa bazy
  11.  
  12.    //Łączenie się z bazą mysql
  13.    $polaczenie = mysql_connect($baza_host, $baza_login, $baza_haslo);
  14.    $db = mysql_select_db($baza_nazwa);
  15.  
  16.    //Dodawanie rekordĂłw do bazy mysql
  17.    $dodaj  = "INSERT INTO uzytkownicy (imie,nazwisko) VALUES ('$imie','$nazwisko')";
  18.    mysql_query($dodaj) or die(mysql_error());
  19.    mysql_close($polaczenie);
  20. ?>
[PHP] pobierz, plaintext


I teraz czas na pytanie... Jak zrobić pobieranie danych z bazy mysql bez odświeżania strony? Chodzi mi o coś podobnego do tego skryptu z wysyłaniem, tylko żeby zamiast wysyłania byłoby pobieranie danych z tabeli... Z niecierpliwością czekam na odpowiedzi.

Pozdrawiam, Artheso
mortus
31.03.2010, 14:50:17
Zainteresuj się tym, może trochę rozjaśni sprawę. Ogólnie używasz do tego menu, przechwytujesz akcję kliknięcia w link, pobierasz z tego linku adres (href) i odpowiednio przerabiasz, a na końcu wywołujesz metodę $.ajax, która w przypadku powodzenia uaktualnia odpowiedni element html.
Artheso
31.03.2010, 15:32:12
A mógłbyś mi powiedzieć dokładniej, jak to zrobisz? Tak się składa, że z php mam do czynienia dopiero od kilku dni, a z ajaxem to dopiero dzisiaj zaczynam ;/
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.