AJAX document.getElementById 传递参数时不起作用

Question

我正在编写一个 AJAX 代码，它从用户那里获取输入并输出结果，当我在函数中设置名为 text 的变量时它可以工作，但是当我传递它通过它不起作用。请大家看一下，我把不相关的代码都去掉了，所以比较短。

不通过参数传递时的代码：

<script type = "text/javascript">

function process(){

  text = 'userInput';
  food = encodeURIComponent(document.getElementById(text).value);

}

</script>

<html>
<body onload="process()">
</body>
</html>

当我通过参数传递它时的代码：

<script type = "text/javascript">

function process(text){

  food = encodeURIComponent(document.getElementById(text).value);

}

</script>

<html>
<body onload="process('userInput')">
</body>
</html>

我两次都做了 document.write 以确保变量确实是 'userInput'，并且两次，无论我是通过它还是在函数中设置它，它都打印出来了，所以我不确定是什么问题。如果你知道出了什么问题，请告诉我。谢谢你。

整个代码：

functions.js:

var xmlHttp = createXmlHttpRequestObject();

//****************************************************************AJAX

function createXmlHttpRequestObject() {
    var xmlHttp;

    if (window.ActiveXObject) {
        try {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
        } catch (e) {
            xmlHttp = false;
        }
    } else {
        try {
            xmlHttp = new XMLHttpRequest();
        } catch (e) {
            xmlHttp = false;
        }
    }

    if (!xmlHttp)
        alert("Not xmlHttp!")else
            return xmlHttp;
}

//****************************************************************AJAX

function process(IDName, passTo, output) {
    if (xmlHttp.readyState == 0 || xmlHttp.readyState == 4) {
        get = encodeURIComponent(document.getElementById(IDName).value);
        xmlHttp.open("GET", passTo + get, true);
        xmlHttp.onreadystatechange = handleServerResponse(output);
        xmlHttp.send(null);
    } else {
        setTimeout('process()', 1000);
    }
}

//****************************************************************AJAX

function handleServerResponse(output) {
    if (xmlHttp.readyState == 4) {
        if (xmlHttp.status == 200) {
            xmlResponse = xmlHttp.responseXML;
            xmlDocumentElement = xmlResponse.documentElement;
            message = xmlDocumentElement.firstChild.data;
            document.getElementById(output).innerHTML = message;
            setTimeout('process()', 1000);
        } else {
            alert('xmlHttp.status does not equal 200!');
        }
    }
}

foodstore.php:

<?php
header('Content-Type: text/xml');
echo '<?xml version="1.0" encoding="UTF-8" standalone="yes" ?>';

echo '<response>';
$food = $_GET['food'];
$foodArray = array('tuna','bacon','beef','ham');

if(in_array($food,$foodArray))
    echo 'We do have '.$food.'!';
elseif ($food=='')
    echo 'Enter a food';
else
   echo 'Sorry punk we dont sell no '.$food.'!';

echo '</response>';
?>

test5.html:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="functions.js"></script>
</head>
<body onload="process('userInput','foodstore.php?food=','underInput')">
    <h3>The Chuff Bucker</h3>
    Enter the food you would like to order:
    <input type="text" id="userInput" />
    <div id="underInput" />
</body>
</html>

Answer 1

我只是运行对您的（修改后的）代码进行了此测试，它按预期工作。

<script type = "text/javascript">

function process(text){
alert(text);
  food = encodeURIComponent(document.getElementById(text).value);
alert(food);
}

</script>

<html>
<body onload="process('userInput')">
<input id="userInput" value="yummy" />
</body>
</html>

Answer 2

您在分配 onreadystatechange 处理程序时执行 handleServerResponse(output);，而不是在事件发生时执行。您需要延迟调用函数直到事件发生：

xmlHttp.onreadystatechange = function() {
    handleServerResponse(output);
};

AJAX document.getElementById 传递参数时不起作用

AJAX document.getElementById not working when pass through parameters

php

ajax

getelementbyid