Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: Ajax metoda POST
Forum PHP.pl > Forum > XML, AJAX
damianooo
20.09.2012, 17:17:08
Witam ,

Korzystam z wtyczki jQuery "Sortable" która umożliwia mi sortowanie w dowolny sposób elementów na ekranie i teraz tak:

zrobiłem coś takiego:

[HTML] pobierz, plaintext 
  1. $(function() {
  2.     $("#sortable").sortable({
  3.         stop: function(event, ui) {
  4. 	      var result = $('#sortable').sortable('toArray');
  5.         }
  6.     });
  7.  
  8.     $.ajax({
  9.         type: "POST",
  10.         url: "test.php",
  11.         data: result
  12.     });
  13.  
  14. });
[HTML] pobierz, plaintext


otrzymuję tablicę danych zapisanych w zmiennej "result" i przesyłem ją metodą Ajax do skryptu PHP ...

czy dobrze to robię ? I jak powinienem odebrać to po stronie PHP ?

dzięki ...









szalek01
20.09.2012, 17:42:00 
[PHP] pobierz, plaintext 
  1. <script>
  2.     $(function() {
  3.         $( "#sortable" ).sortable();
  4.         $('#sortable').sortable({
  5.             update: function(event, ui) {
  6.                 var result = $(this).sortable('toArray').toString();
  7.                 saveOrder(result);
  8.             }
  9.         });
  10.     });
  11.  
  12.     function saveOrder(_order){
  13.         $.ajax({
  14.             url: 'test.php',
  15.             type: "POST",
  16.             data: {
  17.                 order:_order
  18.             },
  19.             success: function(data){
  20.                  console.log(data);
  21.             }
  22.         });
  23.     }
  24. </script>
[PHP] pobierz, plaintext


a w php odbierasz dane poprzez
[PHP] pobierz, plaintext 
  1. $order = $_POST['order'];
[PHP] pobierz, plaintext
damianooo
20.09.2012, 19:48:22
ok , dzięki


tylko z tym odebraniem mam mały kłopot
Mam tak (to jest ten plik test.php do którego Ajax przesyła dane):

[PHP] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <link rel="stylesheet" type="text/css" media="screen" href="css/jquery-ui-1.8.23.custom.css" />
  4. <script type="text/javascript" src="18-jquery.js"></script>
  5. <script type="text/javascript" src="uicore.js"></script>
  6. <script type="text/javascript" src="uiwidget.js"></script>
  7. <script type="text/javascript" src="uimause.js"></script>
  8. <script type="text/javascript" src="uisortable.js"></script>
  9. <script type="text/javascript" src="wybor.js"></script>
  10. </head>
  11. <body>
  12.  
  13. <ul id="sortable">
  14. <li id="test_01">test_01</li>
  15. <li id="test_02">test_02</li>
  16. <li id="test_03">test_03</li>
  17. <li id="test_04">test_04</li>
  18. <li id="test_05">test_05</li>
  19. <li id="test_06">test_06</li>
  20. </ul>
  21.  
  22. <?php echo "rekordy w są obecnie w następującej kolejności: ".$order = $_POST['order']; ?>
  23.  
  24. </body>
  25. </html>
[PHP] pobierz, plaintext



ale coś tutaj nie gra i nie bardzo wiem jak to przetworzyć
szalek01
20.09.2012, 20:36:50
Ok już chyba wiem, przesyłasz dane na ten sam plik gdzie masz listę, to tak nie działa.
Przygotuj drugi plik np test2.php na który wysyłaj dane z ajaxa. Co wysyłasz podejrzyj w Firebugu lub (Shift+Control+I) w Chrom, zakładka Network. W test.php masz html i js w test2.php będziesz odbierał dane i zapisywał do bazy.

ps: jestem w trakcie przygotowywanie Ci kompletnego przykładu, jeśli zrobisz sam daj znać.

sort.php
[PHP] pobierz, plaintext 
  1. <html>
  2. <head>
  3. <script type="text/javascript" src="jquery-1.8.0.min.js"></script>
  4. <script type="text/javascript" src="jquery-ui-1.8.23.custom.min.js"></script>
  5.  
  6. </head>
  7. <body>
  8.  
  9. <ul id="sortable">
  10.     <li id="_1">test_01</li>
  11.     <li id="_2">test_02</li>
  12.     <li id="_3">test_03</li>
  13.     <li id="_4">test_04</li>
  14.     <li id="_5">test_05</li>
  15.     <li id="_6">test_06</li>
  16. </ul>
  17.     <br/>
  18.     <div id="data">
  19.     </div>
  20.  
  21. <script>
  22.     $(function() {
  23.         $( "#sortable" ).sortable();
  24.         $('#sortable').sortable({
  25.             update: function(event, ui) {
  26.                 var result = $(this).sortable('toArray').toString();
  27.                 saveOrder(result);
  28.             }
  29.         });
  30.     });
  31.  
  32.     function saveOrder(_order){
  33.         $.ajax({
  34.             url: 'data.php',
  35.             type: "POST",
  36.             data: {
  37.                 order:_order
  38.             },
  39.             success: function(data){
  40.                  $('#data').html(data);
  41.             }
  42.         });
  43.     }
  44. </script>
  45.  
  46.  
  47. </body>
  48. </html>
[PHP] pobierz, plaintext


plik data.php

[PHP] pobierz, plaintext 
  1. <?php
  2.     //var_dump($_POST['order']);
  3.     $newOrderID = explode(',',$_POST['order']);
  4.     $order = 0;
  5.     foreach($newOrderID as $item)
  6.     {
  7.         echo 'Element ='.str_replace('_','',$item).' jego pozycja='.$order.'<br/>';
  8.         $order++;
  9.  
  10.     }
  11. ?>
[PHP] pobierz, plaintext
damianooo
20.09.2012, 20:58:38
ok działa super wielkie dzięki ...
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.