Javascript 在HTMLKeyup上，我想调用一个php页面，从那里获取变量值，并将其添加到html内容中

我知道它非常基本，可能也很简单，但我真的被卡住了。 只是尝试在onkeyup事件中从php获取数据，并将其发布到HTML页面中

这是我的HTML

<input id="dell" type="text" onkeyup="dell_function()"<br>

<p id="gimr">get her the php variable var.</p>

php文件：

<?
$var=11;
echo $var;
?>

现在我需要编写dell_函数，我想打开php文件并获取$var值，然后将其作为字符串发布到这里：

<p id="gimr">get her the php variable var.</p>

我知道其中涉及到ajax，但我确实尝试过，但无法理解，那么如何编写dell_函数呢

function dell_function() {
    var xhttp = new XMLHttpRequest(); // creates a ajax request object
    xhttp.onreadystatechange = function () { // will fire when the status of the request changes
        if (this.readyState == 4 && this.status == 200) { // checks if the current state indicates that the content has been loaded successfully. readyState=4 means that the request has been completed and the status 200 means that the request returned http status code 200, which means the server response is OK (404 would mean file not found, 408 means timeout, etc - you get the idea).
            document.getElementById("gimr").innerHTML = this.responseText; //this will put the response text as html inside the "gimr" element.
        }
    };
    xhttp.open("GET", "YOUR_PHP_FILE.php", true); //the first parameter sets the request method, the second defines the url, and the third defines if the data should be fetched asynchronously.
    xhttp.send(); // sends the requests to the specified url.
}

用PHP文件的url替换_PHP_FILE.PHP

---

顺便说一句，看看jquery——它让类似的事情变得容易多了；Ajax非常简单，尤其是在使用JQuery时。以下是它在jQuery中的外观：

function dell_function() {
    $.ajax({
        url:"test.php", // replace test.php with the name of your PHP file
        success: function(data) {
                     $("#gimr").html(data);
                 }
    });
}

---

jQuery文档描述了使用Ajax可以做的其他一些很酷的事情：

您应该自己编写代码。如果您有问题，请发布您尝试过的内容，并清楚解释哪些内容不起作用，然后提供。读一个好问题。请务必阅读和阅读。尝试探索Ajax。正如@JayBlanchard所提到的，最好先试试自己。如果您遇到任何错误，请将问题发布以供解决。可能的答案太多，或者好的答案对于这种格式来说太长。请添加详细信息，以缩小答案集或隔离可以在几段中回答的问题。我建议你找一个发展论坛，也许？得出一般性结论。然后，当/如果您有特定的编码问题时，请回到Stack Overflow，我们将很乐意提供帮助。一个好的答案将始终解释所做的事情以及为什么以这种方式进行，不仅是为了OP，而且是为了SO的未来访问者。@JayBlanchard感谢您的反馈。当我有时间的时候，我会编辑我的答案，让它变得更清晰。一个好的答案总是会有一个解释，说明做了什么以及为什么这样做，不仅是为了OP，而且是为了未来的访客。