jquery ajax 传动态值（错误试调）

来源：互联网发布：通达信扩展数据管理器编辑：程序博客网时间：2024/06/10 16:25

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

工具：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" onended="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" onclick="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方法就可以拿到数据了，前提是名字能对应匹配，不要写错啊。

0 0