Kawałek po kawałku buduję sobie całą funkcjonalność.
Mam w kodzie przycisk oraz formularz do logowania:
<form id="form1" name="ex_form" action="post.cgi" method="post">
<input id="get_response_strona" type="text" name="post_input" value ="0" style="visibility:hidden"/>
<input id="get_response_zalogowany" type="text" name="post_input" value ="5" style="visibility:hidden"/>
<table>
<tr>
<td>
<label for="username">Nazwa użytkownika:</label>
</td>
</tr>
<tr>
<td>
<input type="text" id="get_response_login" name="post_input">
</td>
</tr>
<tr>
<td>
<label for="password">Hasło:</label>
</td>
</tr>
<tr>
<td>
<input type="text" id="get_response_haslo" name="post_input">
</td>
</tr>
<tr>
<td><div id="lower">
<input type="checkbox"><label class="check" for="checkbox">Zapamiętaj mnie!</label>
</div></td>
</tr>
<tr>
<td><div align="center" id="lower">
<input type="submit" id="Login_id" value="Login">
<button id="get_button" type="button" onclick="make_request('get.cgi')">Pobierz aktualne ustawienia urządzenia</button>
</div></td>
</tr>
</table>
</form>
Łącząc kod z różnych źródeł wyprodukowałem coś takiego:
$function ($) { // czekamy na załadowanie DOM
$("form1") // znajdujemy formularz
.submit(function (event) { // rejestrujemy funkcję reagującą na zdarzenie wysłania formularza
var $form = $(this); // referencja do formularza, który jest wysyłany
event.preventDefault(); // nie pozwalamy przeglądarce przesłać formularza, bo sami to zrobimy ajaxem
$.ajax({ // wysyłamy ajaxem
url: $form.attr("action"), // tam gdzie wskazuje atrybut action
type: $form.attr("method"), // metodą jaką ma zdefiniowany formularz
data: $form.serialize() // serializujemy formularz i ustawiamy to jako dane do wysłania ajaxem
}).done(function (data) { // gdy udało się wysłać
}).fail(function () { // gdy wystąpił błąd
});
});
}
Wedle poniższego:
W <head></head> umieściłem:
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
Dobrze kombinuję?
Próbowałem uruchomić, niestety wciąż przycisk wysyła dane formularza oraz odświeżana jest strona (a więc działa klasyczny submit)
Znalazłem jeszcze coś takiego: http://krakiewicz.pl/jquery-pobieranie-pliku-wyslanie-danych-przez-ajax
Nie testowałem jeszcze.