JQuery Div Заполнить из PHP просто перенаправляет на страницу PHP?

Я пытаюсь извлечь строку из циклической переменной PHP и загрузить ее при обновлении в div с помощью jQuery.

Проблема в том, что он просто перенаправляет меня на страницу PHP, когда выполняются условия, вместо того, чтобы извлекать информацию из нее и помещать эту информацию в div на главной HTML-странице.

Я также пытаюсь поместить эту строку из div в функцию JavaScript responsiveVoice.speak("string"); но это тоже не работает.

Я стараюсь, чтобы мои вопросы были отформатированы настолько четко, насколько я могу себе представить, и я следовал рекомендациям по переполнению стека, насколько мне было понятно. Я пытаюсь задать хорошие вопросы, но в прошлом меня не принимали с другими вопросами.

РЕДАКТИРОВАТЬ: Исправлено расположение тега закрывающего скрипта и тега body. У него больше нет проблемы перенаправления на страницу PHP, но все еще не работает TTS. У него новая проблема; вместо того, чтобы обновлять одно эхо на основе изменений, оно просто печатает эхо снова и снова.

Вот файл index.html:

<html>
    <head>
    </head>
    <body>

        <script src="http://code.responsivevoice.org/responsivevoice.js"></script>
        <script>
            var speek = document.getElementById("load_updates");
            responsiveVoice.speak(speek);
        </script>
        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/
libs/jquery/1.3.0/jquery.min.js"></script>
        <script type="text/javascript">
            var auto_refresh = setInterval(
            function ()
            {
                $('#load_updates').load('new3.php').fadeIn("slow");
            }, 10000); // refresh every 10000 milliseconds
         </script>

                <div id="load_updates"></div>


    </body>
</html>

А вот и фон зацикливания new3.php файл:

<?php 
    for($z=0;$z<2880;$z++) {                
        $frog = "15";
        $tent = "2";            
        if ($frog >= $tent) {
            echo "+ frog!";
            echo  "tent";
            $sayit = "Hello! plus frog tent";               
        }   
    }  
?> 

Я удалил часть цикла PHP, которая изменяется для краткости.

1 ответ

Решение

Согласно API ResponsiveVoice.JS, метод speak принимает строковый параметр (а также необязательные параметры voice и options).

ГОВОРИТЬ (STRING TEXT, [STRING VOICE], [ПАРАМЕТРЫ ОБЪЕКТА])

Начинает произносить текст заданным голосом.
текст: строка
Текст для разговора.
голос: Струна
По умолчанию "UK English Female". Выберите из доступных отзывчивых голосов.
параметры: объект
Используется для добавления дополнительной высоты звука (от 0 до 2), скорости (от 0 до 1,5), громкости (от 0 до 1) и обратных вызовов.
Высота звука, скорость и громкость могут не влиять на звук в некоторых сочетаниях браузера, например, в старых версиях Chrome для Windows. 1

Код в вашем примере передает ссылку на элемент DOM (т.е. var speek = document.getElementById("load_updates");). Передайте текстовое содержимое этого элемента, используя .innerHTML, .text () и т. Д.

Итак, эта строка:

responsiveVoice.speak(speek);

Может быть обновлено до:

responsiveVoice.speak(speek.innerHTML);

Или придерживаться методов jQuery:

responsiveVoice.speak($(speek).text());

Что также может быть упрощено до следующего, что сделает ненужную строку выше:

responsiveVoice.speak($('#load_updates').text());

Посмотрите, как это продемонстрировано в этом PHPFiddle - просто нажмите кнопку с надписью " Run - F9 ".

Демонстрационный пример на phpFiddle использует то же имя файла для отправки асинхронного запроса (т.е. $('#load_updates').load(') потому что казалось невозможным иметь более одного файла в phpfiddle.

Он также использует $(document).ready(), чтобы убедиться, что DOM готов, прежде чем код начнет взаимодействовать с элементами из него. Также обратите внимание, что вызов .load() имеет вызов функции speakInnerHTML(), переданный в качестве второго аргумента, так что новый текст будет произнесен после его загрузки.

Обновить:

Поскольку .load() отправляет запрос в виде POST, когда объект передается в качестве второго аргумента, я обновил пример phpFiddle для передачи простого объекта.

$('#load_updates').load('<?php echo $_SERVER['PHP_SELF'];?>', {postData: 1}, speakInnerHTML).fadeIn("slow");

Затем в коде PHP проверьте эти данные POST:

if (isset($_POST['postData'])) {
    echo date('Y-m-d h:i:s');

1 https://responsivevoice.org/api/

Другие вопросы по тегам