如何使用 AJAX Post Request 更改 HTML DOC 的背景颜色：
[英]How to change Background color of HTML DOC using AJAX Post Request:
问题描述
I am trying to create an HTML document that contains a button “Request color”.
我正在尝试创建一个包含“请求颜色”按钮的 HTML 文档。 Whenever a user clicks on “Request color”, the page performs an Ajax POST request to the URL color-service.php.每当用户单击“请求颜色”时，页面都会向 URL color-service.php 执行 Ajax POST 请求。 The color-service.php file handles the POST request and returns a JSON containing a random color, for example: { color: "red" }. color-service.php 文件处理 POST 请求并返回一个包含随机颜色的 JSON，例如：{ color: "red" }。 The Ajax response is then used to change the background of the color.html page accordingly.然后使用 Ajax 响应相应地更改 color.html 页面的背景。
Current HTML:当前的 HTML：
<!Doctype HTML>
<html>
<head>
<title>Random Color Changer</title>
</head>
<body style="<? echo $color?>">
<h1>Random Color Generator</h1>
<p id="color"></p>
<button type="button" onclick="changeColor()">Request Color</button>
<script>
function changecolor() {
var xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById.color = this.responseText;
}
}
};
xhttp.open("GET", "color-service.php", true);
xhttp.send();
}
</script>
</body>
</html>
Current PHP:当前 PHP：
<?php
$list = array('red', 'blue', 'yellow', 'pink', 'green');
$i = array_rand($list);
$color = $list[$i];
?>
2 个解决方案
解决方案1
0 2018-10-24 18:49:28
<body style="background-color:<? echo $color?>">
Make sure you're using background-color otherwise the browser won't know what you want coloured and in order for $color to do anything, you need to define it before you use it in your HTML.确保您使用的是background-color否则浏览器将不知道您想要什么颜色，并且为了让$color执行任何操作，您需要在在 HTML 中使用它之前定义它。
echo $color = $list[$i];
And make sure color-serivce.php actually returns the random colour using echo , otherwise it will just be a blank page.并确保 color-serivce.php 实际上使用echo返回随机颜色，否则它将只是一个空白页面。
document.body.style.backgroundColor = this.responseText;
The JavaScript attribute you need to use is .style.backgroundColor and you need to use otherwise the browser doesn't know what you want coloured.您需要使用的 JavaScript 属性是.style.backgroundColor并且您需要使用，否则浏览器不知道您想要什么颜色。 Just color on it's own won't work for what you want it to (it will set the colour of the text).仅凭自己的color将无法满足您的要求（它将设置文本的颜色）。
Also you've give your function two different names;您还为您的函数提供了两个不同的名称； in one case it says changeColor() and in another it doesn't have the capital 'C'.在一种情况下它说changeColor()而在另一种情况下它没有大写的“C”。
解决方案2
-1 2018-10-24 19:11:04
There are several problems here, but what you want is this:这里有几个问题，但你想要的是：
HTML HTML
<!Doctype HTML>
<html>
<head>
<title>Random Color Changer</title>
</head>
<body id="fillme">
<h1>Random Color Generator</h1>
<p id="color"></p>
<script>
function changecolor() {
var xhttp = new XMLHttpRequest();
xhttp.open("GET", "color-service.php", true);
xhttp.onload = function() {
if (this.readyState == 4 && this.status == 200) {
document.getElementById('fillme').style.backgroundColor = this.responseText;
}
};
xhttp.send();
}
changecolor();
</script>
<button type="button" onclick="changecolor();">Request Color</button>
</body>
</html>
PHP PHP
<?php
$list = array('red', 'blue', 'yellow', 'pink', 'green');
$i = array_rand($list);
$color = $list[$i];
echo $color;
?>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.