ajax 实现 JavaScript与jsp数据的传递

最新推荐文章于 2024-08-11 21:47:18 发布

季诗筱

最新推荐文章于 2024-08-11 21:47:18 发布

阅读量1.4w

点赞数 5

本文链接：https://blog.csdn.net/XIAOZHUXMEN/article/details/50740516

版权

javascript 同时被 2 个专栏收录

34 篇文章 0 订阅

订阅专栏

jQuery

11 篇文章 0 订阅

订阅专栏

【今天的任务一】：

完善转盘抽奖，实现从后台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写错了。