Anda tidak akan dapat melakukan ini dengan mudah dengan javascript biasa. Saat Anda memposting formulir, input formulir dikirim ke server dan halaman Anda di-refresh - data ditangani di sisi server. Artinya, submit()
fungsinya tidak benar-benar mengembalikan apa pun, itu hanya mengirim data formulir ke server.
Jika Anda benar-benar ingin mendapatkan respons dalam Javascript (tanpa penyegaran halaman), maka Anda harus menggunakan AJAX, dan ketika Anda mulai berbicara tentang penggunaan AJAX, Anda harus menggunakan perpustakaan. jQuery sejauh ini adalah yang paling populer, dan favorit pribadi saya. Ada plugin bagus untuk jQuery bernama Form yang akan melakukan persis seperti yang Anda inginkan.
Inilah cara Anda menggunakan jQuery dan plugin itu:
$('#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);
Alternatif Ajax adalah menetapkan yang tidak terlihat
<iframe>
sebagai target formulir Anda dan membaca kontennya<iframe>
dionload
penangannya. Tapi kenapa repot kalau ada Ajax?Catatan: Saya hanya ingin menyebutkan alternatif ini karena beberapa jawaban menyatakan bahwa tidak mungkin mencapai ini tanpa Ajax.
sumber
<iframe>
POST (dengan callback keparent
). Untuk download dan upload sama ...Cara Javascript non-jQuery vanilla, diekstrak dari komentar 12me21:
Untuk
POST
jenis konten default adalah "application / x-www-form-urlencoded" yang cocok dengan apa yang kami kirimkan dalam cuplikan di atas. Jika Anda ingin mengirim "barang lain" atau mengubahnya entah bagaimana, lihat di sini untuk beberapa detail intinya.sumber
<input type='button' onclick="submitForm(); return false;">
atau Anda dapat menambahkan pendengar acara untuk acara 'kirim' seperti Marcus 'jawaban: stackoverflow.com/a/51730069/32453Saya melakukannya dengan cara ini dan cara kerjanya.
sumber
event.preventDefault();
(event
= argumen pertama dari fungsi submit) daripadareturn false
. Menampilkan false tidak hanya akan menghentikan browser mengirimkan formulir tetapi juga menghentikan terjadinya efek samping lain yang mungkin penting. Ada yang banyak dari pertanyaan yang berkaitan dengan ini.FormData($("myform")[0])
jika Anda mencoba input type = file upload.event.target.action
dan$(event.target).serialize()
sebagai pengganti$('#form').attr('action')
dan$('#form').serialize()
.Penelusur internet masa depan:
Untuk browser baru (mulai 2018: Chrome, Firefox, Safari, Opera, Edge, dan sebagian besar browser seluler, tetapi bukan IE),
fetch
adalah API standar yang menyederhanakan panggilan jaringan asinkron (yang dulu kami perlukanXMLHttpRequest
atau jQuery$.ajax
).Ini adalah bentuk tradisionalnya:
Jika formulir seperti di atas diserahkan kepada Anda (atau Anda membuatnya karena ini adalah html semantik), maka Anda dapat membungkus
fetch
kode di event listener seperti di bawah ini:(Atau, jika seperti poster asli Anda ingin memanggilnya secara manual tanpa event submit, cukup letakkan
fetch
kode di sana dan teruskan referensi keform
elemen daripada menggunakanevent.target
.)Dokumen:
Ambil: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API
Lainnya: https://developer.mozilla.org/en-US/docs/Learn/HTML/Forms/Sending_forms_through_JavaScript Halaman itu di tahun 2018 tidak menyebutkan pengambilan (belum). Tapi itu menyebutkan bahwa trik target = "myIFrame" tidak digunakan lagi. Dan itu juga memiliki contoh form.addEventListener untuk acara 'submit'.
sumber
Saya tidak yakin Anda memahami apa yang dilakukan submit () ...
Ketika Anda melakukan
form1.submit();
informasi formulir dikirim ke webserver.WebServer akan melakukan apa pun yang seharusnya dilakukan dan mengembalikan halaman web baru ke klien (biasanya halaman yang sama dengan sesuatu yang berubah).
Jadi, tidak ada cara Anda bisa "menangkap" kembalinya tindakan form.submit ().
sumber
Tidak ada panggilan balik. Ini seperti mengikuti tautan.
Jika Anda ingin menangkap respons server, gunakan AJAX atau posting ke Iframe dan ambil apa yang muncul di sana setelah acara iframe
onload()
.sumber
Anda dapat
event.preventDefault()
di handler klik untuk tombol kirim untuk memastikan bahwasubmit
peristiwa default formulir HTML tidak aktif (yang menyebabkan halaman disegarkan).Alternatif lain adalah menggunakan markup formulir peretas: Ini adalah penggunaan dari
<form>
dantype="submit"
yang menghalangi perilaku yang diinginkan di sini; karena hal ini pada akhirnya mengarah pada peristiwa klik yang menyegarkan halaman.Jika Anda ingin tetap menggunakan
<form>
, dan Anda tidak ingin menulis kustom klik penangan, Anda dapat menggunakan jQueryajax
metode, yang abstrak seluruh masalah pergi untuk Anda dengan mengekspos metode janji untuksuccess
,error
, dllSingkatnya, Anda dapat menyelesaikan masalah Anda dengan:
• mencegah perilaku default dalam fungsi penanganan dengan menggunakan
event.preventDefault()
• menggunakan elemen yang tidak memiliki perilaku default (misalnya
<form>
)• menggunakan jQuery
ajax
(Saya baru tahu pertanyaan ini dari tahun 2008, tidak yakin mengapa itu muncul di feed saya; bagaimanapun, semoga ini adalah jawaban yang jelas)
sumber
Ini adalah kode saya untuk masalah ini:
sumber
Jika Anda ingin menangkap keluaran permintaan AJAX menggunakan Chrome, Anda dapat mengikuti langkah-langkah sederhana ini:
sumber
sumber
Berdasarkan jawaban oleh @rajesh_kw ( https://stackoverflow.com/a/22567796/4946681 ), saya menangani kesalahan dan keberhasilan posting formulir:
Saya memanfaatkan
this
agar logika saya dapat digunakan kembali, saya berharap HTML dikembalikan dengan sukses jadi saya merendernya dan mengganti halaman saat ini, dan dalam kasus saya, saya mengharapkan pengalihan ke halaman login jika sesi waktunya habis, jadi Saya mencegat pengalihan itu untuk mempertahankan status laman.Sekarang pengguna dapat masuk melalui tab lain dan mencoba mengirim lagi.
sumber
Anda harus menggunakan AJAX. Mengirimkan formulir biasanya mengakibatkan browser memuat halaman baru.
sumber
Anda dapat melakukannya dengan menggunakan javascript dan teknologi AJAX. Silahkan lihat jquery dan plug in formulir ini . Anda hanya perlu menyertakan dua file js untuk mendaftarkan panggilan balik untuk form.submit.
sumber
Anda dapat melakukannya dengan menggunakan jQuery dan
ajax()
metode:sumber
pertama-tama gunakan $ (document) .ready (function ()) di dalam use ini ('formid'). submit (function (event)) dan kemudian cegah tindakan default setelah yang memanggil pengiriman formulir ajax $ .ajax ({,,, ,}); Ini akan mengambil parameter u dapat memilih sesuai kebutuhan Anda kemudian panggil sukses fungsi: fungsi (data) {// lakukan apapun yang Anda inginkan contoh saya untuk meletakkan respon html pada div}
sumber
Pertama-tama kita akan membutuhkan serializeObject ();
lalu Anda membuat postingan dasar dan mendapatkan respons
sumber
Saya telah menjalankan kode berikut dengan sempurna menggunakan ajax dengan data formulir multi-bagian
sumber
Anda dapat menggunakan jQuery.post () dan mengembalikan jawaban JSON yang terstruktur dengan baik dari server. Ini juga memungkinkan Anda untuk memvalidasi / membersihkan data Anda secara langsung di server, yang merupakan praktik yang baik karena lebih aman (dan bahkan lebih mudah) daripada melakukan ini pada klien.
Misalnya jika Anda perlu memposting formulir html ke server (ke saveprofilechanges.php) dengan data pengguna untuk pendaftaran sederhana:
I. Bagian klien:
Ia bagian HTML:
Bagian Ib Script:
II. Bagian server (saveprofilechanges.php):
sumber
Anda bisa melakukannya tanpa ajax.
tulis seperti Anda di bawah ini.
.. .. ..
dan kemudian di "action.php"
lalu setelah frmLogin.submit ();
baca variabel $ submit_return ..
$ submit_return berisi nilai pengembalian.
semoga berhasil.
sumber