Use jQuery.ajax , jQuery.post , XMLHttpRequest or Fetch for this functionality.
jQuery.Ajax
jQuery.Ajax is a function based on XMLHttpRequest . It is for sending requests of type GET, POST, PUT, DELETE etc.
With these requests you can also send and receive data. In the case of jQuery.ajax , just enter in the data property, which data you want to send.
To capture the return, there are three functions that can be used for this: success for when there are successes in the requisitions; error for when there is an error; and complete for when the request is completed.
In our example, I'll only use the success function, but it's up to you to use the others as well.
Example:
$("#Bot_login").click( function(event) {
event.preventDefault();
$.ajax({
/* URL da requisição */
url: 'sua-url',
/* Tipo da Requisição */
type: 'POST',
/* Campos que serão enviados */
data: {
Nome: $('input[name="Nome"]').val(),
Nick: $('input[name="Nick"]').val(),
Email: $('input[name="Email"]').val(),
Senha: $('input[name="Senha"]').val()
},
/* Os campos abaixo são necessários quando há envio de arquivos */
processData: false,
cache: false,
/* Função para quando houver sucesso na requisição */
success: function( response ) {
alert( response );
}
});
});
XMLHttpRequest
XMLHttpRequest is the basis of jQuery.Ajax and jQuery.Post . It works the same way, however, with methods and form of submission a little different.
XMLHttpRequest is an API that provides functionality to the client to transfer data between a client and a server. It provides an easy way to retrieve data from a URL without having to do a full page update.
In programming, this is called Ajax = Asynchronous JavaScript and XML. Apesr's name does not necessarily have to be in XML.
Example:
/**
* Cria uma requisição e adiciona um evento
* quando quando a requisição for finalizada
*/
const xhr = new XMLHttpRequest();
xhr.addEventListener("loaded", response => {
alert( response.target.success );
});
$("#Bot_login").click(function(event) {
event.preventDefault();
/* Abre uma requisição do tipo POST */
xhr.open("POST", "sua-url", true);
/* Envia a requisição */
xhr.send( new FormData( document.querySelector("form") ) )
});
Fetch
Fetch is an alternative version of XMLHttpRequest , but it - promises - a set of features that make it more "powerful" and flexible than XHR
This function works with generic objects of type Request and Response . It is ideal for anyone who wants to work with Service Work , cache manipulation through Cache API , requests etc.
It only has one parameter. In this parameter you can pass a "string" (URL) or a Request object with the settings of your request.
Example:
$("#Bot_login").click(function(event) {
event.preventDefault();
/* Cria uma requisiçãod o tipo POST */
const request = new Request("sua-url", {
method: "POST",
body: new FormData( document.querySelector("form") )
});
/* Executa a requisição e retorna o resultado */
fetch(request).then( response => {
return response.text(); // ou return response.json();
} )
.then ( result => {
alert( result );
});
});
jQuery.Post
This is an alternative, compact version of jQuery.Ajax
$.post('sua-url', {
Nome: $('input[name="Nome"]').val(),
Nick: $('input[name="Nick"]').val(),
Email: $('input[name="Email"]').val(),
Senha: $('input[name="Senha"]').val()
}, function(response) {
alert( response )
})
