JDK 使用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">
<input type="button" value="经典歌曲"id="classical" name="song2">
<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);
}
}
