抓取ajax动态网页java(完善转盘抽奖，实现从后台jsp页面生成随机数，以随机抽奖 )

　　抓取ajax动态网页java(完善转盘抽奖，实现从后台jsp页面生成随机数，以随机抽奖

)

　　【今日任务一】：

　　改进转盘抽奖，实现从后台jsp页面生成随机数，然后使用ajax获取随机数实现随机抽奖。

　　之前学过一点ajax，只是在看书，把原生代码和jQuery代码都看了，还做了笔记，但是今天想完成这个任务的时候，却无从下手！！！感觉宝宝好苦。于是查了资料，又看了书，又查了N个网页，一上午都不知道怎么弄的。后来，是主人吩咐的，这才恍然大悟。其实代码和原理都很简单。接下来说说我自己的学习过程和理解。

　　在这里，我仍然使用 jQuery 库，明天我将使用原生 JavaScript 代码编译 ajax() 函数。

　　前端的HTML代码如下：

　　

幸运大转盘-转盘转动-用CSS3实现

　　使用ajax的地方是“body-转盘”。我需要得到一个随机数来控制转盘的旋转角度。转盘的旋转是通过CSS3*敏*感*词*实现的。设置了6个奖项，使用了6个。关键帧控制旋转角度，具体CSS代码不再赘述。

　　接下来是js代码

　　

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);

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

　　运气.jsp如下：

　　

{

"value": (int)(Math.random()*10)

}

　　使用json存储数据，调用random()生成随机数。

　　我不太明白之前发生了什么。现在让我们谈谈整个逻辑。当我点击“btn”按钮时，会调用luck()函数，这个函数中有ajax请求。这时候我会访问url指向的后台页面luck.jsp。请求成功后，会以json格式返回luck.jsp里面的数据，即success函数的参数数据。data.value 是后台页面生成的随机数。我将此随机数分配给索引以使转盘随机旋转。

　　【任务二】：使用ajax将数据从前端表单传输到后端jsp，然后将数据保存到数据库中。

　　任务1其实挺简单的，只要明白前后的逻辑，就很容易理解了。但是听到任务二的时候，宝宝又晕了过去。我只是觉得我掌握了 Ajax，但我突然觉得它是什么！！后来查了一些网页，在师父的指导下，终于弄明白了。

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

　　我的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格式的数据，用于获取页面文本框中输入的内容。后台页面db.jsp可以通过访问这个json中的值来获取你想要的参数。

　　db.jsp 如下：

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

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

　　其实我之前没有用ajax的时候，jsp页面也是可以获取到表单数据的。当时我用的是表单的动作。与ajax的区别在于：

　　如果为表单指定了一个动作，点击提交按钮后，页面会跳转到该动作指向的页面，当前页面不存在，ajax会停留在当前页面不跳转。但是数据也已经转移到后台jsp了，可以继续数据库操作了。

　　今天出现的错误：

　　1、 把switch函数放在ajax请求之外，这样每次索引都为空，因为ajax是异步请求，需要时间，所以如果代码顺序执行，索引不会得到值，它永远是空的。.

　　更正：把switch函数放在成功回调函数中，这样索引就可以拿到值了

　　2、写luck.jsp时，没有包引入，包引入方法：

　　3、ajax() 中的 url 错误。