使用AJAX实现优酷视频播放时留言不刷新

最新推荐文章于 2023-05-30 21:27:40 发布

哈佛凌晨

最新推荐文章于 2023-05-30 21:27:40 发布

阅读量1.7k

点赞数 2

分类专栏： javascirpt 学习笔记 php 文章标签： ajax url xmlhttprequest function flash 引擎

本文链接：https://blog.csdn.net/dyushuo6230/article/details/7313114

版权

学习笔记同时被 3 个专栏收录

40 篇文章 0 订阅

订阅专栏

javascirpt

19 篇文章 1 订阅

订阅专栏

php

15 篇文章 0 订阅

订阅专栏

各位童鞋我们试想一下，如果你在网页上看视频，看到有感而发时，这时你你对视频进行评论后，吧唧！整个页面刷新，你还得从头看视频，很蛋疼是吧。避免这种情况发生很简单，只要我们将评论部分使用AJAX做就可以了。

效果图：

下边将代码共享给大家:

主要功能文件有三个:
__________________________________________________________________________________________________________________

index1.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style>
#conmment{

   width:500px;
   height:400px;
   background-color:#FC3;}
</style>
<script src="Scripts/ajaxUtil.js" language="javascript" type="text/javascript"></script>
<script src="../../Scripts/swfobject_modified.js" type="text/javascript"></script>


<script language="javascript" type="text/javascript">
//此函数test()是获取textarea输入的值并创建url，调用get函数，将获取的值和url并且还有听readyState值为4时调用的函数名当参数传递过去
function test(){
       //调用$$函数，传textarea的id com让函数返回textarea对象以便获取textarea中输入的值
          var comment=$$("com");
          //初始化url
          var url="ajax-youku-server.php";
            //定义变量params来获取textarea的值（comment.value）
          var params="comment="+encodeURI(comment.value);
       //调用get函数，将获取的值和url并且还有听readyState值为4时调用的函数名当参数传递过去
           get(url,params,processCommentData);
   }



//此函数processCommentData就是将php返回来的值做处理，
function processCommentData(xhr){
   //获取div对象
   var div= document.getElementById("id1");
   //创建p标签
   var p=document.createElement("p");
           //用返回的值产生一个文本节点
           var text=document.createTextNode("评论内容："+xhr.responseText);
           //将文本添加到p元素
           p.appendChild(text);
           //将段落标记追加到div中
           div.appendChild(p);

   }
</script>

</head>

<body>

<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="1003" height="240" id="FlashID" title="aaa">
<param name="movie" value="banner.swf" />
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="7.0.70.0" />

<param name="expressinstall" value="../../Scripts/expressInstall.swf" />


<object type="application/x-shockwave-flash" data="banner.swf" width="800" height="220">
    
    <param name="quality" value="high" />
    <param name="wmode" value="opaque" />
    <param name="swfversion" value="7.0.70.0" />
    <param name="expressinstall" value="../../Scripts/expressInstall.swf" />
    
    <div>
      <h4>此页面上的内容需要较新版本的 Adobe Flash Player。</h4>
      <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="获取 Adobe Flash Player" /></a></p>
    </div>
    
</object>

</object>
<hr>
<textarea cols="95" rows="5" id="com"></textarea><br>
<input type="button" value="我来说几句" οnclick="test()">
<div id="id1" style="width:800px; height:150px; background:#C9C;"></div>
<script type="text/javascript">
swfobject.registerObject("FlashID");
</script>
</body>
</html>

______________________________________________________________________________________________________________________________

ajaxUtil.js
//此文件是封装好的一个ajax功能函数文件

ajax-youku-server.php

<?php
//省略了插入数据库步骤
echo $_GET['comment'];

?>

___________________________________________________________________________________________________________________________

注意：视频没链接，但整个程序的思路很明显了，希望大家看懂后自己能写出更加优化的代码分享给大家！

哈佛凌晨

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用AJAX实现优酷视频播放时留言不刷新

各位童鞋我们试想一下，如果你在网页上看视频，看到有感而发时，这时你你对视频进行评论后，吧唧！整个页面刷新，你还得从头看视频，很蛋疼是吧。避免这种情况发生很简单，只要我们将评论部分使用AJAX做就可以了。效果图：下边将代码共享给大家:主要功能文件有三个:____________________________________________________________
复制链接

扫一扫