Exécuter le script Javascript à partir de la réponse ajax

Question

Je souhaite appeler un script JS dans une réponse Ajax. Ce qu'il fait est de passer le script document.getElementById à l'Ajax responseText.

Le code actuel me retourne cette erreur: Uncaught TypeError: Cannot set property 'innerHTML' of null

Cela se fait avec Visual Studio Cordova ..

Ajax:

$("#loginBtn").click(function() { 
    var username = document.getElementById("username").value; 
    var password = document.getElementById("password").value; 
    var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.onreadystatechange = function() { 
     if (this.readyState == 4 && this.status == 200) { 
      document.write(this.responseText); 
     } 
    } 
    xmlhttp.open("POST", "http://www.sampleee.esy.es/login.php", true); 
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
    xmlhttp.send("username=" + username + "&" + "password=" + password); 
}); 

PHP:

if($count == 1){ 
    echo "document.getElementById('alertBox').innerHTML = 'Login Success!'; 
     document.getElementById('alertBox').className = 'alert alert-success'; 
     document.getElementById('alertBox').style.display = 'block'; 
     setTimeout(function() { 
       window.location.href = '../html/dashboard.html'; 
      }, 1000); 
     "; 
}else{ 
     echo "document.getElementById('alertBox').innerHTML = 'Invalid login details'; 
     document.getElementById('alertBox').className = 'alert alert-danger'; 
     document.getElementById('alertBox').style.display = 'block'; 
     "; 
} 

Answer 1

Vous pouvez le résoudre en changeant un petit, juste vous devez écrire le code de js sur le succès d'ajax que vous écrire en php page.on la page php il n'y a pas alertBox élément c'est pourquoi l'erreur est survenue.

Your Js code will be like this:-

$("#loginBtn").click(function() { 
var username = document.getElementById("username").value; 
var password = document.getElementById("password").value; 
var xmlhttp = new XMLHttpRequest(); 
xmlhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     if(this.responseText=="success"){ 
     document.getElementById('alertBox').innerHTML = 'Login Success!'; 
     document.getElementById('alertBox').className = 'alert alert-success'; 
     document.getElementById('alertBox').style.display = 'block'; 
     setTimeout(function() { 
     window.location.href = '../html/dashboard.html'; 
     }, 1000); 
     }elseif(this.responseText=="error"){ 
     document.getElementById('alertBox').innerHTML = 'Invalid login details'; 
    document.getElementById('alertBox').className = 'alert alert-danger'; 
    document.getElementById('alertBox').style.display = 'block' 
     } 
    } 
} 
xmlhttp.open("POST", "http://www.sampleee.esy.es/login.php", true); 
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
xmlhttp.send("username=" + username + "&" + "password=" + password); 
    }); 

And php code like:-

if($count == 1){ 
echo "success"; 
}else{ 
    echo "error"; 
    } 

Answer 2

Fondamentalement, vous obtenez cette erreur parce que la chose que vous essayez de changer est pas sur la page lorsque vous chercher.

Ce que vous devez faire est, n'écrivez pas javascript avec PHP. Vous retournez quelque chose comme un int de php et ensuite l'utiliser pour décider ce que le javascript fait.

Vous avez le html sur la page et il suffit de changer le contenu à l'intérieur.

$("#loginBtn").click(function() { 
 
     var username = document.getElementById("username").value; 
 
     var password = document.getElementById("password").value; 
 
     var xmlhttp = new XMLHttpRequest(); 
 
     xmlhttp.onreadystatechange = function() { 
 
     if (this.readyState == 4 && this.status == 200) { 
 

 
      var str = this.responseText; //you may need to trim whitespace 
 
      var alert = document.getElementById('alertBox'); 
 
      if (str.trim() == 1) { 
 

 
       alert.innerHTML = 'Login Success!'; 
 
       alert.className = 'alert alert-success'; 
 
       alert.style.display = 'block'; 
 
       setTimeout(function() { 
 
       window.location.href = '../html/dashboard.html'; 
 
       }, 1000); 
 

 
      } 
 
      else { 
 

 
       alert.innerHTML = 'Invalid login details'; 
 
       alert.className = 'alert alert-danger'; 
 
       alert.style.display = 'block'; 
 

 
      } 
 
     } 
 
     xmlhttp.open("POST", "http://www.sampleee.esy.es/login.php", true); 
 
     xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
 
     xmlhttp.send("username=" + username + "&" + "password=" + password); 
 
     });

<div id="alertbox"></div>

Code PHP:

if($count == 1){ 
     echo 1; 
} 
else{ 
     echo 0; 
} 

Answer 3

Utilisez eval comme ci-dessous

$("#loginBtn").click(function() { 
var username = document.getElementById("username").value; 
var password = document.getElementById("password").value; 
var xmlhttp = new XMLHttpRequest(); 
xmlhttp.onreadystatechange = function() { 
    if (this.readyState == 4 && this.status == 200) { 
     var fun = eval(this.responseText); 
    } 
} 
xmlhttp.open("POST", "http://www.sampleee.esy.es/login.php", true); 
xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); 
xmlhttp.send("username=" + username + "&" + "password=" + password); 

});