Variable value is not changed inside ajax

Asked

Viewed 94 times

0

I am trying to assign a value to a variable inside the sucess of an ajax, however, when checking the value of this variable, this value is with the variable creation value, follows:

var emailPessoa = '';

 $.ajax({
   url: api/aluno/id,
   type:'GET',
   success: function(r){
     emailPessoa = r[0].email;
     console.log(emailPessoa); // saida-exemplo: [email protected]
   }
 }); 
 console.log(emailPessoa) // saida: ''

Got the problem? What am I doing wrong?

javascript jquery ajax

  • That question can help you. You need to understand a little bit about synchronous and asynchronous methods.

  • When you open a website it takes a while to load, even if it’s a few seconds or a fraction of seconds, right? Ajax is the same thing, it will "open" another page to then return something. While Ajax is calling the other page, its console.log outside Ajax has already "worked" and gone to sleep. When Ajax comes back with the value, the console.log had already been executed. That’s why the name is Ajax (XML and Asynchronous Javascript).

2 answers

2

By default, this call is asynchronous. It means that you cannot access the value in this way.

As it is a somewhat lengthy theme to write in this reply, follows a link that explains everything you need to know.

Asynchronous and synchronous AJAX requests in jQuery

Note: Complementing the link, synchronous calls usually block execution while the request is in progress, so be careful.

I hope I’ve helped!

  • But I don’t understand... If I keep the value of the variable in another variable previously declared, why does its value get lost?

  • It is not lost. In fact, your last.log console runs before even the first.log console gets any value. I recommend reading on this subject, it is quite important!

1

Asynchronous request

When you execute a method in Ajax you are performing an asynchronous request, implicitly created by the object Xmlhttprequest. This function is the waiting of a reply, it means that while you do not receive it, nothing you put in the parameter Success or in any other callback will be executed. In other words, when you perform an asynchronous request it is not executed immediately.

In its code the console.log(emailPessoa); is being executed before your request returns a reply, in case Success. This happens to anything you put out of the scope of the response method.

var emailPessoa = '';

 $.ajax({
   url: api/aluno/id,
   type:'GET',
   success: function(r){
     emailPessoa = r[0].email;
     console.log(emailPessoa); // saida-exemplo: [email protected]
   }
 });
 
 console.log(emailPessoa) // isso vai ser executado antes do ajax
 
 var teste = "Teste"; // Isso também
 
 // essa funcao vai ser declarada
 function funcaoTeste(){
  console.log("Executou funcaoTeste");
 };
 
 // essa funcao também foi executada antes do ajax
 funcaoTeste();

Your variable emailPessoa will only be changed after the request gets a response. When you execute console.log(emailPessoa) it simply displays what you set in the variable up there: '', that is, nothing.

At this link clearly explains the difference between Synchronous and Asynchronous methods and requests.

Browser other questions tagged javascript jquery ajax

You are not signed in. Login or sign up in order to post.