在 HTML 中动态插入文本文件内容答案

【问题标题】：Dynamic insertion of text file contents within HTML在 HTML 中动态插入文本文件内容
【发布时间】：2013-04-27 10:07:37
【问题描述】：

基本上，我正在尝试完成一些个人爱好的代码。

我们的目标是能够从包含单行的文件中读取，该文件显示我当前正在收听的内容，因为它会更改歌曲，而无需我自己进行任何交互。最好我希望能够滚动包含歌曲名称的文本字段，但我会非常兴奋地在那里获得可格式化的文本。

目前我遇到了障碍，因为在编程方面我不是那么精明（震惊我的电脑到目前为止还没有起火......）。

到目前为止我所拥有的（对不起，糟糕的黑客工作）：

<html>
  <head>
  <style>
      body {
          background-color: rgba(0, 0, 0, 0.65);
          white-space: nowrap;
          overflow: hidden;
          margin: 0px 0px 0px 0px;
      }
      p.ex1 {
          font:22px, arial, sans-serif;
          color:rgb(255, 255, 255);
      }  
  </style>
  <script type="text/javascript" src="jquery.js"></script>
  <script type="text/javascript">
    setInterval('read',3000);
    function read(){
        jQuery.get('SongPlayback.html',
        function(data){$('.contents').html(data);}
        )
        }
  </script>      


  </head>
 <body>
    <p class="ex1">
    Now Playing:<br>
    <div id="contents"></div>
    </p>
 </body>
</html>

我怀疑所有这一切的主要问题是它要在本地运行，我不确定这是否可能（？），已经阅读了很多关于 JS 如何不在本地运行以确保安全的信息原因？可能是我只是在乱写代码。除了“SongPlayback.html”文件之外，我还将 jquery.js 存储在与 HTML 文件相同的目录中。

我之前使用<Object> 来存放文本，但我无法让它在歌曲（文件）更改时更新。

【问题讨论】：

您遇到了什么错误？如果您不知道，请检查您的控制台，如果您不知道那是什么，请在大多数主流浏览器中按 F12 以获取带有 GUI 的 web inspector。单击console 选项卡，它将显示错误是什么。可以使用上述方法读取文件中的数据，但是，如果您只从文件中接收文本，只需执行 $('.contents').html(data)}, 'text'); 以指定您仅接收文本字符串的意图
您不能在没有服务器运行的情况下在本地运行 jQuery.get 请求。您可以下载并在本地启动服务器：apachefriends.org/en/xampp.html 或将您的代码放在租用的服务器上（如果有的话）。
@tomca32 100% 错误。唯一抱怨它的浏览器是 Chrome，即使那样，如果你在本地做这一切，你也不担心用户是否会使用 Chrome，你可以简单地使用 Safari、Opera、Firefox、IE6-10 .
好吧，这并不是 100% 错误的，他会遇到同源问题。当然可以绕过它，但我认为最好不要进入它。虽然你在技术上是正确的，但我认为在服务器上做这些事情会让他省去很多麻烦。
@Ohgodwhy yes，只有 Chrome 在使用file:// 执行 XMLHTPPRequests 时会抱怨同源策略，但您真的以这种方式获得了加载的内容吗？我没有看到您提到的浏览器都没有在控制台或 Fiddler 中执行实际请求，更不用说从响应中获取任何内容......

标签： jquery html dynamic text

【解决方案1】：

为了使用 jQuery 处理 get 或 post 请求，您需要一个 服务器 来处理此类请求。您必须安装 wamp http://www.wampserver.com/en/#download-wrapper 或 xammp http://www.apachefriends.org/en/xampp.html。然后使用这些应用程序中的任何一个运行您的代码。

【讨论】：

【解决方案2】：

所以，回答我自己的问题，因为这一切都可以在本地相对地完成。

这将给我我想要的，如果格式正确，将返回在相应文件中找到的数据值。我唯一要做的就是摆脱看起来很糟糕的选取框，转而采用更好的 CSS 格式。

<html>
  <head>
  <style>
      body {
          background-color: rgba(0, 0, 0, 0.65);
          margin: 0px 0px 0px 0px;   
      }
      p.ex1 {
          font:18px arial, sans-serif;
          color:rgb(255, 255, 255);
          margin: 0px 0px 0px 0px;
      }  
  </style>

  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>

  <script>
            var previousData;
            function loadText() {
                $.ajax({
                    url: 'SongPlayback.json',
                    beforeSend: function(xhr) {
                        if (xhr.overrideMimeType) {
                            xhr.overrideMimeType("application/json");
                        }
                    },
                    dataType: 'json',
                    success: function(data) {
                        $.each(data, function(key, val) {
                            if (key == 'input') {
                                if (val != previousData) {
                                     previousData = val;
                                    $('#responsecontainer')
                                        .animate({opacity:0})
                                        .queue(function(){
                                             $(this).text(previousData).dequeue()
                                        })
                                        .animate({opacity:1});  
                                }
                            }
                        });
                    }
                });
            }

            setInterval(loadText, 500);

        </script>      


  </head>
 <body>
    <p class="ex1">Now Playing:<br>
    </p>
    <marquee direction="left" scrollamount="4">
    <p class="ex1" style="white-space:nowrap; height:25; width:200; margin:0px 0px 0px 0px;" id="responsecontainer"></p>
    </marquee>    
 </body>
</html>

【讨论】：

顺便说一句，这不是我的功劳，转至：link

【解决方案3】：

为了进行获取或发布，即使在本地主机上，您也需要运行网络服务器来处理请求。您可以使用Xampp 之类的工具轻松进行设置。您需要将文件重新定位到 Xampp 安装文件夹内的 htdocs 文件夹内的文件夹中。例如，如果您将文件添加到 htdocs/playlist/，您可以通过访问 http://localhost/playlist/ 在浏览器中访问它。设置完成后，您将能够执行获取和发布操作。 Xampp 是一个很棒的工具——它非常容易在您的本地 PC 上设置 Apache、PHP 和 MySQL。它超级简单，对于开发 Web 脚本非常有用。

【讨论】：

这是错误的。发帖前请自行尝试。
当您使用 jQuery get 或 post 时，您正在执行 XMLHttpRequest - 如果没有网络服务器响应，这将不会发生。另请参阅 stackoverflow.com/questions/8486590/… 和 en.wikipedia.org/wiki/XMLHttpRequest - 请注意第一段，其中提到了如何将请求发送到服务器。
这仍然不正确，因为当我对此做出回应时，我在本地使用他的代码而不需要服务器。并非每个 SO 帖子都是正确的，因为它已被回答，您还可以深入研究，当您意识到 XMLHTTPRequest 不是字面意思时，您会没事的。如果是，那么我们只能推断 XML 数据，不是吗？
等等，你是说它正在从“SongPlaylist.html”读取并在生成的 HTML 页面中显示结果？
@Ohgod为什么你确定你是在本地而不是在网络服务器中运行 OP 脚本？据我所知，XMLHTTPRequests 不能使用 file:// 协议