Przesyłanie danych poprzez AJAX a semantyka HTML

Question

Witam!

Czy jeżeli wysyłam dane z input'ów korzystając z AJAX $.post( ... ) to owe inputy powinny być w znaczniku <form></form> ? Jeżeli jest form to musi być submit a ten przycisk przechodzi do nowej strony a nie przesyła danych w tle, jak to powinno być rozwiązane ?

Abym wysłał dane z tych znaczników muszę je pobrać za pomocą $(...).val(); I tutaj mam kolejne pytanie, w kodzie HTML mam kilka input'ów:

<form>
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
    <input type="text">
</form

Pobierając wartości input'ów poprzez:

var input_data = [];

var i = 0;
$("form input[type=text').each( function () {
   
   input_data[i] =  $(this).val();
   i++;
});

Zawsze mam pewność że w indexie tablicy 0 znajdzie się wartość pierwszego od góry input'a ? Mogę co prawda do każdego input'a dodać id ale przy 8-9 input'ach to może się bałagan zrobić.

Answer 1

Źle do tego podchodzisz. Zamiast implementować osobny mechanizm obok formularzy, po prostu nadbuduj obsługę Ajaksa na formularzu: podepnij się pod zdarzenie submit formularza i je zablokuj.

Tego typu podejście nazywa się Progressive Enhancement.

Comments

Czyli pusty znacznik <form> bo adres pliku .php podaję w metodzie $.post() podpinam się pod submit, blokując zdarzenie. Teraz mam to zrobione na zwykłym przycisku onClick="send()"

---

Znów próbujesz rozdzielać Ajaksa od formularza. Wszystkie dane powinny być w kodzie HTML, tak samo jak adres pliku w form[action]. W JS po prostu te dane wykorzystujesz.

---

var postData = {
        'name'          : nn,
        'surname'       : ss

};

$.post("php/ajax_plik.php", postData , function( data ) { });

Czyli te dane ajax_plik.php mam za pomocą jQuery pobrać z form[action] i wstawić do $.post ?

---

Osobiście bym tak zrobił.

---

Dlaczego ?

---

Bo w tym momencie, jeśli JS nie zadziała, użytkownik wciąż może przesłać formularz.