Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: POST bez przeładowania strony
Forum PHP.pl > Forum > XML, AJAX
TwojPan
Czesc,

Nie znam zupepnie JS czy AJAX. Szukam najprostszego rozwiazania tj. podczas wcisniecia SUBMIT aby strona sie nie przeladowywala tylko nie wiem jakis ruchomy gif lub napis 'dodawanie tresci' i na koncu info ze zostalo dodane. Nic wiecej. Czy ktos moglby mi pomoc z tym i ma gotowe rozwiazanie ? Tresc z formulara beda zapisywane w osobnym pliku .php

Formularz zawiera pola checkbox, radio, text, textarea. Nie potrzebuje zadnej walidacji oniewaz nie musi zostac nic wybrane - to tylko opcja.
Szukam w necie od rana ale tylko jakies bardzo skomplikowane rzeczy po 200 lini kodu i zbyteczne wlasnie walidacje etc..

szukam czego naprawde prostego.
johny_s
http://malsup.com/jquery/form/
rad11
  1. $(document).ready(function() {
  2.  
  3. $('#submit').click(function() {
  4. $.ajax({
  5. type: "POST",
  6. url: "sciezka do pliku",
  7. data: $("#form").serialize(),
  8. beforeSend: function() {
  9. $('.loader').html('<img src="sciezka do gifu" />').show();
  10. },
  11. dataType: "html",
  12. success: function(result) {
  13. $("#error_message").html(result);
  14. $('.loader').html('<img src="sciezka do gifu" />').hide();
  15.  
  16. },
  17. error: function(xhr, ajaxOptions, thrownError) {
  18. alert(xhr.status);
  19. alert(thrownError);
  20. alert(ajaxOptions);
  21. $('.loader').html('<img src="sciezka do gifu" />').hide();
  22. }
  23. });
  24. return false;
  25.  
  26.  
  27. });
  28.  
  29. });
TwojPan
Cytat(johny_s @ 14.06.2014, 11:04:39 ) *

Dziekuje , sprawdze.

Cytat(rad11 @ 14.06.2014, 11:19:13 ) *
  1. $(document).ready(function() {
  2.  
  3. $('#submit').click(function() {
  4. $.ajax({
  5. type: "POST",
  6. url: "sciezka do pliku",
  7. data: $("#form").serialize(),
  8. beforeSend: function() {
  9. $('.loader').html('<img src="sciezka do gifu" />').show();
  10. },
  11. dataType: "html",
  12. success: function(result) {
  13. $("#error_message").html(result);
  14. $('.loader').html('<img src="sciezka do gifu" />').hide();
  15.  
  16. },
  17. error: function(xhr, ajaxOptions, thrownError) {
  18. alert(xhr.status);
  19. alert(thrownError);
  20. alert(ajaxOptions);
  21. $('.loader').html('<img src="sciezka do gifu" />').hide();
  22. }
  23. });
  24. return false;
  25.  
  26.  
  27. });
  28.  
  29. });

czy #submit to name=submit w <input type=submit> questionmark.gif? cy submit jako pole submit??
Turson
submit to id elementu
rad11
Tak jak Turson napisał.
TwojPan
Cytat(rad11 @ 14.06.2014, 11:42:58 ) *
Tak jak Turson napisał.

mozesz mi podac prykladowy formularz questionmark.gif
Turson
Formularz powinieneś wiedzieć jaki zrobić, a submit to
  1. <input type="submit" id="submit">
TwojPan
Cytat(Turson @ 14.06.2014, 16:49:48 ) *
Formularz powinieneś wiedzieć jaki zrobić, a submit to
  1. <input type="submit" id="submit">

Dzieki bardzo. Jeszcze nie mialem czasu tego sprawdzic ale zrobie to dzisiaj i dam znac. Jeszcze raz bardzo dziekuje.

Jeszcze mam pytanie male. Moze wydac sie glupie ale czy to "html" w tresci moze byc skoro bede mial pliki *.php ?
rad11
To html w tresci moze byc w tresci bo to jest skrypt jquery. A pozatym nie rozumiem dlaczego dales Tursonowi plusa jak to ja napisalem Ci skrypt ale to nic tacy sa ludzie haha.gif
TwojPan
Cytat(rad11 @ 16.06.2014, 07:06:18 ) *
To html w tresci moze byc w tresci bo to jest skrypt jquery. A pozatym nie rozumiem dlaczego dales Tursonowi plusa jak to ja napisalem Ci skrypt ale to nic tacy sa ludzie haha.gif

Sory nie zauwazylem. Zaraz Ci dam tego plusa biggrin.gif

Niestety cos nie dziala:

  1. <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
  2. <script type="text/javascript" src="ajax.js"></script>
  3. <form ACTION="save.php" method=post>
  4. <input TYPE="text" name="ble">
  5. <input TYPE="submit" id="submit" value=poslij>
  6. </FORM>


plik.js

  1. $(document).ready(function() {
  2.  
  3.  
  4.  
  5. $('#submit').click(function() {
  6.  
  7. $.ajax({
  8.  
  9. type: "POST",
  10.  
  11. url: "save.php",
  12.  
  13. data: $("#form").serialize(),
  14.  
  15. beforeSend: function() {
  16.  
  17. $('.loader').html('<img src="loader.gif" />').show();
  18.  
  19. },
  20.  
  21. dataType: "html",
  22.  
  23. success: function(result) {
  24.  
  25. $("#error_message").html(result);
  26.  
  27. $('.loader').html('<img src="loader.gif" />').hide();
  28.  
  29.  
  30.  
  31. },
  32.  
  33. error: function(xhr, ajaxOptions, thrownError) {
  34.  
  35. alert(xhr.status);
  36.  
  37. alert(thrownError);
  38.  
  39. alert(ajaxOptions);
  40.  
  41. $('.loader').html('<img src="sciezka do gifu" />').hide();
  42.  
  43. }
  44.  
  45. });
  46.  
  47. return false;
  48.  
  49.  
  50.  
  51.  
  52.  
  53. });
  54.  
  55.  
  56.  
  57. });


pik: save.php

  1. <?
  2. $foo = fopen($_POST['ble'], 'w');
  3. ?>


Nic sie nie wykonuje.
Turson
Używaj <?php zamiast <?
Nic nie wykonuje? Nic nie zwraca, bo tylko otwierasz plik a nie wyświetlasz jego zawartości
TwojPan
Cytat(Turson @ 16.06.2014, 07:27:09 ) *
Używaj <?php zamiast <?
Nic nie wykonuje? Nic nie zwraca, bo tylko otwierasz plik a nie wyświetlasz jego zawartości

Nie otwieram lecz probuje ustawic. 'w' ustawia plik. Nie ma znaczenia czy cos zapisze do srodka czy nie i czy to wyswietle. Powinien pik sie ustawic o nazwie z pola input.

rad11
  1. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  2. <script type="text/javascript">
  3. $(document).ready(function() {
  4.  
  5.  
  6.  
  7. $('#submit').click(function() {
  8.  
  9. $.ajax({
  10.  
  11. type: "POST",
  12.  
  13. url: "save.php",
  14.  
  15. data: $("#form").serialize(),
  16.  
  17. beforeSend: function() {
  18.  
  19. $('.loader').html('<img src="ajax-loader.gif" />').show();
  20.  
  21. },
  22.  
  23. dataType: "html",
  24.  
  25. success: function(result) {
  26.  
  27. $("#error_message").html(result);
  28.  
  29. $('.loader').html('<img src="ajax-loader.gif" />').hide();
  30.  
  31.  
  32.  
  33. },
  34.  
  35. error: function(xhr, ajaxOptions, thrownError) {
  36.  
  37. alert(xhr.status);
  38.  
  39. alert(thrownError);
  40.  
  41. alert(ajaxOptions);
  42.  
  43. $('.loader').html('<img src="ajax-loader.gif" />').hide();
  44.  
  45. }
  46.  
  47. });
  48.  
  49. return false;
  50.  
  51.  
  52.  
  53.  
  54.  
  55. });
  56.  
  57.  
  58.  
  59. });
  60.  
  61. </script>


  1. <form action="" method="post" id="form">
  2. <input type="text" name="input">
  3. <input type="submit" value="poslij" id="submit" >
  4. </form>
  5.  
  6. <div class="loader"></div>
TwojPan
Cytat(rad11 @ 16.06.2014, 09:26:56 ) *
  1. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  2. <script type="text/javascript">
  3. $(document).ready(function() {
  4.  
  5.  
  6.  
  7. $('#submit').click(function() {
  8.  
  9. $.ajax({
  10.  
  11. type: "POST",
  12.  
  13. url: "save.php",
  14.  
  15. data: $("#form").serialize(),
  16.  
  17. beforeSend: function() {
  18.  
  19. $('.loader').html('<img src="ajax-loader.gif" />').show();
  20.  
  21. },
  22.  
  23. dataType: "html",
  24.  
  25. success: function(result) {
  26.  
  27. $("#error_message").html(result);
  28.  
  29. $('.loader').html('<img src="ajax-loader.gif" />').hide();
  30.  
  31.  
  32.  
  33. },
  34.  
  35. error: function(xhr, ajaxOptions, thrownError) {
  36.  
  37. alert(xhr.status);
  38.  
  39. alert(thrownError);
  40.  
  41. alert(ajaxOptions);
  42.  
  43. $('.loader').html('<img src="ajax-loader.gif" />').hide();
  44.  
  45. }
  46.  
  47. });
  48.  
  49. return false;
  50.  
  51.  
  52.  
  53.  
  54.  
  55. });
  56.  
  57.  
  58.  
  59. });
  60.  
  61. </script>


  1. <form action="" method="post" id="form">
  2. <input type="text" name="input">
  3. <input type="submit" value="poslij" id="submit" >
  4. </form>
  5.  
  6. <div class="loader"></div>

Ok, teraz dziala smile.gif dane z formularza przekazywane sa do pliku save.php.
Mialbym jeszcze jedna prosbe jesli chodzi o ten przyklad jesli mozna.
Czy bylbys w stanie dorobic jeszcze jedna rzecz?questionmark.gif mianowicie jakies info / cos jak ten div class=loader / ze po wykonaniu wyswietla sie info ze dane zostaly przeslane.
Ja z tym sobie nie poradze.
Turson
Kod
success: function(result){
alert('ok');
}
TwojPan
Cytat(Turson @ 16.06.2014, 11:16:22 ) *
Kod
success: function(result){
alert('ok');
}
Fajnie, tylko gdzie to wsadzic biggrin.gif

Czy takie rozwiazanie jest poprawne ? / drugalinijka tylko dodana /

  1.  
  2. $('.loader').html('<img src="ajax-loader.gif" />').hide();
  3.  
  4.  
  5. alert('AJAX request made!');


Turson
[JAVASCRIPT] pobierz, plaintext
  1. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  2. <script type="text/javascript">
  3. $(document).ready(function() {
  4.  
  5.  
  6.  
  7. $('#submit').click(function() {
  8.  
  9. $.ajax({
  10.  
  11. type: "POST",
  12.  
  13. url: "save.php",
  14.  
  15. data: $("#form").serialize(),
  16.  
  17. beforeSend: function() {
  18.  
  19. $('.loader').html('<div class="loader"><img src="ajax-loader.gif" /></div>');
  20.  
  21. },
  22.  
  23. dataType: "html",
  24.  
  25. success: function(result) {
  26.  
  27. $("#error_message").html(result);
  28. alert('jakis tekst');
  29. $('div.loader').hide();
  30.  
  31.  
  32.  
  33. },
  34.  
  35. error: function(xhr, ajaxOptions, thrownError) {
  36.  
  37. alert(xhr.status);
  38.  
  39. alert(thrownError);
  40.  
  41. alert(ajaxOptions);
  42.  
  43. $('.loader').html('<img src="ajax-loader.gif" />').hide();
  44.  
  45. }
  46.  
  47. });
  48.  
  49. return false;
  50.  
  51.  
  52.  
  53.  
  54.  
  55. });
  56.  
  57.  
  58.  
  59. });
  60.  
  61. </script>
[JAVASCRIPT] pobierz, plaintext
rad11
mogles stworzyc poprostu pod formularzem:

  1. <div id='error_message'></div>


i np w skrypcie php zrobic prosty warunek ze jezeli foo sie wykona to dac echo ze sie udalo.

Po to miedzy innymi jest linijka

  1. $("#error_message").html(result);
TwojPan
Panowie slicznie dziekuje choc ten drugi przyklad nie za bardzo dziala. Tzn dzialac dziala ale nie wyswietla sie ten loader /ten caly ostatni przyklad/ Mniejsza z tym. Panowie, jak zrobic <div> ktory zaladuje sie z linkiem 'zamknij' zamiast alert ?

Cos w stylu:

  1. $('.loader').html('<div style="width:200px; height:200px; top:50%; left: 50%; background-color: grey; opacity: 0.8"><div style="vertical-align: middle; text-align: center"><img src="ajax-loader.gif" /></div></div>').show();


Turson
http://jqueryui.com/dialog/
TwojPan
panowie, nie bijcie:)

Probowalem gdzies te funkcje DIALOG

  1. $(function() {
  2.  
  3. $( "#dialog" ).dialog();
  4.  
  5. });


umiescic w kodzie ale nie wiem dlaczego po wywolaniu pliku tekst z diva pojawia sie pod formularzem / znika po kliknieciu i pojawia sie okno o ktore mi chodzi / Jak / gdzie to wsadzic w te funkcje questionmark.gif Teraz mam tak:

plik 'ajax.js'

  1. $(document).ready(function() {
  2.  
  3. $('#submit').click(function() {
  4.  
  5.  
  6. $.ajax({
  7.  
  8.  
  9. type: "POST",
  10.  
  11.  
  12. url: "save.php",
  13.  
  14.  
  15.  
  16. data: $("#form").serialize(),
  17.  
  18.  
  19.  
  20. beforeSend: function() {
  21.  
  22.  
  23.  
  24. $('.loader').html('<div class="loader"><img src="ajax-loader.gif" /></div>');
  25.  
  26.  
  27. $(function() {
  28. $( "#dialog" ).dialog();
  29. });
  30.  
  31. },
  32.  
  33.  
  34.  
  35. dataType: "html",
  36.  
  37.  
  38.  
  39. success: function(result) {
  40.  
  41.  
  42.  
  43. $("#error_message").html(result);
  44.  
  45. alert('jakis tekst');
  46.  
  47. $('div.loader').hide();
  48.  
  49.  
  50.  
  51. },
  52.  
  53.  
  54.  
  55. error: function(xhr, ajaxOptions, thrownError) {
  56.  
  57.  
  58.  
  59. alert(xhr.status);
  60.  
  61.  
  62.  
  63. alert(thrownError);
  64.  
  65.  
  66.  
  67. alert(ajaxOptions);
  68.  
  69.  
  70.  
  71. $('.loader').html('<img src="ajax-loader.gif" />').hide();
  72.  
  73.  
  74.  
  75. }
  76.  
  77.  
  78.  
  79. });
  80.  
  81.  
  82.  
  83. return false;
  84.  
  85.  
  86.  
  87.  
  88. });
  89.  
  90.  
  91. });


plik z formularzem

  1. <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
  2. <script src="ajax.js"></script>
  3. <link rel="stylesheet" href="//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
  4. <script src="//code.jquery.com/jquery-1.10.2.js"></script>
  5. <script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
  6.  
  7.  
  8.  
  9. <form action="save.php" method="post" id="form">
  10.  
  11. <input type="text" name="input">
  12. <input TYPE="checkbox" name="checkb" value="aaa">
  13.  
  14. <input type="submit" value="poslij" id="submit" >
  15.  
  16. </form>
  17.  
  18.  
  19.  
  20. <div class="loader"></div>
  21. <div id="dialog" title="Basic dialog">
  22. <p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
  23. </div>


Na samym dole jest ten div ktory sie wyswietla na samym poczatku. Znika po kliknieciu.Co zrobic aby sie nie wyswietlal pod formuarzem lecz tylko po przeslaniu formularza w tym okienku
rad11
To umiesc go w success jak ma sie wyswietlic po wykonaniu skryptu.
TwojPan
Wiesz, ja jestem poczatkujacym w te klocki. Moglbys pomoc ?
Robie tak ale to wydaje mi sie zupelnie bez sensu. no i oczywiscie nie dziala.

  1. success: function(result) {
  2.  
  3. $("#error_message").html(result);
  4.  
  5. $(function() {
  6.  
  7. $("#dialog").html('<div id="dialog" title="informacja w tytule"><p>Dane zostały prawidłowo wprowadzone.</p></div>').dialog();
  8.  
  9. });
  10.  
  11. $('div.loader').hide();
Turson
Musisz mieć w dokumencie gdzieś załadowanego tego diva, bo ładujesz do <div id="dialog"></div> to a pewnie nawet tego nie masz.
Stwórz pusty taki div, odwołaj się po prostu
$('#dialog').text('Dane zostały prawidłowo wprowadzone.').dialog();
i kontroluj konsolę js
TwojPan
Cytat(Turson @ 16.06.2014, 19:54:41 ) *
Musisz mieć w dokumencie gdzieś załadowanego tego diva, bo ładujesz do <div id="dialog"></div> to a pewnie nawet tego nie masz.
Stwórz pusty taki div, odwołaj się po prostu
$('#dialog').text('Dane zostały prawidłowo wprowadzone.').dialog();
i kontroluj konsolę js
No, wlasnie myslalem zeby wywolac to w funkcji czyli tekst a wsadzic to w div ale nie wiedzialem ze jest takie cos jak TEKST() i probowalem html biggrin.gif

Male pytanko. Znasz jakis dobry kurs ajax taki dla poczatkujacych opisujacy skladnie / funkcje ?

Dziekuje za pomoc
Turson
html() czy text() jedno i drugie by zadziałało.
W ajaxie nie trzeba znać nic więcej niż type, data, url, success, beforeSend i error
http://api.jquery.com/jQuery.ajax/
TwojPan
Panowie jest problem. Mam plik inex.php i tam na instrukcji switch(); w jednym z wywolan jest formularz ten sam co podany byl w przykladach i ten sam przyklad skryptu ajax. Problem w tym ze jak dam w url link do tego pliku: "index.php?id=ok" to nie wykonuje sie error lecz succes z tym ze jednoczesnie nic sie nie wykonuje. Instrukcja switch() nie zawiera takiego id wiec powinno zwracac error Troche to bez sensu bo jest info z succes ale nie wykonuje sie. Jesli zmienie url na inny plik lub id wystepuje juz w instrukcji switch() to juz jest dobrze. Co jest nie tak questionmark.gif
Turson
Ajax nie sprawdza kodu PHP czy masz tam w switch to id, tylko czy link jest dobry itd, a że jest dobrym to zwraca success
TwojPan
Cytat(Turson @ 22.06.2014, 19:06:27 ) *
Ajax nie sprawdza kodu PHP czy masz tam w switch to id, tylko czy link jest dobry itd, a że jest dobrym to zwraca success

Nie wiem czy sie rozumiemy.

w pliku ajax.js nalezy podac url i jesli podam url pliku gdzie znajduje sie formuar tylko wywolam go parametrem =id=costam i ten id istnieje to wykona sie ale jesli zmienie id z id=costam na id=costam2 /teraz juz nie ma takiego/ to nie wykona sie error lecz succes przy czym nic sie nie wykona /kod php/ bo nie ma takiego id tyle ze nie wiadomo dlaczego nie wykonuje sie error.

Dziwne jest to ze kiedy w url w pliku ajax.js podam adres innego pliku z TAKA sama budowa oparta o switch() to juz jest ok. Te same id i ten sam kod lecz musze to wsadzic w inny plik. Widac ze problemem jest odwolanie sie do tego samego pliku gdzie jest formularz no bo innego wyjasnienia nie ma.
Turson
Jeżeli nie masz ustawionych reguł dla linków, to jest bez różnicy czy adres to ?id=123 czy ?id=dupa, bo ajax zawsze w tym przypadku zwróci sukces, bo taki link jest poprawny. Ze swojej strony w PHP możesz ustalić, że jeżeli parametr jest inny niż oczekujesz, ustawiasz nagłówki na błąd np. 404 i ajax już nie przejdzie
TwojPan
Cytat(Turson @ 22.06.2014, 19:48:11 ) *
Jeżeli nie masz ustawionych reguł dla linków, to jest bez różnicy czy adres to ?id=123 czy ?id=dupa, bo ajax zawsze w tym przypadku zwróci sukces, bo taki link jest poprawny. Ze swojej strony w PHP możesz ustalić, że jeżeli parametr jest inny niż oczekujesz, ustawiasz nagłówki na błąd np. 404 i ajax już nie przejdzie
To wiec dlaczego jesli podam inny plik w url pliku z js to bedzie dzialalo ? Wtedy dziala prawidlowo error i succes.
Jesli jest to w jednym pliku to juz nie dziala.
Switch() ma instrukcje default dla id ktorego nie ma a i tak przechodzi.
fate
zrob adres: ./index.php?x=y

Moze masz pliki porozrzucane po folderach i problemem jest względność ścież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.