JDK 技术教程 2018-10-17

使用Ajax实现网页局部刷新案例

在web开发的过程都使用到数据的传递，但是传递数据后跳转网页的动作显得麻烦，这时候就可以使用到局部刷新的方法，来实现页面的局部刷新，提高用户的体验和开发的效率
项目要求：通过Ajax来实现页面局部刷新效果，
Ajax需要使用的js：链接: https://pan.baidu.com/s/12rgOp1g1T3pNXucZBb55Zg 提取码: cy18

index.jsp
登录按钮的时候触发ajax事件，添加一些ajax属性,在ajax中属性和属性之间使用逗号来隔开

url表示我们点击这个事件的时候，应该请求哪个资源(url里面的地址)。url是属性名，url与属性值之间通过”：”来隔开
请求方式,通常有两种请求，get和post
在请求LoginServlet的时候，需要传递值过去,通过name来获取
当ajax请求某个资源的时候，某个资源也需要给ajax回复一个数据，dataType:指明Servlet给ajax返回数据的数据格式

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "
http://www.w3.org/TR/html4/loose.dtd>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<% 
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/"; 
%>  
<script type="text/javascript" src="resources/js/jquery-1.4.2.js"></script>

</head>
<body>
	<center>
		<input type="button" value="流行歌曲"id="pop" name="song1">&nbsp;&nbsp;&nbsp;&nbsp;
		<input type="button" value="经典歌曲"id="classical" name="song2">&nbsp;&nbsp;&nbsp;
		<input type="button" value="摇滚歌曲"id="rok" name="song3">
		<h1 class="tip1"></h1>
		<h1 class="tip2"></h1>
		<h1 class="tip3"></h1>
		
		<script type="text/javascript">
				$("#pop").click(function(){
					$.ajax({
						url:"<%=basePath%>/LoginServlet",
						type:"post",
						data:{
							song1:$("input[name=song1]").val()
						},
						dataType:"json",
						success:function(result){
							$(".tip1").text(result.song1);
							$(".tip2").text(result.song2);
							$(".tip3").text(result.song3)
						}
					});
				});
				
				$("#classical").click(function(){
					$.ajax({
						url:"<%=basePath%>/LoginServlet",
						type:"post",
						data:{
							song2:$("input[name=song2]").val()
						},
						dataType:"json",
						success:function(result){
							$(".tip1").text(result.song1);
							$(".tip2").text(result.song2);
							$(".tip3").text(result.song3)
						}
					});
				});
				
				$("#rok").click(function(){
					$.ajax({
						url:"<%=basePath%>/LoginServlet",
						type:"post",
						data:{song3:$("input[name=song3]").val()},
						dataType:"json",
						success:function(result){
							$(".tip1").text(result.song1);
							$(".tip2").text(result.song2);
							$(".tip3").text(result.song3)
						}
					});
				});
		</script>
	</center>
</body>
</html>

LoginServlet.java

package com.zhumeng.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.json.JSONObject;

/**
 * Servlet implementation class LoginServlet
 */
@WebServlet("/LoginServlet")
public class LoginServlet extends HttpServlet {
	private static final long serialVersionUID = 1L;


	protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		String song1 = request.getParameter("song1");
		String song2 = request.getParameter("song2");
		String song3 = request.getParameter("song3");
		
		String song = null;
		JSONObject jsonobject = null;
		
		if(song1!=null && song2==null && song3==null) {
			song = song1;
		}else if(song2!=null &&song1==null && song3==null) {
			song = song2;
		}else if(song3!=null &&song2==null &&song1==null) {
			song = song3;
		}
		
		
		if(song.equals("流行歌曲")) {
			jsonobject = new JSONObject("{song1:style,song2:dress,song3:speak now} "); 
		}
		else if(song.equals("经典歌曲")) {
			jsonobject = new JSONObject("{song1:吻别,song2:冰雨,song3:咖啡}");
		}
		else if(song.equals("摇滚歌曲")) {
			jsonobject = new JSONObject("{song1:Girlfriends,song2:nightrain,song3:Numb}");
		}
		response.getOutputStream().write(jsonobject.toString().getBytes("UTF-8"));
	}

	protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		doGet(request, response);
	}
}