JQuery AJAX təqdim forması

orderproductForm adlı bir forma orderproductForm və giriş sayına görə müəyyən edilməmişdim.

Ajax ilə səhifəni tetikleyip bütün girişləri orderproductForm formasına göndərəcək bir jQuery.get və ya ajax və ya bir şey etmək istəyirəm.

Düşünürəm ki, yollardan biri kimi bir şey etmək olardı

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

Bununla belə, mən bütün formalı girişləri dəqiq bilmirəm. BÜTÜN form girişlərini göndərən funksiya, funksiya və ya bir şey varmı?

Təşəkkür edirik

716
25 дек. Nathan H tərəfindən tənzimlənən 25 dekabrda. 2009-12-25 04:31 '09 at 04:31 'da 2009-12-25 04:31
@ 15 cavab

AjaxForm / ajaxSubmit funksiyalarını Ajax Form Plugin və ya jQuery serialization funksiyasından istifadə edə bilərsiniz.

Ajaxform

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

və ya

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

submit düyməsinə tıklandığında ajaxForm göndərir. ajaxSubmit dərhal göndərir.

Serialize olun

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

Burada AJAX seriya sənədləşmə sənədləri verilir .

667
25 дек. Cavab verilən jspcal 25 dekabr. 2009-12-25 04:36 '09 saat 04:36 'da 2009-12-25 04:36

Bu sadə bir keçiddir:

 // 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. }); 
border=0

Bu sizə kömək edir.

1060
05 авг. Alfrekjv 05 avqust cavab verildi . 2011-08-05 20:57 '11 də 20:57 'da 2011-08-05 20:57

Forma elementində müəyyən edilmiş atributları istifadə edən digər bir oxşar həll:

 <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 авг. cavab Davide Icardi 08 aug tərəfindən verilir . 2012-08-08 01:31 '12 at 1:31 2012-08-08 01:31

Yadda saxlamaq lazımdır bir neçə şey var.

1. Forma təqdim etmək üçün bir neçə yol vardır.

  • təqdim düyməsini istifadə edərək
  • basaraq girin
  • javascript-də hadisə göndərməklə
  • daha çox cihazdan və ya gələcək cihazdan asılı olaraq.

Buna görə də, forma təqdimat hadisə ilə əlaqəli olmalıyıq və düyməni mətbuat hadisə deyil. Bu, kodumuzun indi və gələcəkdə bütün qurğular və yardımçı texnologiyalar üzərində işləməsini təmin edəcəkdir.

2. Hijax

İstifadəçi javascript effektiv ola bilər. Burada hijax şablonu yaxşıdır, burada biz JavaScript-ni istifadə edərək formu nəzərə alaraq diqqətlə nəzərdən keçiririk , lakin JavaScript işləmirsə , onu tərk edin.

Biz URL və üsulu formadan çıxarmaq məcburiyyətindəyik, buna görə də HTML dəyişikliyində JavaScript-i yeniləməyə ehtiyacımız yoxdur.

3. Yoxlamayan javascript

Event.preventDefault () istifadə edərək, əvəzinə geri qayıtmaq yaxşı bir tətbiqdir, çünki hadisə bubble etməyə imkan verir. Bu, digər skriptlərin istifadəçi qarşılıqlı əlaqələndirə biləcək analitik skriptlər kimi bir hadisə ilə əlaqəli olmasına imkan verir.

Sürət

İdeal olaraq xarici ssenariyadan istifadə etməliyik və quraşdırılmış skriptə daxil olmamalıyıq. Bunu səhifənin başlıq hissəsində skript yazısını istifadə edərək və ya səhifənin altındakı sürətlə əlaqələndirə bilərik. Ssenarinin sakitcə istifadəçi təcrübəsini yaxşılaşdırması və müdaxilə etməməsi lazımdır.

kodu

Yuxarıdakıların hamısına razı olduğunu düşünürsən və göndərmə hadisə tutmaq və AJAX (hijax şablonu) vasitəsilə işləmək istədiyiniz kimi bir şey edə bilərsiniz:

 $(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... }); }); }); 

İstədiyiniz zaman, JavaScript istifadə edərək istədiyiniz kimi istifadə edərək, forma təqdim edə bilərsiniz:

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

Düzenle:

Mən bu yaxınlarda bunu etmək məcburiyyətində oldum və nəticədə bir plugin yazdım.

 (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) 

Data-autosubmit xüsusiyyətini forma etiketinizə əlavə edin və aşağıdakıları edə bilərsiniz:

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 07 may '13 'də saat 15:44' da superluminary cavab verilir 2013-05-07 15:44

Sadə versiya (şəkillər göndərmir)

 <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> 

Sayfada forma və ya bütün formları kopyalayıp yapıştırın

Bu Alfrekva cavab versiyasının bir versiyasıdır

  • Bu jQuery> = 1.3.2 ilə işləyəcək
  • Sənəd hazır olduqdan əvvəl bunu edə bilərsiniz.
  • Formu silmək və yenidən əlavə edə bilərsiniz və hələ də işləyəcəkdir
  • Bu, "hərəkət" formasının öznitəsində göstərilən müntəzəm forma kimi eyni yerdə yerləşdiriləcək.

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) } }); } }); 

Alfrekjvin cavabını düzəltmək istəmirdim, amma çoxdan sapmışdılar, buna ayrı bir cavab olaraq yayımlamağa qərar verdim.

Dosyaları göndərməz, məsələn, düyməni basaraq (düyməni daxil etməklə) düymələri basaraq, formu məlumat kimi göndərir, lakin bu bir ajax sorğusu olduğundan, düyməni basaraq göndərilməyəcəkdir.

Düymələri dəstəkləmək üçün, göndərmək əvəzinə, faktiki düyməni basaraq çəkə bilərsiniz.

 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); } }); } }); 

HTTP_X_REQUESTED_WITH php üçün HTTP_X_REQUESTED_WITH bu başlıqla bir ajax isteği 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 Cavab Timo Huovinen tərəfindən verilib 10 İyul 2013 12:35 2013-07-10 12:35

Siz həmçinin FormData güclü istifadə edə bilərsiniz (lakin IE mövcud deyil):

 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)} }); 

FormData'yı necə istifadə edirsiniz .

24
19 янв. cavab cavio verilib . Jan 19 2013-01-19 21:52 '13 'da saat 9:52 ' da 2013-01-19 21:52

Bu kod hətta fayl girişi ilə işləyir.

 $(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 февр. Şeyx İslamın cavabı 07 fevral. 2015-02-07 22:35 '15 at 10:35 AM 2015-02-07 22:35

Mən bu superluminary cavab həqiqətən xoşuma gəldi və xüsusilə tamamlandığında jQuery Plugin-də həll oldu. Belə ki, çox faydalı cavab üçün superluminary sayəsində. Mənim vəziyyətimdə, plugin başlatılmasında parametrlərdən istifadə edərək uğur və səhv hadisələr üçün varisləri müəyyən etməyə imkan verəcək bir pluginə ehtiyacım var.

Beləliklə, bu mənimlə gəldi:

 ;(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); 

Bu plugin mənə çox asanlıqla səhifədə html formasını "təcəssüm etdirməyə" imkan verir və təqdim formunun statusu ilə istifadəçiyə geribildirim göndərmək üçün onsubmit, uğur və səhv hadisə işleyicilerini təmin edir. Bu, aşağıdakı kimi plugin istifadə etməyə imkan verdi:

  $('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 } }); 

Müvəffəqiyyət və səhv hadisəsi işləyicilərinin müvafiq jQuery ajax hadisələrindən aldığınız eyni arqumentləri qəbul etdiyini unutmayın.

11
13 нояб. Cavab BruceHill Nov 13 verilir 2013-11-13 02:06 '13 at 2:06 2013-11-13 02:06

Mənim üçün aşağıdakıları aldım:

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

harada

 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(); }); } 

Url içərisindəki mesaj ajaxın {success: false, error:'my Error to display'} for displaying {success: false, error:'my Error to display'} şəklində qaytarıldığı ehtimal olunur.

İstədiyiniz şəkildə bunu dəyişə bilərsiniz. Bu snippet istifadə etmək üçün çekinmeyin.

9
21 янв. Cavab Tarion 21 yanvar verilir . 2014-01-21 23:47 '14 saat 23:47 2014-01-21 23:47

closest istifadə 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 окт. Cavab verilir test30 26 oct . 2016-10-26 13:49 '16 at 13:49 2016-10-26 13:49

jQuery AJAX formunu göndərin , yalnız düyməni basdığınız zaman formu istifadə edərək formu göndərin

Xahiş edirik adımları edin

Addım 1 - forma etiketi bir identifikator sahəsinə sahib olmalıdır

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

siz çıxacaqsınız

 <button>Save</button> 

Addım 2 - Təqdimat forması təqdim etməyə kömək edən jQuery-də təqdim olunur. alt kodda, HTML element adından bir JSON sorğu hazırlayırıq.

 $("#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); } }); }); 

Canlı bir demo üçün aşağıdakı linki vurun.

JQuery AJAX istifadə edərək formu necə təqdim etmək olar?

4
11 янв. Jeet Singh parmar tərəfindən verilmiş cavab Yanvar 11 2018-01-11 11:05 '18 'də saat 11.05' də

Birdən çox formadata göndərilməməsi üçün:

Forma göndərilməzdən əvvəl, tədbirin göndərilməsini ləğv etməyi unutma. İstifadəçi sumbit funksiyasını bir dəfədən çox dəfə deyə bilər, bir şey unutmuş ola bilər və ya bir validasiya səhvidir.

  $("#idForm").unbind().submit( function(e) { .... 
4
13 нояб. Cavab Pavel Zheliba tərəfindən 13 noyabrda verilir 2014-11-13 21:43 '14 at 21:43 2014-11-13 21:43

Form.serialize () istifadə edirsinizsə, formun hər bir elementini bu kimi bir ad vermək lazımdır:

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

Forma aşağıdakı kimi serialized:

 firstName=Chris ... 
4
27 апр. Chris Halcrow tərəfindən verilmiş cavabı Apr 27 2016-04-27 02:48 '16 'da 2:48 2016-04-27 02:48' də

Bunu göndərmə funksiyasından aşağıda göstərildiyi kimi istifadə edə bilərsiniz.

HTML forması

 <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 funksiyası:

 <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> 

Ətraflı məlumat üçün aşağıdakı nümunəyə baxın: http://www.spiderscode.com/simple-ajax-contact-form/

2
20 дек. cavab suresh raj 20 dec. tərəfindən verilir . 2016-12-20 10:48 '16 'da 10:48' də 2016-12-20 10:48 'da

Bu da $ ("# form_id") kimi tetiklenebilen bir təqdimat hadisəsi də var. təqdim (). Form artıq HTML-də yaxşı təmsil olunarsa, bu metoddan istifadə edəcəksiniz. Siz sadəcə səhifəni oxuyursunuz, forma girişlərini materiallarla doldurdunuz və sonra .submit () adlandırdınız. Forma bəyannaməsində müəyyən edilmiş metoddan və hərəkətdən istifadə ediləcək, buna görə javascriptinizə kopyalamağa ehtiyac yoxdur.

nümunələr

-20
25 дек. 25 dekabr. 2009-12-25 07:50 '09 saat 07:50 'da 2009-12-25 07:50

tags ilə bağlı digər suallar və ya sual