Question

基本上我正在尝试为业余爱好完成个人代码。

目标是能够从包含单行的文件中读取，该行显示我当前正在收听的内容，因为它在没有任何自我交互的情况下更改歌曲。我喜欢能够滚动包含歌曲名称的文本字段，但是我会更加兴奋，只能获得格式化文本。

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

到目前为止我所做的事（对于糟糕的黑客工作表示抱歉）：

<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>来存放文本，但我无法更新歌曲（文件）更改。

Answer 1

所以，回答我自己的问题，因为可以在当地充分发挥这一点。

这将为我提供我想要的内容，如果格式正确，将返回相应文件中的数据值。我唯一要做的就是摆脱看起来很糟糕的选框，转而采用更好的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>

Answer 2

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

Answer 3

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

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

3 个答案: