一. 前言
在之前项目里，我们删除一个数据需要跳转到一个结果页来显示删除是否成功，但在实际生活中我们却很少会采用这种方式。举个最常见的例子，比如我们将购物车的一个商品删除，或者修改商品的数量，又或者注册用户的时候，判断该用户名是否存在等等都是在当前页直接完成操作的，并没有刷新当前页或者跳转到其他的页面，这就用到了ajax请求。
ajax 是一种与服务器交换数据的技术，可以在不重新载入整个页面的情况下更新网页的一部分内容。
二. JQuery ajax方法
我们可以使用ajax() 方法用于执行 AJAX（异步 HTTP）请求，在该方法中通过{}传入一个对象，我们将会用到以下属性：
-
url：发送请求的 URL。默认是当前页面，
-
type：请求的类型，通常为post或者get
-
data ：发送到服务器的数据。将自动转换为请求字符串格式。GET 请求中将附加在 URL 后。
-
success(result,status,xhr)：当请求成功时运行的函数
其中data属性只有在type为post的时候才可能用到
例一，首先我们通过Servlet将查询到的数据以JSON格式的字符串返回：
package servlet;
import com.alibaba.fastjson.JSON;
import dao.BikeDao;
import dao.impl.BikeDaoImpl;
import entity.Bike;
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 java.io.IOException;
import java.io.PrintWriter;
@WebServlet("/json")
public class JSONServlet extends HttpServlet {
private BikeDao bikeDao = new BikeDaoImpl();
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String id = req.getParameter("id");
Bike bike = null;
if(id != null) {
bike = bikeDao.queryById(Integer.parseInt(id));
}
resp.setContentType("application/json; charset=utf-8");
PrintWriter writer = resp.getWriter();
writer.println(JSON.toJSONString(bike));
writer.close();
}
}
之前我们需要跳转到http://localhost:8888/svt/json?id=1才能获取到一辆单车的数据，现在便可以直接通过ajax来获取。
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<!DOCTYPE html>
<html>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<%--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>--%>
<script src="${pageContext.request.contextPath}/admin/jquery-1.8.3.min.js"></script>
<head>
<title>$Title$</title>
</head>
<script type="text/javascript">
$(function () {
$("button").click(function () {
var id = $("input[name='bikeId']").val();
alert(id);
$.ajax({
url:"${pageContext.request.contextPath}/json?id="+id,
type:"get",
success:function (res) {
console.log(res);
console.log(res.type); //获取单车的类型
}
});
});
});
</script>
<body>
<input type="text" class="form-control" name="bikeId">
<button>查询</button>
</body>
</html>
success中的res就是我们获取到数据，在上面的例子中res就是一个JSON。另外因为我们在JSONServlet 中，设置了resp.setContentType(“application/json; charset=utf-8”); 所以ajax方法中的res的类型就是Object（可以通过typeof res 查看），所以可以直接用res.xxx来获取Bike对象的相关属性，如果我们将resp.setContentType设置text/html，那么ajax方法中的res类型就是String，则必须先使用JSON.parse(res)将其转换为js对象，才能通过res.type来获取单车的类型。
例二，点击按钮后，直接将h1标签的内容修改为单车的类型
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<!DOCTYPE html>
<html>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<%--<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>--%>
<script src="${pageContext.request.contextPath}/admin/jquery-1.8.3.min.js"></script>
<head>
<title>$Title$</title>
</head>
<script type="text/javascript">
$(function () {
$("button").click(function () {
var id = $("input[name='bikeId']").val();
$.ajax({
url:"${pageContext.request.contextPath}/json?id="+id,
type:"get",
success:function (res) {
$("h1").text(res.type);
}
});
});
});
</script>
<body>
<input type="text" class="form-control" name="bikeId">
<button>查询</button>
<h1>内容</h1>
</body>
</html>
例三. 通过data将表单的数据发送到服务器
Servlet
package servlet;
import com.alibaba.fastjson.JSON;
import dao.BikeDao;
import dao.impl.BikeDaoImpl;
import entity.Bike;
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 java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import java.net.URLEncoder;
import java.util.HashMap;
import java.util.Map;
@WebServlet("/result")
public class ResultServlet extends HttpServlet {
private BikeDao bikedao = new BikeDaoImpl();
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
req.setCharacterEncoding("utf-8");
String types = req.getParameter("type");
int locationId = Integer.parseInt(req.getParameter("location"));
int status = Integer.parseInt(req.getParameter("status"));
int amount = Integer.parseInt(req.getParameter("amount"));
int i = -1;
Bike bike = new Bike(types, locationId, locationId, status, amount, "");
if(req.getParameter("id") == null) {
i = bikedao.doInsert(bike);
} else {
Bike bike2 = bikedao.queryById(Integer.parseInt(req.getParameter("id")));
bike.setId(Integer.parseInt(req.getParameter("id")));
bike.setQr(bike2.getQr());
bike.setDeleteStatus(bike2.getDeleteStatus());
i = bikedao.doUpdate(bike);
}
// req.setAttribute("i",i);
// //转发的时候不用写getcontextPath
// req.getRequestDispatcher("/admin/updateAndAddResult.jsp").forward(req,resp);
resp.setContentType("application/json; charset=utf-8");
Map<String,Object> map = new HashMap<>();
map.put("result",i == 1);
PrintWriter writer = resp.getWriter();
writer.println(JSON.toJSONString(map));
writer.close();
}
}
因为不再是通过submit的方式提交数据，所以我们需要使用return false来阻止表单的默认提交
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8" %>
<!DOCTYPE html>
<html>
<head>
<%
request.setCharacterEncoding("utf-8");
%>
<c:if test="${param.id == null}">
<title>添加单车</title>
</c:if>
<c:if test="${param.id != null}">
<title>修改单车</title>
</c:if>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
.form-control {
width: 200px !important;
}
</style>
<script type="text/javascript">
$(function () {
$(":submit").click(function () {
var data = {
type:$("input[name='type']").val(),
location:$("input[name='location']").val(),
price:$("input[name='price']").val(),
status:$("input[name='status']").val(),
amount:$("input[name='amount']").val()
};
if(($("input[name='id']"))[0]) {
//直接data.id，如果此时data中有id，则是修改，如果没有，则是向data中添加id这个属性
data.id=$("input[name='id']").val();
}
$.ajax({
url:'${pageContext.request.contextPath}/result',
type:"post",
data:data,
success:function (res) {
if(res.result){
alert("成功");
location = "${pageContext.request.contextPath}/zhangjia"
} else {
alert("失败");
}
}
});
return false;
});
});
</script>
</head>
<body>
<c:if test="${param.id == null}">
<h1>添加单车</h1>
</c:if>
<c:if test="${param.id != null}">
<h1>修改单车</h1>
</c:if>
<form role="form" action="${pageContext.request.contextPath}/result" method="post" class="form">
<c:if test="${!(empty param.id)}">
<div class="form-group">
<input type="hidden" class="form-control" id="id" value="${requestScope.bike.id}" name="id" placeholder="请输入名称">
</div>
</c:if>
<div class="form-group">
<label for="type">单车类型：</label>
<input type="text" class="form-control" id="type" value="${requestScope.bike.type}" name="type"
placeholder="请输入名称">
</div>
<div class="form-group">
<label for="location"> 单车位置：</label>
<input type="text" class="form-control" id="location" value="${requestScope.bike.locationId}" name="location"
placeholder="请输入名称">
</div>
<div class="form-group">
<label for="status"> 单车状态：</label>
<input type="text" class="form-control" id="status" value="${requestScope.bike.status}" name="status"
placeholder="请输入名称">
</div>
<div class="form-group">
<label for="amount">单车次数：</label>
<input type="text" class="form-control" id="amount" value="${requestScope.bike.amount}" name="amount"
placeholder="请输入名称">
</div>
<input class="btn btn-primary" type="submit"/>
</form>
</body>
</html>
例四. 如果form中有多个参数，可以将data使用serialize序列化后放入data：
$(":submit").click(function () {
var data = $("form").serialize();
$.ajax({
url: '${pageContext.request.contextPath}/login',
type: 'post',
data:data,
success: function (res) {
....
}
});
return false;
});
请登录之后再进行评论