Formulário Ajax Envie exemplos usando jQuery

Os formulários Ajax são parte integrante da tecnologia da web atualmente. Facilita o envio de solicitações HTTP, não é necessário recarregar a página e é rápido, pois ele pode enviar e receber informações em vários formatos, como HTML, JSON ou XML. Vamos aprender várias maneiras de enviar dados de formulário HTML usando o jQuery Ajax.

Envio de formulário HTML simples

O jQuery possui vários métodos abreviados para jQuery.ajax () , como .get () , .post () , .load () , .getJSON () , todos realizam a mesma coisa, mas são mais específicos para as tarefas e exigem menos código. Vamos começar com um formulário HTML simples e, em seguida, podemos escrever códigos jQuery para ele que executam solicitações Ajax:

HTML



<form action="path/to/server/script" method="post" id="my_form">
    <label>Name</label>
    <input type="text" name="name" />
    <label>Email</label>
    <input type="email" name="email" />
    <label>Website</label>
    <input type="url" name="website" />
    <input type="submit" name="submit" value="Submit Form" />
<div id="server-results"><!-- For server results --></div>
</form>

Os trechos do jQuery abaixo demonstram diferentes maneiras de fazer solicitações do Ajax.

Envie dados do formulário HTML usando a função jQuery ajax () regular . É muito flexível e pode ser configurado para heart content.

JQUERY



$("#my_form").submit(function(event){
 event.preventDefault(); //prevent default action 
 var post_url = $(this).attr("action"); //get form action url
 var request_method = $(this).attr("method"); //get form GET/POST method
 var form_data = $(this).serialize(); //Encode form elements for submission
 
 $.ajax({
  url : post_url,
  type: request_method,
  data : form_data
 }).done(function(response){ //
  $("#server-results").html(response);
 });
});

jQuery post() is a shorthand function of ajax().

JQUERY



$("#my_form").submit(function(event){
 event.preventDefault(); //prevent default action 
 var post_url = $(this).attr("action"); //get form action url
 var form_data = $(this).serialize(); //Encode form elements for submission
 
 $.post( post_url, form_data, function( response ) {
   $("#server-results").html( response );
 });
});

jQuery get() same as post(), but uses HTTP GET request.

JQUERY



$("#my_form").submit(function(event){
 event.preventDefault(); //prevent default action 
 var post_url = $(this).attr("action"); //get form action url
 var form_data = $(this).serialize(); //Encode form elements for submission
 
 $.get( post_url, form_data, function( response ) {
   $("#server-results").html( response );
 });
});

getJSON() also uses HTTP GET like get(), but loads JSON-encoded data from the server.

JQUERY



$("#my_form").submit(function(event){
 event.preventDefault(); //prevent default action 
 var post_url = $(this).attr("action"); //get form action url
 var form_data = $(this).serialize(); //Encode form elements for submission
 
 $.getJSON( post_url , form_data,function( response ) {
  //iterate json response
  $.each( response, function(key, val) {
   $("#server-results").append( val + "<br />"); //append results to element
  });
 });
});

O método .serialize () serializa as entradas de um formulário para consultar a string que pode ser enviada usando o Ajax.

Multipart HTML / formulário de dados Enviar formulário
Para fazer upload de arquivos para o servidor, podemos usar a interface FormData disponível para XMLHttpRequest2 , que constrói um objeto FormData e pode ser enviado ao servidor facilmente usando o jQuery Ajax. Navegadores antigos (por exemplo: IE9) não suportam FormData , consulte caniuse.com para obter mais informações.

JQUERY



$("#my_form").submit(function(event){
    event.preventDefault(); //prevent default action 
    var post_url = $(this).attr("action"); //get form action url
    var request_method = $(this).attr("method"); //get form GET/POST method
 var form_data = new FormData(this); //Creates new FormData object
    $.ajax({
        url : post_url,
        type: request_method,
        data : form_data,
  contentType: false,
  cache: false,
  processData:false
    }).done(function(response){ //
        $("#server-results").html(response);
    });
});

HTML



<form action="path/to/server/script" method="post" id="my_form">
    <label>Name</label>
    <input type="text" name="name" />
    <label>Email</label>
    <input type="email" name="email" />
    <label>Website</label>
    <input type="url" name="website" />
    <input type="file" name="my_file[]" /> <!-- File Field Added -->
    <input type="submit" name="submit" value="Submit Form" />
<div id="server-results"><!-- For server results --></div>
</form>

Esse é todo o código que precisamos para enviar arquivos usando o jQuery Ajax. O contentType está definido como false, caso contrário, o padrão é definido "application / x-www-form-urlencoded" , o que não é bom para o upload de arquivos. A configuração de false postará os dados como " dados de várias partes / formulário" . Outra coisa importante aqui é processData , que também deve ser configurada como false , caso contrário, o jQuery tentará serializar o objeto FormData em uma string de consulta, e você poderá acabar com um erro de chamada ilegal .

Enviar formulário Ajax com uma barra de progresso

Ao publicar dados no servidor, podemos notificar o usuário sobre o progresso que está acontecendo em segundo plano. Para isso, usamos a função de retorno de chamada xhr .

JQUERY



$("#my_form").submit(function(event){
    event.preventDefault(); //prevent default action 
    var post_url = $(this).attr("action"); //get form action url
    var request_method = $(this).attr("method"); //get form GET/POST method
    var form_data = new FormData(this); //Encode form elements for submission
    
    $.ajax({
        url : post_url,
        type: request_method,
        data : form_data,
  contentType: false,
  processData:false,
  xhr: function(){
  //upload Progress
  var xhr = $.ajaxSettings.xhr();
  if (xhr.upload) {
   xhr.upload.addEventListener('progress', function(event) {
    var percent = 0;
    var position = event.loaded || event.position;
    var total = event.total;
    if (event.lengthComputable) {
     percent = Math.ceil(position / total * 100);
    }
    //update progressbar
    $("#upload-progress .progress-bar").css("width", + percent +"%");
   }, true);
  }
  return xhr;
 }
    }).done(function(response){ //
        $("#server-results").html(response);
    });
});

HTML



<form action="path/to/server/script" method="post" id="my_form">
    <label>Name</label>
    <input type="text" name="name" />
    <label>Email</label>
    <input type="email" name="email" />
    <label>Website</label>
    <input type="url" name="website" />
    <input type="file" name="my_file[]" /> <!-- File Field Added -->
    <input type="submit" name="submit" value="Submit Form" />
<div id="server-results"><!-- For server results --></div>
</form>
<div id="upload-progress"><div class="progress-bar"></div></div> <!-- Progress bar added -->

CSS



/*Progress Bar*/
#upload-progress{
    height: 20px;
    border: 1px solid #ddd;
    width: 100%;
}
#upload-progress .progress-bar{
 background: #bde1ff;
    width: 0;
    height: 20px;
}