從ajax響應運行Javascript腳本

-2

我想在Ajax響應中調用JS腳本。它所做的就是將document.getElementById腳本傳遞給Ajax響應文本。從ajax響應運行Javascript腳本

目前的代碼返回我這個錯誤：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'; 
     "; 
}

來源

2016-09-30 Ivan Ralph G. Vitto

當您訪問它並嘗試設置'innerHTML'時，帶有'alertBox'的元素不在DOM中。你是否在ajax調用之前的某處添加它？如果不是，你需要先做。 – varontron

我認爲讓PHP返回一個成功/失敗指示符並讓現有的Ajax JS測試返回值並使用適當的類顯示適當的消息會更容易。另外，考慮到你使用jQuery，你爲什麼手工編寫自己的Ajax調用而不是使用'$ .ajax（）'？ – nnnnnn

你需要創建一個腳本元素，然後從響應中添加文本，然後將該元素添加到DOM –

你可以解決它通過改變一個小的，只是你必須寫你的AJAX成功的JS代碼寫在PHP頁面。在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"; 
    }

來源

2016-09-30 03:40:28

爲什麼我不能想到這一點。非常感謝！ –

基本上你得到這個錯誤，因爲你試圖改變的事情是不是在頁面上，當你尋找它。

你需要做的是，不要用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代碼：

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

來源

2016-09-30 03:46:02

應該修剪在PHP中使用字符串時的響應...它是臭名昭着的添加額外的空白 – charlietfl

完成，但我從來沒有這個問題，雖然。 –

如果您不需要做響應比較，通常不會出現問題 – charlietfl

使用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);

}）;

來源

2016-09-30 11:37:17 Veer

從ajax響應運行Javascript腳本

回答

相關問題