运行 Javascript 来自 ajax 响应的脚本

Question

我想在 Ajax 响应中调用 JS 脚本。它所做的是将 document.getElementById 脚本传递给 Ajax responseText。

当前代码returns我这个错误：Uncaught TypeError: Cannot set property 'innerHTML' of null

这是用 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

你可以通过一个小的改变来解决它，你只需要在AJAX 成功中编写你在PHP 页面中编写的JS 代码。在PHP页面中，没有alertBox元素，这就是错误发生的原因。

你的JS代码会是这样的：

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

和 PHP 代码如下：

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

Answer 2

基本上您会收到该错误，因为您要更改的内容在您查找时不在页面上。

你需要做的是，不要把javascript写成PHP。你 return 类似于来自 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代码：

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

Answer 3

像下面这样使用 eval

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

});

运行 Javascript 来自 ajax 响应的脚本

Run Javascript script from ajax response

javascript

php

ajax

jquery

visual-studio-cordova