jQuery AJAX prezinte formularul

Am un formular cu numele orderproductForm și un număr nedefinit de intrări.

Vreau să fac un fel de jQuery.obține sau ajax sau ceva de genul asta care ar numi-o pagină prin Ajax, și trimite de-a lungul toate intrările de forma orderproductForm.

Cred că o modalitate ar fi să fac ceva de genul

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

Cu toate acestea nu stiu exact toate sub forma intrărilor. Există o caracteristică, funcția sau ceva care ar trimite TOTI formă de intrări?

abhinav3414
Întrebarea editată 30 aprilie 2018 в 12:46
Programare
javascript forms jquery ajax submit
25 decembrie 2009 в 1:31
15 vizualizări

Acesta este un joc simplu de referință:

// this is the id of the form
$("#idForm").submit(function(e) {

    e.preventDefault(); // avoid to execute the actual submit of the form.

    var form = $(this);
    var url = form.attr('action');

    $.ajax({
           type: "POST",
           url: url,
           data: form.serialize(), // serializes the form's elements.
           success: function(data)
           {
               alert(data); // show response from the php script.
           }
         });

});

Sper că vă ajută.

Community
Răspuns editat 2 martie 2019 в 5:30
Comentarii (20)
Soluția

Puteți utiliza ajaxForm/ajaxSubmit funcții de Formularul Ajax Plugin sau jQuery funcția serialize.

AjaxForm:

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

sau

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

ajaxForm va trimite atunci când butonul submit este apăsat. ajaxSubmit trimite imediat.

Serialize:

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

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

AJAX serialization documentația este aici.

K DawG
Răspuns editat 18 martie 2017 в 1:31
Comentarii (9)

O altă soluție similară folosind atribute definite pe element de formular:





<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>
nyedidikeke
Răspuns editat 20 mai 2017 в 5:26
Comentarii (4)

Există câteva lucruri pe care trebuie să le avem în vedere.

1. Există mai multe moduri de a prezenta o formă

  • folosind butonul submit
  • prin apăsarea tastei enter
  • prin declanșarea unui eveniment prezinte în JavaScript
  • eventual, mai mult, în funcție de dispozitiv sau viitorul dispozitiv.

Prin urmare, trebuie să se leagă la forma eveniment prezinte, nu faceți clic pe butonul eveniment. Acest lucru va asigura codul nostru funcționează pe toate dispozitivele și tehnologiile de asistare, acum și în viitor.

2. Hijax

Utilizatorul nu poate aveți JavaScript activat. O hijax model este bun aici, unde ne ia ușor de control de forma folosind JavaScript, dar lăsați-l submittable în cazul în care JavaScript nu reușește.

Ar trebui să trageți URL-ul și metoda de formă, așa că, dacă HTML schimbări, noi nu't nevoie pentru a actualiza JavaScript.

3. Discret JavaScript

Folosind eveniment.preventDefault() în loc de return false este o practică bună, deoarece permite evenimentului să bule. Acest lucru vă permite alte script-uri cravată în cazul, de exemplu google analytics script-uri care pot fi monitorizarea interacțiunilor utilizatorilor.

Viteza

Ar trebui în mod ideal, utilizați un script extern, mai degrabă decât inserarea script-ul nostru inline. Putem link-ul de la acest lucru în secțiunea head a paginii folosind un script tag-ul, sau link-ul de la partea de jos a paginii pentru viteza. Script-ul ar trebui să liniște a spori experiența utilizatorului, nu obține în mod.

Cod

Presupunând că ești de acord cu toate cele de mai sus, și doriți pentru a prinde eveniment prezinte și să se ocupe de prin AJAX (o hijax model), ai putea face ceva de genul asta:

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

Puteți declanșa manual o formă de supunere ori de câte ori doriți prin intermediul JavaScript folosind ceva de genul:

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

Edit:

Recent am avut de a face acest lucru și am sfârșit prin a scrie un plugin. 

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

Adauga un date-modul de atribut pentru a-ți forma tag-ul și apoi puteți face acest lucru:

HTML

JS

$(function() {
  $('form[data-autosubmit]').autosubmit();
});
Comentarii (9)

Puteți folosi, de asemenea, FormData (Dar nu sunt disponibile în 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)} 
});

Acesta este modul în care utilizați FormData.

Mikael Dúi Bolinder
Răspuns editat 27 martie 2018 в 8:06
Comentarii (4)

Varianta simpla (nu trimite imagini)


...

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

Copiați și inserați ajax-ificări de o formă sau toate formele pe o pagină

Aceasta este o versiune modificată a Alfrekjv's raspunde

  • Se va lucra cu jQuery >= 1.3.2
  • Puteți rula acest lucru înainte ca documentul este gata
  • Aveți posibilitatea să eliminați și re-adăuga formă și va funcționa în continuare
  • Se va posta la aceeași locație ca și formă normală, se specifică în forma's "de acțiune" atribut

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's elements.
            success: function(data) {
                console.log(data); // show response from the php script. (use the developer toolbar console, firefox firebug or chrome inspector console)
            }
        });
    }
});

Am vrut să editați Alfrekjv's-a raspuns dar a deviat prea mult de la el, așa că a decis pentru a posta acest lucru ca un răspuns separat.

Nu trimite fișiere, nu are suport pentru butoane, de exemplu, făcând clic pe un buton (inclusiv un buton de submit) trimite valoarea sa ca formă de date, dar pentru că aceasta este o cerere ajax butonul de click nu va fi trimis.

Pentru a sprijini butoane puteți captura real faceți clic pe butonul în loc de submit.

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

Pe partea de server poate detecta o cerere ajax](http://davidwalsh.name/detect-ajax) cu acest antet care jquery seturi de HTTP_X_REQUESTED_WITH` pentru php

PHP

if(!empty($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest') {
    //is ajax
}
Community
Răspuns editat 23 mai 2017 в 12:34
Comentarii (2)

Acest cod funcționează chiar și cu fișiere de intrare

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

        }
    });        
});
Comentarii (3)

Mi-a placut acest răspuns de către superluminary și mai ales modul în care și-a înfășurat este soluția în o jQuery plugin. Deci, datorită superluminary pentru un răspuns util. În cazul meu, totusi, vreau un plugin care mi-ar permite să definiți succes și eroare stivuitoare eveniment prin intermediul unor opțiuni atunci când plugin-ul este inițializat.

Deci, aici este ceea ce am venit cu:

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

Acest plugin permite să cu ușurință "ajaxify" formulare html de pe pagina și să ofere onsubmit, succes și eroare stivuitoare eveniment pentru punerea în aplicare a feedback-ul de utilizator de la statutul de trimitere a formularului. Acest lucru a permis plugin-ul pentru a fi utilizate după cum urmează:

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

Rețineți că succes și eroare stivuitoare eveniment primi aceleasi argumente pe care le va primi de la evenimentele corespunzătoare a jQuery ajax metoda.

Community
Răspuns editat 23 mai 2017 в 12:34
Comentarii (0)

Am primit următorul pentru mine:

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

în cazul în care

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

Aceasta presupune postul pentru 'url' returnează un ajax în formă de {succes: fals, eroare:&#39;meu Eroare pentru a afișa&#39;}

Puteți varia asta ca iti place. Simțiți-vă liber pentru a utiliza acel fragment.

Comentarii (1)

jQuery AJAX prezinte formularul, nu este nimic, dar să prezinte un formular folosind formularul de ID-ul atunci când faceți clic pe un buton

Vă rugăm să urmați pașii

Pasul 1 - Formular de tag-ul trebuie să aibă un câmp de IDENTITATE


.....

Butonul care aveți de gând să faceți clic pe

Save

Pasul 2 - submit evenimentul este în jQuery care vă ajută să prezinte un formular. în codul de mai jos ne pregătim JSON cerere de element HTML numele.

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

pentru demo live click pe link-ul de mai jos

[Cum să prezinte un Formular folosind jQuery AJAX?][1]

Comentarii (0)

luați în considerare utilizarea mai apropiat

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

Pentru a evita mai multe formdata trimite:

Don't uita pentru a desface eveniment prezinte, înainte de a forma înaintat din nou, Utilizatorul poate apela sumbit funcție mai mult de o dată, poate a uitat ceva, sau a fost o eroare de validare.

 $("#idForm").unbind().submit( function(e) {
  ....
Comentarii (0)

Daca're folosind forma.serialize() - aveți nevoie pentru a da fiecare element de formular un nume de genul asta:

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

Iar forma devine serializat ca aceasta:

firstName=Chris&lastName=Halcrow ...
Comentarii (0)

Puteți folosi acest lucru pe submit funcție de genul de mai jos.

Formular HTML


    <input type="text" name="name" id="name" >
    <textarea name="text" id="message" placeholder="Write something to us">

funcția jQuery:

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

Pentru mai multe detalii si proba de Vizita: http://www.spiderscode.com/simple-ajax-contact-form/

Comentarii (0)

Acest lucru nu este răspunsul la OP's cauză, dar în cazul în care puteți't folosi static formă de DOM, puteți încerca, de asemenea, ca aceasta.

var $form = $('').append(
    $('<input/>', {name: 'username'}).val('John Doe'),
    $('<input/>', {name: 'user_id'}).val('john.1234')
);

$.ajax({
    url: 'api/user/search',
    type: 'POST',
    contentType: 'application/x-www-form-urlencoded',
    data: $form.serialize(),
    success: function(data, textStatus, jqXHR) {
        console.info(data);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        var errorMessage = jqXHR.responseText;
        if (errorMessage.length > 0) {
            alert(errorMessage);
        }
    }
});
Comentarii (0)

Doar un memento prietenos, care "date" poate fi un obiect, de asemenea:

`` $('forma#foo').prezinte(function () { $.ajax({ url: 'http://foo.bar/some-ajax-script&#39;, tip: 'POST', tip de date: 'json', date: { 'foo': 'unele-foo', 'bar': 'unele-bar' } }).întotdeauna(function (data) { console.log(a datelor); });

return false; }); ``

Comentarii (0)

Știu că aceasta este o "jQuery" legate de întrebare, dar acum zile cu JS ES6 lucrurile sunt mult mai simple. Deoarece nu există nici o pură "javascript" răspunsul, m-am gândit că aș putea adăuga un simplu pură "javascript" soluție în acest sens, care, în opinia mea, este mult mai curat, prin utilizarea fetch() API. Asta o modalitate modernă de a pune în aplicare cererile de rețea. In cazul tau, din moment ce ai deja un element de formular putem pur și simplu l utilizați pentru a construi cererea noastră.

const form = document.forms["orderproductForm"];
const formInputs = form.getElementsByTagName("input"); 
let formData = new FormData(); 
for (let input of formInputs) {
    formData.append(input.name, input.value); 
}

fetch(form.action,
    {
        method: form.method,
        body: formData
    })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.log(error.message))
    .finally(() => console.log("Done"));
Comentarii (0)

Nu's, de asemenea, să prezinte evenimentul, care pot fi declanșate de astfel $("#form_id").submit(). Te'd utilizați această metodă dacă formularul este bine reprezentat în HTML deja. Te'd citit în pagina, popula formă de intrări cu chestii, apoi sună .submit(). L'll utilizează metoda și de acțiune definite în formularul de's a declarației, astfel încât să don't nevoie pentru a copia în javascript.

exemple

Comentarii (3)