JQuery AJAX pateikia formą

Turiu formą, vadinamą orderproductForm ir neapibrėžtu įrašų skaičiumi.

Noriu padaryti tam tikrą jQuery.get ar ajax ar kažką panašaus, kad bus paleisti puslapį per Ajax ir siųsti visus įėjimus į orderproductForm formą.

Manau, vienas iš būdų būtų padaryti kažką panašaus

 jQuery.get("myurl", {action : document.orderproductForm.action.value, cartproductid : document.orderproductForm.cartproductid.value, productid : document.orderproductForm.productid.value, ... 

Tačiau tiksliai nežinau visų formų įvesties. Ar yra funkcija, funkcija ar kažkas, kas tiesiog siunčia VISUS formų įvedimus?

Ačiū

716
25 дек. nustatė Nathan H 25 d. 2009-12-25 04:31 '09, 4:31 val. 2009-12-25 04:31
@ 15 atsakymų

„AjaxForm / ajaxSubmit“ funkcijas galite naudoti iš „ Ajax“ formos įskiepio arba „jQuery“ serializavimo funkcijos.

Ajaxform

 $("#theForm").ajaxForm({url: 'server.php', type: 'post'}) 

arba

 $("#theForm").ajaxSubmit({url: 'server.php', type: 'post'}) 

ajaxForm išsiųs paspaudus mygtuką „Siųsti“. ajaxSubmit siunčia nedelsiant.

Serialize

 $.get('server.php?' + $('#theForm').serialize()) $.post('server.php', $('#theForm').serialize()) 

Čia pateikiamos AJAX serializacijos dokumentacijos .

667
25 дек. atsakymas duotas jspcal 25 d. 2009-12-25 04:36 '09 4:36 am. 2009-12-25 04:36

Tai paprasta nuoroda:

 // this is the id of the form $("#idForm").submit(function(e) { var url = "path/to/your/script.php"; // the script where you handle the form input. $.ajax({ type: "POST", url: url, data: $("#idForm").serialize(), // serializes the form elements. success: function(data) { alert(data); // show response from the PHP скрипт. } }); e.preventDefault(); // avoid to execute the actual submit of the form. }); 

Tikiuosi, kad tai padės jums.

1060
05 авг. atsakymas į Alfrekjv 05 rug . 2011-08-05 20:57 '11 prie 20:57 2011-08-05 20:57

Kitas panašus sprendimas naudojant atributus, apibrėžtus formos elemente:

 <form id="contactForm1" action="/your_url" method="post"> <!-- Form input fields here (do not forget your name attributes). --> </form> <script type="text/javascript"> var frm = $('#contactForm1'); frm.submit(function (e) { e.preventDefault(); $.ajax({ type: frm.attr('method'), url: frm.attr('action'), data: frm.serialize(), success: function (data) { console.log('Submission was successful.'); console.log(data); }, error: function (data) { console.log('An error occurred.'); console.log(data); }, }); }); </script> 
411
08 авг. Davido Icardi atsakymas, rugpjūčio 08 d 2012-08-08 01:31 '12 at 1:31 2012-08-08 01:31

Yra keletas dalykų, kuriuos reikia nepamiršti.

1. Yra keletas būdų pateikti formą.

  • naudojant mygtuką „Siųsti“
  • paspausdami Enter
  • įjungus siuntimo įvykį javascript
  • galbūt daugiau, priklausomai nuo prietaiso ar būsimo įrenginio.

Todėl mes turime būti susieti su formos pateikimo įvykiu, o ne su mygtuko spaudos renginiu. Tai užtikrins, kad mūsų kodas veiktų visais prietaisais ir pagalbinėmis technologijomis dabar ir ateityje.

2. Hijax

Vartotojas gali įgalinti javascript. Hijax šablonas yra geras čia, kur mes atidžiai prižiūrime formą naudodami „JavaScript“, bet paliekame ją, jei „JavaScript“ neveikia.

Turime iš formos ištraukti URL ir metodą, todėl, jei HTML pakeitimai, nereikia atnaujinti „JavaScript“.

3. Neįtikėtinas javascript

Naudojant event.preventDefault () vietoj grįžimo klaidinga yra gera praktika, nes tai leidžia įvykiui burbuliuoti. Tai leidžia susieti kitus scenarijus su įvykiu, pavyzdžiui, analizės scenarijus, kurie gali stebėti naudotojo sąveiką.

Greitis

Idealiu atveju turėtume naudoti išorinį scenarijų, o ne įterpti mūsų integruotą scenarijų. Mes galime kreiptis į tai puslapio antraštės skyriuje, naudodami scenarijų žymą, arba nuorodą į jį puslapio apačioje, kad galėtumėte gauti greitį. Scenarijus turėtų ramiai pagerinti vartotojo patirtį, o ne trukdyti

kodą

Darant prielaidą, kad sutinkate su tuo, kas išdėstyta pirmiau, ir norite sugauti siuntimo įvykį ir apdoroti ją per AJAX (hijax šablonas), galite tai padaryti:

 $(function() { $('form.my_form').submit(function(event) { event.preventDefault(); // Prevent the form from submitting via the browser var form = $(this); $.ajax({ type: form.attr('method'), url: form.attr('action'), data: form.serialize() }).done(function(data) { // Optionally alert the user of success here... }).fail(function(data) { // Optionally alert the user of an error here... }); }); }); 

Jei norite, galite rankiniu būdu paleisti formą, naudodami „JavaScript“, naudodami kažką panašaus:

 $(function() { $('form.my_form').trigger('submit'); }); 

Redaguoti:

Neseniai turėjau tai padaryti ir galiausiai parašiau papildinį.

 (function($) { $.fn.autosubmit = function() { this.submit(function(event) { event.preventDefault(); var form = $(this); $.ajax({ type: form.attr('method'), url: form.attr('action'), data: form.serialize() }).done(function(data) { // Optionally alert the user of success here... }).fail(function(data) { // Optionally alert the user of an error here... }); }); return this; } })(jQuery) 

Pridėkite atributą „data-autosubmit“ į savo formos žymę ir galite atlikti šiuos veiksmus:

HTML

 <form action="/blah" method="post" data-autosubmit> <!-- Form goes here --> </form> 

Js

 $(function() { $('form[data-autosubmit]').autosubmit(); }); 
161
07 мая '13 в 15:44 2013-05-07 15:44 atsakymas yra suteiktas superluminalui „ Gegužės 07 d. 13, 15:44 2013-05-07 15:44

Paprasta versija (nesiųs nuotraukų)

 <form action="/my/ajax/url" class="my-form"> ... </form> <script> (function($){ $("body").on("submit", ".my-form", function(e){ e.preventDefault(); var form = $(e.target); $.post( form.attr("action"), form.serialize(), function(res){ console.log(res); }); }); )(jQuery); </script> 

Kopijuokite ir įklijuokite formos ar visų formų atvaizdavimą puslapyje

Tai modifikuota atsakymo Alfrekva versija

  • Jis veiks su jQuery> = 1.3.2
  • Tai galite paleisti prieš dokumento parengimą.
  • Galite ištrinti ir vėl pridėti formą, ir ji vis dar veiks
  • Jis bus patalpintas toje pačioje vietoje kaip ir įprastinė forma, nurodyta formoje „veiksmas“.

„Javascript“

 jQuery(document).submit(function(e){ var form = jQuery(e.target); if(form.is("#form-id")){ // check if this is the form that you want (delete this check to apply this to all forms) e.preventDefault(); jQuery.ajax({ type: "POST", url: form.attr("action"), data: form.serialize(), // serializes the form elements. success: function(data) { console.log(data); // show response from the PHP скрипт. (use the developer toolbar console, firefox firebug or chrome inspector console) } }); } }); 

Norėjau redaguoti Alfrekjv atsakymą, tačiau per daug nukrypo nuo jo, todėl nusprendžiau jį paskelbti kaip atskirą atsakymą.

Neišsiunčia failų, nepalaiko mygtukų, pavyzdžiui, paspaudus mygtuką (įskaitant pateikimo mygtuką), ji siunčia vertę kaip formos duomenis, tačiau kadangi tai yra prašymas prašyti, mygtuko paspaudimas nebus išsiųstas.

Norėdami palaikyti mygtukus, galite užfiksuoti faktinį mygtuko paspaudimą, o ne siųsti.

 jQuery(document).click(function(e){ var self = jQuery(e.target); if(self.is("#form-id input[type=submit], #form-id input[type=button], #form-id button")){ e.preventDefault(); var form = self.closest('form'), formdata = form.serialize(); //add the clicked button to the form data if(self.attr('name')){ formdata += (formdata!=='')? ' formdata += self.attr('name') + '=' + ((self.is('button'))? self.html(): self.val()); } jQuery.ajax({ type: "POST", url: form.attr("action"), data: formdata, success: function(data) { console.log(data); } }); } }); 

Serverio pusėje galite rasti „ajax“ užklausą su šia antrašte, kuri „php“ nustato HTTP_X_REQUESTED_WITH

Php

 if(!empty($_SERVER['HTTP_X_REQUESTED_WITH'])  strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') { //is ajax } 
24
10 июля '13 в 12:35 2013-07-10 12:35 atsakymą pateikė Timo Huovinenas liepos 10 d. 13 val. 12:35 2013-07-10 12:35

Taip pat galite naudoti FormData strong> (bet ne IE):

 var formData = new FormData(document.getElementsByName('yourForm')[0]);// yourForm: form selector $.ajax({ type: "POST", url: "yourURL",// where you wanna post data: formData, processData: false, contentType: false, error: function(jqXHR, textStatus, errorMessage) { console.log(errorMessage); // Optional }, success: function(data) {console.log(data)} }); 

Štai kaip naudojate FormData .

24
19 янв. atsakymas pateikiamas macio.Jun 19 sausis 2013-01-19 21:52 '13, 9:52 pm 2013-01-19 21:52

Šis kodas net veikia su failo įvedimu.

 $(document).on("submit", "form", function(event) { event.preventDefault(); $.ajax({ url: $(this).attr("action"), type: $(this).attr("method"), dataType: "JSON", data: new FormData(this), processData: false, contentType: false, success: function (data, status) { }, error: function (xhr, desc, err) { } }); }); 
20
07 февр. Shaiful Islamo atsakymas 07 vasaris 2015-02-07 22:35 '15 at 10:35 AM 2015-02-07 22:35

Man tikrai patiko šis superluminary atsakymas , o ypač tai, kaip jis buvo baigtas, yra jQuery Plugin sprendimas. Taigi, dėl itin naudingo atsakymo superluminary . Tačiau, mano atveju, man reikia papildinio, kuris leistų man apibrėžti sėkmės ir klaidų įvykių įpėdinius naudojant parametrus, kai inicijuojamas įskiepis.

Taigi, ką aš atėjau:

 ;(function(defaults, $, undefined) { var getSubmitHandler = function(onsubmit, success, error) { return function(event) { if (typeof onsubmit === 'function') { onsubmit.call(this, event); } var form = $(this); $.ajax({ type: form.attr('method'), url: form.attr('action'), data: form.serialize() }).done(function() { if (typeof success === 'function') { success.apply(this, arguments); } }).fail(function() { if (typeof error === 'function') { error.apply(this, arguments); } }); event.preventDefault(); }; }; $.fn.extend({ // Usage: // jQuery(selector).ajaxForm({ // onsubmit:function() {}, // success:function() {}, // error: function() {} // }); ajaxForm : function(options) { options = $.extend({}, defaults, options); return $(this).each(function() { $(this).submit(getSubmitHandler(options['onsubmit'], options['success'], options['error'])); }); } }); })({}, jQuery); 

Šis įskiepis leidžia man labai lengvai atverti „html“ formą puslapyje ir pateikti „onsubmit“, „sėkmės“ ir „klaidų“ įvykių tvarkytojams, kad naudotojai pateiktų grįžtamąjį ryšį su pateikimo formos būsena. Tai leido naudoti papildinį taip:

  $('form').ajaxForm({ onsubmit: function(event) { // User submitted the form }, success: function(data, textStatus, jqXHR) { // The form was successfully submitted }, error: function(jqXHR, textStatus, errorThrown) { // The submit action failed } }); 

Atkreipkite dėmesį, kad sėkmės ir klaidų įvykių tvarkytojai gauna tuos pačius argumentus, kuriuos gausite iš atitinkamų jQuery ajax įvykių.

11
13 нояб. Atsakymas pateikiamas BruceHill lapkričio 13 d 2013-11-13 02:06 '13, 02:06 2013-11-13 02:06

Aš gavau:

 formSubmit('#login-form', '/api/user/login', '/members/'); 

kur

 function formSubmit(form, url, target) { $(form).submit(function(event) { $.post(url, $(form).serialize()) .done(function(res) { if (res.success) { window.location = target; } else { alert(res.error); } }) .fail(function(res) { alert("Server Error: " + res.status + " " + res.statusText); }) event.preventDefault(); }); } 

Daroma prielaida, kad URL URL praneša „ajax“ formoje {success: false, error:'my Error to display'}

Tai galite pakeisti taip, kaip norite. Nesivaržykite naudoti šį fragmentą.

9
21 янв. atsakymas pateikiamas Tarion 21 jan. 2014-01-21 23:47 '14, 23:47, 2014-01-21 23:47

apsvarstyti galimybę naudoti closest

 $('table+table form').closest('tr').filter(':not(:last-child)').submit(function (ev, frm) { frm = $(ev.target).closest('form'); $.ajax({ type: frm.attr('method'), url: frm.attr('action'), data: frm.serialize(), success: function (data) { alert(data); } }) ev.preventDefault(); }); 
5
26 окт. atsakymas pateikiamas test30 26 oct. 2016-10-26 13:49 '16 at 13:49 PM 2016-10-26 13:49

jQuery AJAX pateikti formą , ji tiesiog pateikia formą, naudodami formos ID, kai spustelėsite mygtuką

Atlikite veiksmus

1 veiksmas - formos žyma turi turėti identifikavimo lauką

 <form method="post" class="form-horizontal" action="test/user/add" id="submitForm"> ..... </form> 
Mygtukas

kurį spustelėsite

 <button>Save</button> 

2 veiksmas - pateikimo įvykis yra jQuery, kuris padeda pateikti formą. apatiniame kode ruošiame JSON užklausą iš HTML elemento pavadinimo .

 $("#submitForm").submit(function(e) { e.preventDefault(); var frm = $("#submitForm"); var data = {}; $.each(this, function(i, v){ var input = $(v); data[input.attr("name")] = input.val(); delete data["undefined"]; }); $.ajax({ contentType:"application/json; charset=utf-8", type:frm.attr("method"), url:frm.attr("action"), dataType:'json', data:JSON.stringify(data), success:function(data) { alert(data.message); } }); }); 

Jei norite demonstruoti tiesioginę demonstraciją, spustelėkite toliau pateiktą nuorodą.

Kaip pateikti formą naudojant jQuery AJAX?

4
11 янв. atsakymas, kurį pateikė jeet singh parmar sausio 11 d 2018-01-11 11:05 '18, 11:05

Norėdami išvengti keleto formatavimų siuntimų siuntimo:

Nepamirškite atšaukti įvykio siuntimo, kol forma bus išsiųsta iš naujo.Vartotojas gali paskambinti į sumbitą daugiau nei vieną kartą, jis gali pamiršti kažką arba buvo patvirtinimo klaida.

  $("#idForm").unbind().submit( function(e) { .... 
4
13 нояб. Atsakymą pateikė Pavel Zheliba lapkričio 13 d 2014-11-13 21:43 '14, 21:43 2014-11-13 21:43

Jei naudojate form.serialize (), kiekvienam formos formos elementui reikia pateikti tokį pavadinimą:

 <input id="firstName" name="firstName" ... 

Ir forma yra serializuota taip:

 firstName=Chris ... 
4
27 апр. Chris Halcrow atsakymas balandžio 27 d 2016-04-27 02:48 '16 at 2:48 2016-04-27 02:48

Tai galite naudoti siuntimo funkcijoje, kaip parodyta žemiau.

HTML forma

 <form class="form" action="" method="post"> <input type="text" name="name" id="name" > <textarea name="text" id="message" placeholder="Write something to us"> </textarea> <input type="button" onclick="return formSubmit();" value="Send"> </form> 

JQuery funkcija:

 <script> function formSubmit(){ var name = document.getElementById("name").value; var message = document.getElementById("message").value; var dataString = 'name='+ name + ' + message; jQuery.ajax({ url: "submit.php", data: dataString, type: "POST", success: function(data){ $("#myForm").html(data); }, error: function (){} }); return true; } </script> 

Išsamesnės informacijos žr. Pavyzdyje: http://www.spiderscode.com/simple-ajax-contact-form/

2
20 дек. atsakymą pateikė suresh raj 20 dec. 2016-12-20 10:48 '16 at 10:48 2016-12-20 10:48

Taip pat yra pateikimo įvykis, kuris gali būti suaktyvintas kaip šis $ ("# form_id"). pateikti (). Šį metodą naudosite, jei forma jau gerai atstovaujama HTML. Jūs tiesiog perskaitėte puslapį, užpildėte formų įvedimus su medžiagomis, o paskui - .submit (). Jame bus naudojamas formos deklaracijoje nurodytas metodas ir veiksmas, taigi jums nereikia kopijuoti jo į savo javascript.

pavyzdžių

-20
25 дек. atsakymas, pateiktas gruodžio 25 d. 2009-12-25 07:50 '09 7:50 am. 2009-12-25 07:50

Kiti klausimai apie „ žymes „ arba Užduoti klausimą