Question

在更新<p> innerHTML值时，我遇到了这个非常奇怪的问题。我想在不重新加载页面的情况下更改它，因此我使用了ajax。问题是它似乎无法更改innerHTML，我试图创建一个从<input>获取ID的页面，然后使用ajax将值传递给php脚本，但似乎我的searchEmp()函数出错了。更多细节如下......

<html>
<body>

<form name="searchForm">
        EMPLOYEE ID: <input type="text" name='emp_id' id='emp_id'/>
        <button onclick="searchEmp()"/>Search</button>
</form>
        <br>
        NAME:<p id='empName'>A </p><br>
        POSITION:<p id='empPos'>B </p>

<script language = "javascript" type = "text/javascript">
            function searchEmp() {

                var emp_id = document.getElementById('emp_id').value;
                var query = "?emp_id=" + emp_id;
                var xhr = new XMLHttpRequest();

                xhr.onreadystatechange = function() {

                    if(this.readyState == 4) {
                       jsonResponse = JSON.parse(xhr.responseText);
                       document.getElementById('empName').innerHTML = jsonResponse.empName;
                       document.getElementById('empPos').innerHTML = jsonResponse.empPosition;

                    }
                }

                xhr.open("GET", "retrieve_data.php" +query, true);

                xhr.send();

            }
</script>




</body>
</html>

我认为我的PHP脚本起初是问题，但我想我错了 - 我尝试过排查，所以我将searchEmp()更改为...

<script language = "javascript" type = "text/javascript">
            function searchEmp() {

                var emp_id = document.getElementById('emp_id').value;
                var query = "?emp_id=" + emp_id;
                var xhr = new XMLHttpRequest();

                xhr.onreadystatechange = function() {

                    if(this.readyState == 4) {

                        alert("readystate: "+xhr.readyState);
                        alert("status: "+xhr.status);
                        document.getElementById('empName').innerHTML = "NICE!";
                        document.getElementById("empPos").innerHTML = "NICE!";

                    }
                }

                xhr.open("GET", "retrieve_data.php" +query, true);

                xhr.send();

            }
</script>

我发现故障排除的是

警告框显示就绪状态：4和状态：200
尽管readystate确实等于4，但我innerHTML的{{1}}根本没有改变为简单的＆＃34; Nice！＆＃34;

<p>的确如何表现？它的生命周期是什么？我在互联网上搜索了答案，但找不到任何好的和清晰的答案。我是网络开发的学生，任何见解都会非常感激。谢谢！

retrieve_data.php：

xmlhttprequest

使用ajax和javascript

0 个答案: