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两次，以确保变量真的是＆＃39; userInput＆＃39;，两次，无论我是通过它还是在函数内部设置，它打印出来很好，所以我不确定问题是什么。如果你知道什么是错的，请告诉我。谢谢。

整个代码：

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

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

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

传递参数

2 个答案: