jquery ajax 传动态值(错误试调)

本功能实现点击视频,跳转到相关视频页面进行播放,播放完成给予学分。

工具:ssh+jsp+jquery ajax

1.后台数据从数据库取出存入session后,前台获取:

<s:iterator value="#session.videoPageList">
 <div id="tast" class="imgDiv" >
       <div class="cover" >
         //用url将动态值传递给另一个jsp页面
        <a href="watchVideo.jsp?
            videoTitle=${videoTitle}&&videoAuther=${videoAuther}&&videoLenght=${videoLenght}&&credit=${credit}&&uploadFileName=${uploadFileName}">
           <img id="cover" src="images/player.png">
         </a>
       </div>
       <!-- controls="controls" video标签包含这个属性的话会调用浏览器的视频播放插件,各浏览器各不相同-->
        <video id="video"  poster="" width="95%" height="100px">
           <source id="source" src="<s:property value="'upload/'+uploadFileName"/>" type="video/mp4" />
                               您的浏览器不支持 video 标签。
        </video>
    
      <div class="title"><s:property  value="videoTitle"/></div>
        主讲:<s:property value="videoAuther"/><br />
        时长:<s:property value="videoLenght"/><br/>
        学分:<s:property value="credit"/>
    
 </div>
 </s:iterator> 

2.jsp获取值

 <div id="content">
      <input id="videoTitle" name="videoTitle"  value="<%=request.getParameter("videoTitle")%>" /> <br/>
      
       主讲:<input id="videoAuther" name="videoAuther" class="infor" value="<%=request.getParameter("videoAuther")%>" />
       时长:<input id="videoLenght" name="videoLenght"  class="infor" value="<%=request.getParameter("videoLenght")%>">
       学分:<input id="credit" name="credit" class="infor" value="<%=request.getParameter("credit")%>"><br/>
                     
      <div id="includeDiv">
        <!--视频播放完毕,触发video事件onended调用函数-->
        <video id="video" οnended="addCredit();">
           <source id="source" src="<%="upload/"+request.getParameter("uploadFileName") %>"
           type="video/mp4" />
           您的浏览器不支持 video 标签。
        </video>
     
      <div id="imgDiv">
         <img src="images/player_1.png" id="player" οnclick="videoPlay();"/>
        <div id="time"><span id="demo" ></span><%=request.getParameter("videoLenght")%></div>
      </div> 
      </div>
    </div>
3.使用jquery ajax传递动态值到后台

function addCredit(){
 
    $.ajax({

            type: "post",//数据发送的方式(post 或者 get)
            
            url: "giveCredit.action",//要发送的后台地址,作用相当于href
            
            data: {"videoTitle":$("#videoTitle").val(), //要发送的数据(参数)
            	   "videoAuther":$("#videoAuther").val(),
            	   "videoLenght":$("#videoLenght").val(),
            	   "credit":$("#credit").val()
            	   },
          <span style="color:#FF0000;"> // dataType: "json",//后台处理后返回的数据格式</span>
            
            success: function () {//ajax请求成功后触发的方法
            
               alert("哇,又获得了"+$("#credit").val()+"个学分!");
            },
            
            error: function () {//ajax请求失败后触发的方法
            	alert("失败了!");
                
            }
        });
   }

页面一直调用错误函数,如下试调:

 error: function(XMLHttpRequest, textStatus, errorThrown) {
 alert(XMLHttpRequest.status);
 alert(XMLHttpRequest.readyState);
 alert(textStatus);
textStatus弹出值一直为parsererror

本例是因为使用jquery版本问题,查资料1.3之后的版本对json格式要求严格,格式不符,就会出现错误,简单的方法就是将dataType注释掉就可以了。

由于采用ssh开发后台,所以action 就是简单的set/get方法就可以拿到数据了,前提是名字能对应匹配,不要写错啊。


评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值