Как изменить цвет фона HTML DOC с помощью AJAX Post Request: - PullRequest
Новая
       108

Как изменить цвет фона HTML DOC с помощью AJAX Post Request:

0 голосов
/ 24 октября 2018

Я пытаюсь создать HTML-документ, содержащий кнопку «Запросить цвет».Всякий раз, когда пользователь нажимает «Запросить цвет», страница выполняет запрос Ajax POST к URL-адресу color-service.php.Файл 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];
?>

Ответы [ 2 ]

0 голосов
/ 24 октября 2018

Здесь есть несколько проблем, но вы хотите вот что:

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;
?>
0 голосов
/ 24 октября 2018 
<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'.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...