AjaxレスポンスからJavascriptスクリプトを実行

Question

AjaxレスポンスでJSスクリプトを呼び出したい。それは、document.getElementByIdスクリプトをAjax responseTextに渡すことです。

現在のコードは、私は、このエラーを返します：Uncaught TypeError: Cannot set property 'innerHTML' of null

は、これは、Visual Studioのコルドバで行われます。..

アヤックス：

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

することができます変更によってそれを解決しなさい、ちょうどajaxの成功のjsコードを書く必要があるphpページに書き込みます。エラーが発生した理由は、alertBox要素がありません。

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

あなたはそれを見たときに変更しようとしている事がページ上にないので、基本的にはそのエラーを取得します。

あなたがする必要があるのは、PHPでjavascriptを書かないでください。 PHPからintのようなものを返し、それを使ってjavascriptの動作を決定します。

ページにhtmlがあり、その中のコンテンツを変更するだけです。

$("#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コード：

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

}）以下のような

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

Answer 3

使用評価。