Nie będziesz w stanie tego łatwo zrobić za pomocą zwykłego javascript. Kiedy wysyłasz formularz, dane wejściowe formularza są wysyłane na serwer, a Twoja strona jest odświeżana - dane są obsługiwane po stronie serwera. Oznacza to, że submit()
funkcja w rzeczywistości nic nie zwraca, po prostu wysyła dane formularza na serwer.
Jeśli naprawdę chciałeś uzyskać odpowiedź w JavaScript (bez odświeżania strony), musisz użyć AJAX, a kiedy zaczniesz mówić o używaniu AJAX, będziesz musiał użyć biblioteki. jQuery jest zdecydowanie najpopularniejszym i moim ulubionym. Jest świetna wtyczka do jQuery o nazwie Form, która zrobi dokładnie to, co chcesz.
Oto jak używałbyś jQuery i tej wtyczki:
$('#myForm')
.ajaxForm({
url : 'myscript.php', // or whatever
dataType : 'json',
success : function (response) {
alert("The server says: " + response);
}
})
;
var xhr = new XMLHttpRequest() xhr.open("POST", "myscript.php"); xhr.onload=function(event){ alert("The server says: " + event.target.response); }; var formData = new FormData(document.getElementById("myForm")); xhr.send(formData);
Alternatywą Ajax jest ustawienie niewidocznego
<iframe>
jako elementu docelowego formularza i odczytanie jego zawartości<iframe>
w jegoonload
module obsługi. Ale po co zawracać sobie głowę Ajaxem?Uwaga: chciałem tylko wspomnieć o tej alternatywie, ponieważ niektóre odpowiedzi twierdzą, że nie da się tego osiągnąć bez Ajax.
źródło
<iframe>
POST (z oddzwonieniem doparent
). Zarówno do pobierania, jak i przesyłania ...Waniliowy sposób Javascript inny niż jQuery, wyodrębniony z komentarza 12me21:
W
POST
przypadku domyślnym typem zawartości jest „application / x-www-form-urlencoded”, co odpowiada temu, co wysyłamy w powyższym fragmencie. Jeśli chcesz wysłać „inne rzeczy” lub w jakiś sposób je ulepszyć, zajrzyj tutaj, aby uzyskać szczegółowe informacje.źródło
<input type='button' onclick="submitForm(); return false;">
lub możesz dodać odbiornik zdarzenia dla zdarzenia „submit”, takiego jak Marcus ”: stackoverflow.com/a/51730069/32453Robię to w ten sposób i to działa.
źródło
event.preventDefault();
(event
= pierwszy argument funkcji przesyłania) zamiastreturn false
. Zwrócenie wartości false nie tylko zatrzyma przeglądarkę przed wysłaniem formularza, ale także powstrzyma inne skutki uboczne, które mogą być ważne. Tam są wiele z pytań związanych do tego.FormData($("myform")[0])
jeśli próbujesz wprowadzić typ wejściowy = przesyłanie pliku.event.target.action
i$(event.target).serialize()
zamiast$('#form').attr('action')
i$('#form').serialize()
.Przyszli poszukiwacze internetu:
W przypadku nowych przeglądarek (od 2018: Chrome, Firefox, Safari, Opera, Edge i większość przeglądarek mobilnych, ale nie IE)
fetch
jest to standardowy interfejs API, który upraszcza asynchroniczne wywołania sieciowe (do których potrzebowaliśmyXMLHttpRequest
lub jQuery$.ajax
).Oto tradycyjna forma:
Jeśli otrzymałeś formularz taki jak powyższy (lub utworzyłeś go, ponieważ jest to semantyczny html), możesz opakować
fetch
kod w detektor zdarzeń, jak poniżej:(Lub, jeśli tak jak oryginalny plakat chcesz wywołać go ręcznie bez zdarzenia przesyłania, po prostu umieść
fetch
tam kod i przekaż odwołanie doform
elementu zamiast używaćevent.target
).Dokumenty:
Pobierz: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
Inne: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript Ta strona w 2018 roku nie wspomina o pobieraniu (jeszcze). Ale wspomina, że sztuczka target = "myIFrame" jest przestarzała. Zawiera również przykład form.addEventListener dla zdarzenia „submit”.
źródło
Nie jestem pewien, czy rozumiesz, co robi funkcja submit () ...
Kiedy to zrobisz,
form1.submit();
informacje z formularza są wysyłane do serwera WWW.WebServer zrobi wszystko, co powinien i zwróci klientowi zupełnie nową stronę internetową (zwykle ta sama strona, na której coś się zmieniło).
Nie ma więc możliwości "złapania" powrotu akcji form.submit ().
źródło
Nie ma oddzwaniania. To jak podążanie za linkiem.
Jeśli chcesz przechwycić odpowiedź serwera, użyj AJAX lub opublikuj ją w ramce iframe i pobierz to, co pojawia się tam po
onload()
zdarzeniu iframe .źródło
Możesz
event.preventDefault()
w module obsługi kliknięć przycisku przesyłania, aby upewnić się, żesubmit
zdarzenie domyślne formularza HTML nie zostanie uruchomione (co prowadzi do odświeżenia strony).Inną alternatywą byłoby użycie bardziej skomplikowanych znaczników formularza: jest to użycie
<form>
itype="submit"
to przeszkadza tutaj w pożądanym zachowaniu; ponieważ ostatecznie prowadzą one do odświeżania strony przez zdarzenia kliknięcia.Jeśli chcesz nadal korzystać
<form>
, a nie chcesz pisać zwyczaj kliknij teleskopowe, można użyć jQuery wajax
sposób, który Abstracts całą problemu z dala dla ciebie wystawiając metod obietnicasuccess
,error
itpPodsumowując, możesz rozwiązać swój problem:
• zapobieganie domyślnemu zachowaniu funkcji obsługi poprzez użycie
event.preventDefault()
• używanie elementów, które nie mają domyślnego zachowania (np.
<form>
)• przy użyciu jQuery
ajax
(Właśnie zauważyłem, że to pytanie pochodzi z 2008 roku, nie wiem, dlaczego pojawiło się w moim kanale; w każdym razie mam nadzieję, że jest to jasna odpowiedź)
źródło
Oto mój kod do tego problemu:
źródło
Jeśli chcesz przechwycić dane wyjściowe żądania AJAX za pomocą przeglądarki Chrome, możesz wykonać następujące proste kroki:
źródło
źródło
Opierając się na odpowiedzi @rajesh_kw ( https://stackoverflow.com/a/22567796/4946681 ), zajmuję się błędami i sukcesami postów:
Używam
this
moja logika była wielokrotnego użytku, oczekuję, że HTML zostanie zwrócony po pomyślnym zakończeniu, więc renderuję go i zastępuję bieżącą stronę, aw moim przypadku oczekuję przekierowania na stronę logowania, jeśli sesja wygasła, więc Przechwytuję to przekierowanie, aby zachować stan strony.Teraz użytkownicy mogą logować się za pośrednictwem innej karty i ponownie próbować przesłać.
źródło
Musisz używać AJAX. Wysłanie formularza zazwyczaj powoduje załadowanie nowej strony przez przeglądarkę.
źródło
Możesz to zrobić za pomocą technologii javascript i AJAX. Spójrz na jquery i dołącz do tego formularza . Wystarczy dołączyć dwa pliki js, aby zarejestrować wywołanie zwrotne dla formularza form.submit.
źródło
Możesz to osiągnąć za pomocą jQuery i
ajax()
metody:źródło
przede wszystkim użyj $ (document) .ready (function ()) wewnątrz tego use ('formid'). submit (function (event)), a następnie uniemożliwić domyślną akcję po wywołaniu formularza Ajax przesłanie $ .ajax ({,,, ,}); weźmie parametr, który możesz wybrać zgodnie z wymaganiami, a następnie wywołaj funkcję powodzenia: function (data) {// zrób, co chcesz, mój przykład umieści odpowiedź html na div}
źródło
Przede wszystkim będziemy potrzebować serializeObject ();
następnie piszesz podstawowy post i otrzymujesz odpowiedź
źródło
Mam następujący kod perfactly uruchomiony przy użyciu Ajax z wieloczęściowymi danymi formularza
źródło
Możesz użyć jQuery.post () i zwrócić ładnie ustrukturyzowane odpowiedzi JSON z serwera. Umożliwia również weryfikację / oczyszczanie danych bezpośrednio na serwerze, co jest dobrą praktyką, ponieważ jest bezpieczniejsze (a nawet łatwiejsze) niż robienie tego na kliencie.
Na przykład, jeśli chcesz wysłać formularz html na serwer (do saveprofilechanges.php) z danymi użytkownika w celu prostej rejestracji:
I. Części klienta:
Część Ia HTML:
Część Ib Script:
II. Część serwerowa (saveprofilechanges.php):
źródło
możesz to zrobić bez Ajax.
napisz swoje polubienie poniżej.
.. .. ..
a następnie w „action.php”
następnie po frmLogin.submit ();
przeczytaj zmienną $ submit_return ..
$ submit_return zawiera zwracaną wartość.
powodzenia.
źródło