Question

我正在通过在线教程学习AJAX，我正在尝试使用代码。

以下是教程的代码：

<body>
<script language="javascript" type="text/javascript">

function ajaxFunction(){
var ajaxRequest;  // The variable that makes Ajax possible!

try{
    // Opera 8.0+, Firefox, Safari
    ajaxRequest = new XMLHttpRequest();
} catch (e){
    // Internet Explorer Browsers
    try{
        ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
    } catch (e) {
        try{
            ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e){
            // Something went wrong
            alert("Your browser broke!");
            return false;
        }
    }
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
        document.myForm.time.value = ajaxRequest.responseText;
    }
}
ajaxRequest.open("POST", "serverTime.php", true);
ajaxRequest.send(null); 
}

</script>

<form name='myForm'>
Name: <input type='text' onChange="ajaxFunction();" name='username' /> <br />
<!--  *******  this is what I want to work with: ****-->   <input type='text' name='time' />
</form>
</body>
</html>

我希望结果打印到简单的<p>代码而不是<input>。我尝试了以下方法，但它不起作用：

<p name="time"></p>

我做错了什么？

修改

根据以下答案，我将代码更改为：

    ajaxRequest.onreadystatechange = function(){
    if(ajaxRequest.readyState == 4){
                var txtNode = document.createTextNode(ajaxRequest.responseText);
                document.getElementById("time").appendChild(txtNode);
    }

和

<p id="time"></p>

我仍然无法让它发挥作用。我做错了什么？

Answer 1

段落元素不能包含name属性，您需要使用id。这意味着您还应该使用document.getElementById("time")代替document.myForm.time。

编辑您的JavaScript：

if(ajaxRequest.readyState == 4) {
    var txtNode = document.createTextNode(ajaxRequest.responseText);
    document.getElementById("time").appendChild(txtNode);
}

你的HTML：

<p id="time"></p>

Answer 2

您只能通过名称而不是p标签（或任何其他标签）访问表单中的输入，选择和textarea标签。你甚至不能在p标签中拥有name属性。

document.myForm.time.value = ajaxRequest.responseText; 
// time should be a input tag with name time in order for this code to work

而不是这样做

<p id="time"></p>

并在您的JavaScript代码中

document.getElementById("time").innerHTML = ajaxRequest.responseText;

AJAX结果为<p>而不是<input /> </p>

2 个答案: