如何使用 AJAX Post Request 更改 HTML DOC 的背景颜色：

Question

我正在尝试创建一个包含“请求颜色”按钮的 HTML 文档。 每当用户单击“请求颜色”时，页面都会向 URL color-service.php 执行 Ajax POST 请求。 color-service.php 文件处理 POST 请求并返回一个包含随机颜色的 JSON，例如：{ color: "red" }。 然后使用 Ajax 响应相应地更改 color.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>

当前 PHP：

<?php
    $list = array('red', 'blue', 'yellow', 'pink', 'green');

$i = array_rand($list);
$color = $list[$i];
?>

Answer 1

<body style="background-color:<? echo $color?>">

确保您使用的是background-color否则浏览器将不知道您想要什么颜色，并且为了让$color执行任何操作，您需要在在 HTML 中使用它之前定义它。

 echo $color = $list[$i];

并确保 color-serivce.php 实际上使用echo返回随机颜色，否则它将只是一个空白页面。

document.body.style.backgroundColor = this.responseText;

您需要使用的 JavaScript 属性是.style.backgroundColor并且您需要使用，否则浏览器不知道您想要什么颜色。 仅凭自己的color将无法满足您的要求（它将设置文本的颜色）。

您还为您的函数提供了两个不同的名称； 在一种情况下它说changeColor()而在另一种情况下它没有大写的“C”。

Answer 2

这里有几个问题，但你想要的是：

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
    $list = array('red', 'blue', 'yellow', 'pink', 'green');

$i = array_rand($list);
$color = $list[$i];
echo $color;
?>

如何使用 AJAX Post Request 更改 HTML DOC 的背景颜色：

问题描述

2 个解决方案

解决方案1
0 2018-10-24 18:49:28

解决方案2
-1 2018-10-24 19:11:04

如何使用 AJAX Post Request 更改 HTML DOC 的背景颜色：

问题描述

2 个解决方案

解决方案1 0 2018-10-24 18:49:28

解决方案2 -1 2018-10-24 19:11:04

解决方案1
0 2018-10-24 18:49:28

解决方案2
-1 2018-10-24 19:11:04