从ajax响应运行Javascript脚本

I want to call a JS Script in Ajax response. What it does is pass the document.getElementById script to the Ajax responseText.

The current code returns me this error: Uncaught TypeError: Cannot set property 'innerHTML' of null

This is done with 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';
        ";
}

You can solve it by change a small ,just you have to write js code on ajax success that you write in php page.on the php page there are no alertBox element thats why the error occured.

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";
  }

Basically you get that error because the thing you're trying to change is not on the page when you look for it.

What you need to do is, do not write javascript with PHP. You return something like an int from php and then use that to decide what the javascript does.

You have the html on the page and just change the content inside it.

$("#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>

PHP Code:

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

</div>

Use eval like below

$("#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);

});