<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<input type="text" value="test">
<input id="submit_button" type="button" value="submit">
<p id="prompt">test
<script>
function sendData()
{
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("post", "write.php",true);
xmlHttp.send("iq=test");
xmlHttp.onreadystatechange = function(){
if (xmlHttp.readyState == 4 && xmlHttp.status == 200){
document.getElementById("submit_button").value = "changed";
document.getElementById("submit_button").id = "changed";
document.getElementById("prompt").innerHTML = xmlHttp.responseText;
}
}
}
ob = document.getElementById("submit_button");
ob.addEventListener("click",sendData);
</script>
</body>
</html>the contents of write.php, just output a string
<?php
echo "no test";
?>the above code is simple. Click
for the first time.<input id="submit_button" type="button" value="submit">related tags < p id= "prompt" > test
will become < p id= "prompt" > no testat the same time
<input id="submit_button" type="button" value="submit">becomes
<input id="changed" type="button" value="changed">the problem is that the second time, click on this
<input id="changed" type="button" value="changed">although there are errors, test_second.html:20 Uncaught TypeError: Cannot set property "value" of null
at XMLHttpRequest.xmlHttp.onreadystatechange (test_second.html:20)
ob.addEventListener ("click", sendData);