Use the jQuery.ajax, jQuery.post, XMLHttpRequest or Fetch for this functionality.
jQuery.Ajax
The jQuery.Ajax is a function based on XMLHttpRequest. It is used for sending requests like GET, POST, PUT, DELETE etc.
With these requests you can also send and receive data. In the case of jQuery.ajax, just inform at the property data, what data you want to send.
To capture the return, there are three functions that can be used for this: success for when the requisitions are successful; error when there is an error; and complete for when the request is completed.
In our example, I will use only the function success, but it is 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
The XMLHttpRequest is the basis of jQuery.Ajax and jQuery.Post. It works in the same way, however, with methods and way of sending a little different.
XMLHttpRequest is a API which provides functionality to the client to transfer data between a client and a server. It provides an easy way to recover 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 need to - necessarily - 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
The Fetch is an alternative version of XMLHttpRequest, but it - promises - a set of resources that make it more "powerful" and flexible than the XHR
This function works with generic objects of the type Request and Response. It is ideal for those who want to work with Service Work, cache handling via Cache API, requisitions etc.
It has only one parameter. In this parameter you can pass a "string" (URL) or an object Request with your request settings.
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 and 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 )
})