ajax 实现 JavaScript与jsp数据的传递

来源：互联网发布：网络教育本科毕业条件编辑：程序博客网时间：2024/06/04 19:49

【今天的任务一】：

完善转盘抽奖，实现从后台jsp页面生成随机数，然后用ajax获取这个随机数，以实现随机抽奖。

之前学习过一点ajax，但是只是在看书，把原生代码和jQuery代码都看了，也做了笔记，可是当今天想要完成这个任务的时候，却是无从下手！！！宝宝心里好苦啊。于是一上午就是查资料，重新看书，查阅了N个网页，但是也都没怎么弄明白，后来是师父给点播了一下，才豁然开朗了。其实代码和原理都很简单，接下来，说一下自己的学习过程和理解。

这里，我还是用了jQuery库，明儿再自己把ajax（）函数用原生的JavaScript代码编出来。

前端的HTML代码如下：

<!DOCTYPE html><html><head><meta charset="utf-8"><title>幸运大转盘-转盘转动-用CSS3实现</title><link rel="stylesheet" type="text/css" href="css/style.css"></head><body><div id="body-container"><div id="topic"></div><div id="zhuanpan"><div id="body-zhuanpan"></div><div id="miao"></div></div><div id="button"></div><div id="bottom"></div></div><script type="text/javascript" src="js/jquery-2.2.0.js"></script></body></html>

用到ajax的地方是在 “body-zhuanpan”，我需要获取一个随机数，来控制转盘的旋转角度，转盘的旋转是用CSS3的animation实现，共设置了6个奖项，分别用了6个@keyframe 控制旋转的角度，具体CSS代码不再赘述。

接下来是js代码

<script type="text/javascript">function luck(){var index = "";$.ajax({type:"GET",url: "/luck.jsp",dataType:"json",success:function(data){index = data.value;}});var zhuanpan = document.getElementById("body-zhuanpan");switch(index){case "1":zhuanpan.style.animation = "2s one forwards";setTimeout(function(){alert("1等奖");},2000);break;case "2":zhuanpan.style.animation = "2s two forwards";setTimeout(function(){alert("2等奖");},2000);break;case "3":zhuanpan.style.animation = "2s three forwards";setTimeout(function(){alert("3等奖");},2000);break;case "4":zhuanpan.style.animation = "2s four forwards";setTimeout(function(){alert("4等奖");},2000);break;case "5":zhuanpan.style.animation = "2s five forwards";setTimeout(function(){alert("5等奖");},2000);break;default:zhuanpan.style.animation = "2s zero forwards";setTimeout(function(){alert("谢谢参与");},2000);}}var btn = document.getElementById("button");btn.addEventListener("click",function(){luck();},false);</script>

我用的是jQuery的ajax（）函数，后台请求页面是luck.jsp

luck.jsp如下：

<%@ page import="java.util.*" %> {"value": (int)(Math.random()*10)}

用json存放数据，调用random（）来生成随机数。

我之前一直不太理解，到底是怎么回事。现在来说一下整个的逻辑。当我点击按钮“btn”时，会调用luck（）这个函数，而这个函数里面有一个ajax请求，这时候便会去访问url指向的后台页面luck.jsp，当请求成功的时候，luck.jsp里面的数据会以json的格式返回回来，也就是success函数的参数data，data.value即为后台页面产生的随机数，我将这个随机数赋值给index，便可以让转盘随机转动了。

【任务二】：用ajax从前端表单传递数据给后台jsp，然后将数据存到数据库。

任务一其实挺简单的，只要明白了前后逻辑，也很好理解。但是当我听到任务二时，宝宝又懵逼了。刚刚觉着掌握了ajax，可是顿时又觉着这是个啥！！后来，自己又查了一些网页，在师父的指导之下，终于都弄明白了。

前端有这样一个div，里面有两个文本框，我需要在点击按钮的时候，将文本框的内容通过ajax传递给后台jsp页面 db.jsp。

<div id="submit-information"><input type="text" id="qq" value=""><input type="text"  id="phone" value=""><input id="submit-button" type="submit" value=""></div>

我的js代码如下：

$("#submit-button").click(function(){$.ajax({type:"get",url:"/lucky/db.jsp",dataType:"json",data:{qq:$("#qq").val(),phone:$("#phone").val()},success:function(obj){console.log(obj)                            }});});

在ajax（）方法中，有一个json格式的data，用它来获取页面文本框中输入的内容。后台页面db.jsp可以通过访问这个json中的值来获取自己想要的参数。

db.jsp如下：

<%request.setCharacterEncoding("utf-8");String qqNum = request.getParameter("qq");String phoneNum = request.getParameter("phone");%>

这样，qqNum里面存放的就是页面文本框中数据的内容了。

通过ajax的data获取到页面表单的数据，然后通过ajax将数据传到url所指的后台页面，后台页面中就可以获取到相应的参数。

其实我之前不会用ajax的时候，jsp页面也可以获得到表单的数据，那时候我是用form的action，其与ajax的区别在于：

为form指定了action，则在点击提交按钮后，页面就会跳转到action所指的页面，当前的页面就不存在了，而用ajax还会停留在当前的页面，不会发生跳转，但是数据也已经传到了后台jsp，可以继续进行数据库的操作。

今天出现的错误：

1、将switch函数放在了ajax请求外面，这样每次index都是空，因为，ajax是异步请求的，需要时间，所以，代码顺序执行，index就取不到值，一直是空。
改正：将switch函数放在success回调函数里面，这样index才能取到值
2、编写luck.jsp时，没有引包，包的引入方法：<%@ page import="java.util.*" %>
3、ajax()里面的url写错了。

0 0