功夫不负有心人之json数据的显示问题

最新推荐文章于 2024-09-20 21:05:13 发布

未具名

最新推荐文章于 2024-09-20 21:05:13 发布

阅读量1.4k

点赞数

文章标签： json 数据

本文链接：https://blog.csdn.net/qq_26684469/article/details/52113748

版权

<!DOCTYPE html>
<html>
<head lang="en">
  <meta charset="UTF-8">
  <title></title>
  <link href="../src/css/scojs.css" rel="stylesheet">
  <link href="../src/css/colpick.css" rel="stylesheet">
  <link href="../src/css/bootstrap.css" rel="stylesheet">
  <link rel="stylesheet" href="../src/css/main.css">
  <!--<link rel="stylesheet" href="../dist/css/danmuplayer.css">-->
</head>
<body>
<div id="reJson"><h2>通过 AJAX 改变文本</h2></div>
<button id="b01" type="button">reJson内容</button><br/>
<div id="haha"><h2>通过 AJAX 改变文本</h2></div>
<button id="b01" type="button">reJson内容</button>
<div id="danmup" style="left: 50%;margin-left:-400px;top:100px">


</div>
<div style="display: none">
  <span class="glyphicon" aria-hidden="true"></span>
  <span class="glyphicon" aria-hidden="true"></span>
  <span class="glyphicon" aria-hidden="true"></span>
  <span class="glyphicon" aria-hidden="true"></span>
  <span class="glyphicon" aria-hidden="true"></span>
  <span class="glyphicon" aria-hidden="true"></span>
  <span class="glyphicon" aria-hidden="true"></span>
</div>


</body>
<script src="../src/js/jquery-2.1.4.min.js"></script>
<script src="../src/js/jquery.shCircleLoader.js"></script>
<script src="../src/js/sco.tooltip.js"></script>
<script src="../src/js/colpick.js"></script>
<script src="../src/js/jquery.danmu.js"></script>
<script src="../src/js/main.js"></script>
<!--<script src="../dist/js/danmuplayer.min.js"></script>-->
<script>

 $("#danmup").DanmuPlayer({
    src:"level5.mp4",
    height: "480px", //区域的高度
    width: "800px" //区域的宽度
    /* ,urlToGetDanmu:"http://localhost:8080/liuda/test/json" */
    /* ,urlToGetDanmu:"1.json" */
    ,urlToPostDanmu:"stone.php"
  });

 /*  $("#danmup .danmu-div").danmu("addDanmu",[
    { "text":"这是滚动弹幕" ,color:"white",size:1,position:0,time:2}
    ,{color:"red", text:"我是帽子绿aaa" ,size:1,position:0,time:3}
    ,{ "text":"哈哈哈啊哈" ,color:"black",size:1,position:0,time:10}
    ,{ "text":"这是顶部弹幕" ,color:"yellow" ,size:1,position:1,time:3}
    ,{ "text":"这是底部弹幕" , color:"red" ,size:1,position:2,time:9}
    ,{ "text":"大家好，我是伊藤橙" ,color:"orange",size:1,position:1,time:3}

  ]) */
  
 /*  var reJson;
 $.ajax({
  type:'POST',
  url:"1.json",
  async:false, //为了简便，设置为同步操作
  cache: false,
  success:function(responseData){
   reJson=responseData;
  }
 });
  
   $("#danmup .danmu-div").danmu("addDanmu",reJson) */
  
   htmlobj=$.ajax({url:"http://localhost:8080/liuda/danmu/demo/1.json",async:false});
  var haha=[
    { "text":"这是滚动弹幕" ,color:"white",size:1,position:0,time:2}
    ,{color:"red", text:"我是帽子绿aaa" ,size:1,position:0,time:3}
    ,{ "text":"哈哈哈啊哈" ,color:"black",size:1,position:0,time:10}
    ,{ "text":"这是顶部弹幕" ,color:"yellow" ,size:1,position:1,time:3}
    ,{ "text":"这是底部弹幕" , color:"red" ,size:1,position:2,time:9}
    ,{ "text":"大家好，我是伊藤橙" ,color:"orange",size:1,position:1,time:3}
  ];
  var reJson=htmlobj.responseText;
   $("#haha").html(reJson);
   $("#reJson").html(reJson);
  reJson=eval("("+reJson+")"); 
  
  $("#danmup .danmu-div").danmu("addDanmu",reJson);
  
  
 
  
  
</script>
</html>

非常感谢下面这篇文章给我的帮助

真的好难，困扰了一天，这是实现弹幕的最大的障碍吧。

今天把以前的json的视频看了下，然后做了个小demo熟悉了下，然后就着手实现视频中弹幕的json传递，两种传递方式，但第一种我始终实现不了，无奈选择了第二种，然而第二种也不是那么容易实现的。我网上翻阅了很多篇博客都没有找到理想的方案，但功夫不负有心人吧，反正最后问题我解决了。

我先是无意点了 w3school的链接接触到了responseText这个关键属性，然后用这个属性获取json文件的文本数据，可以用一个div.html();看到我的json中的数据是取出来了的，可就是不能传到我想实现的damu方法中，而这串数据若是直接以文本的方式传进去则没有任何问题，然后我又在网上搜关键词“responseText”，无意点了一篇博客