来自 PHP 的 Jquery div 填充只是重定向到 PHP 页面？答案

【问题标题】：Jquery div fill from PHP just redirects to PHP page?来自 PHP 的 Jquery div 填充只是重定向到 PHP 页面？
【发布时间】：2017-03-13 19:29:50
【问题描述】：

我正在尝试从循环 PHP 变量中提取一个字符串，并在它使用 jQuery 更新到 div 时将其加载。

问题是，它只是在满足条件时将我重定向到 PHP 页面，而不是从中提取信息并将该信息放在主 html 页面上的 div 中。

我还尝试将 div 中的字符串放入 JavaScript 函数 responsiveVoice.speak("string");，但这也不起作用。

我正在努力使我的问题的格式尽可能清晰，并且我已按照我的最佳理解遵循堆栈溢出建议。我正在尝试提出好的问题，但过去我没有受到其他问题的欢迎。

编辑：修正了结束脚本标签和正文标签的位置。它不再有重定向到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 循环中发生变化的部分。

【问题讨论】：

不确定您是否在发布问题时错过了问题，但请先修复问题中的代码。我重新缩进了 HTML，它表明你没有在正确的位置关闭你的脚本标签。
我现在看到了。非常感谢！

标签： javascript php jquery html responsivevoice

【解决方案1】：

根据ResponsiveVoice.JS API，speak 方法采用字符串参数（以及可选的语音和选项参数）。

说话（字符串文本、[字符串语音]、[对象参数]）

开始以给定的声音朗读文本。
_{文本：字符串

要朗读的文本。
语音：字符串

默认为“英国英语女性”。从可用的 ResponsiveVoices 中进行选择。
参数：对象

用于添加可选音高（范围 0 到 2）、速率（范围 0 到 1.5）、音量（范围 0 到 1）和回调。

音高、速率和音量可能不会影响某些浏览器组合上的音频，例如 Windows 上的旧版 Chrome。}¹

您示例中的代码正在传递对 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());

请参阅this PHPFiddle 中的演示 - 只需单击标有“运行 - 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');

¹_{https://responsivevoice.org/api/}

【讨论】：

嗨，new=1 在$('#load_updates').load('<?php echo $_SERVER['PHP_SELF'];?>?new=1',speakInnerHTML).fadeIn("slow"); 行的 phpfiddle 示例中是什么意思？此外，在您的 phpfiddle 示例中，tts 会间歇性地工作。
这是一个查询字符串 - 这样，在 PHP 代码中，$_GET['new'] 将评估为真值（因此将打印文本）
谢谢山姆。如果我想将 php 文件与 html 文件分开，我可以使用$('#load_updates').load('separate.php',speakInnerHTML);吗？
是的-我这样做只是因为我在 phpfiddle 上只能有一个文件