PHP+mysql. Skrypt bez przeładowania

Question

Cześć , więc tak, poniżej podaję swój skrypt który jest w połowie dobry. Chce by skrypt pobierał dane z formularza, wysłał do drugiego skryptu PHP(insert) i teraz pytanie. Jak to mam zrobić i czy skrypt poniżej wgl coś robi?

<script type="text/javascript">
		$(function () {

        $('form').on('submit', function (e) {

          e.preventDefault();

          $.ajax({
            type: 'post',
            url: 'skrypt.php',
            data: $('form').serialize(),
            success: function () {
              alert('form was submitted');
            }
          });

        });

      });
		</script>

mutex/ocfipreoqyfb/mutex

Answer 1

http://kursjs.pl/kurs/jquery/jquery_ajax.php

Comments

Tak mam i wyskakuje mi alert że success ale mimo to nei doddaje danych do bazy...

no ja mutex/ocfipreoqyfb/mutex

---

To spróbuj serialize dokleić do url'a bo wydaje mi się, że zwraca stringa, a nie tablicę (pamiętaj żeby poprzedzić go pytajnikiem).

---

No i oczywiście zmień wtedy metodę na GET. A jeśli chcesz korzystać z POST i wartości data to musisz ręcznie pobrać wartości z inputów do np zmiennych i wstawić je w obiekt. Chyba że istnieje jakaś funkcja pobierająca dane z formularza w formie obiektu.

---

<script type="text/javascript">
        $(function () {

        $('form').on('submit', function (e) {

          e.preventDefault();
          
          var file = $("#file").val();
          var dataString = 'file='+ file;

          $.ajax({
            type: 'GET',
            url: 'skrypt.php',
            data: dataString.serialize(),
            success: function () {
              
              alert('fdfsdf');
              
            }
          });

        });

      });
        </script>

zrobiłem tak,i dalej nic

---

Nie, nie, nie..

Serialize() robi Ci z formularza tego stringa którego podajesz plikowi php metodą GET np. skrypt.php?wartosc=costam&wartosc1=costaminnego.

Kod wyglądał by więc tak:

$.ajax({
  type: 'GET',
  url: 'skrypt.php?'+$('form').serialize(),
  success: function () { alert('fdfsdf'); }
});

W wersji z użyciem metody POST tak:

var val1 = $('form input[0]');
var val2 = $('form input[1]');

$.ajax({
  type: 'POST',
  url: 'skrypt.php',
  data: {
    val1: val1,
    val2: val2
  },
  success: function () { alert('fdfsdf'); }
});

---

Wziąłem tak samo jak Ty i nic.. dodam że formularz jest typem file

---

Szczerze mówiąc to nigdy czegoś takiego nie robiłem, ale znalazłem ten post na StackOverflow, w którym jest przedstawiony cały kod którego musisz użyć.

var file_data = $('#sortpicture').prop('files')[0];
var form_data = new FormData();
form_data.append('file', file_data);

Definiujesz zmienną z Twoim inputem o typie file (w przykładzie jest to sprecyzowane za pomocą funkcji jQuery prop, ale jeśli korzystasz z atrybutu id tak jak należy (przypisujesz go tylko do jednego elemntu html) to jest to zbędne).

Następnie przypisujesz instancję obiektu FormData do zmiennej - będzie to takie pudełko, do którego za pomocą funkcji append będziesz mógł wrzucać kolejne wartości z inputów formularza, precyzując ich typ.

Wysyłasz całość po prostu podając to pudełko do wartości data w ajaxie.

 

Wspomniałeś, że chcesz dane z formularza wstawiać do bazy. W przypadku plików raczej robi się to w ten sposób, że pliki uploadujesz do jakiegoś katalogu na serwerze, a w bazie zapisujesz ścieżki do nich.

Potem (gdy plikiem jest zdjęciem) przy potrzebie wyświetlenia go na stronie php pobiera ścieżkę z bazy i wysyła ją do front-endu, który obudowuje ją w tag <img> - i gotowe.

Musisz skorzystać ze zmiennej $_FILES, tak jak jest to pokazane w poście. Jednak jest to skrypt który tylko uploaduje plik i obsługuje towarzyszące temu błędy. Jeśli chcesz np. ustawić maksymalny rozmiar pliku itp. to zapoznaj się z tym artykułem.

 

Korzystasz z ajaxa więc pamiętaj, żeby w razie błędu lub przekroczenia wielkości pliku zwrócić do js'a jakiegoś json'a z informacją o tym i wyświetlić ją użytkownikowi :)

Answer 2

refresh kod teraz wygląda tak

 

<script type="text/javascript">
        $(function () {

        $('form').on('submit', function (e) {

          e.preventDefault();
          
          var file = $("#file").val();
          var dataString ="file="+ file,

          $.ajax({
            type: "GET",
            url: "skrypt.php",
            data: dataString.serialize(),
            success: function () {
              
              alert('fsdfsd');
              
            }
          });

        });

      });
        </script>