1.ajax异步请求数据后填入模态框
请求数据的按钮（HTML）
<a class="queryA" href="javascript:void(0)" onclick="query(${register.id})"> <span class="glyphicon glyphicon-search"></span></a>
ajax异步请求数据后给id为queryInfo的模态框赋值并弹出模态框（JS）
//查询单个
function query(id) {
$.ajax({
url : "/small/productServlet",
async : true,
type : "POST",
data : {
"type" : "query",
"id" : id
},
// 成功后开启模态框
success : showQuery,
error : function() {
alert("请求失败");
},
dataType : "json"
});
} // 查询成功后向模态框插入数据并开启模态框。data是返回的JSON对象
function showQuery(data) {
$("#name1").val(data.name);
$("#xinghao1").val(data.xinghao);
$("#address1").val(data.address);
$("#department1").val(data.department);
$("#unit1").val(data.unit);
$("#number1").val(data.number);
$("#price1").val(data.price);
$("#totalprice1").val(data.totalprice);
$("#come1").val(data.come);
$("#buytime1").val(data.buytime);
$("#useperson1").val(data.useperson);
$("#handleperson1").val(data.handleperson);
$("#admini1").val(data.admini);
// 显示模态框
$('#queryInfo').modal('show');
}
后台处理ajax请求并返回JSON串（Java）
protected void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
RegisterService service = new RegisterServiceImpl();
request.setCharacterEncoding("UTF-8");
response.setCharacterEncoding("UTF-8");
response.setContentType("text/html; charset=UTF-8");
String type = request.getParameter("type");
if (type != null && "add".equals(type)) {
try {
this.add(request, response, service);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
} if (type != null && "query".equals(type)) {
try {
this.query(request, response, service);
} catch (Exception e) {
// TODO Auto-generated catch block
e.printStackTrace();
}
}
} protected void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
} public void query(HttpServletRequest request, HttpServletResponse response, RegisterService service)
throws Exception {
Integer id = Integer.parseInt(request.getParameter("id"));
Register register = service.getRegisterById(id);
Gson gson = new Gson();
String json = gson.toJson(register);
System.out.println(json);
response.getWriter().write(json);
}
JSON串:
{"id":16,"name":"测试名称16","address":"测试地址2","department":"测试部门2","unit":"测试单位2","number":1,"price":1.5,"totalprice":1.5,"come":"来源2","buytime":"八月 23, 2017","useperson":"使用人2","handleperson":"经办人2","admini":"管理员部门2"}
2.ajax异步请求删除数据后刷新页面
请求删除的按钮(HTML)
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAABEAAAAUCAIAAADkwkEeAAAAdklEQVQ4jWP4STpgoI6eMyv3Gldth6LOU2eI0bN25t4JFyHMS0VVh9fi07PrMMJ4TDTzEj57CAIUPSg+wWHJz5+X0PUEr7y/dubeCRfvT+jcO+HipaKqw2svngpG1nPxFOl6yLEH0z+DVg/OaMWnhzgwqufnTwAJe3u0Sac3SQAAAABJRU5ErkJggg==" alt="" />
<a class="" href="javascript:void(0)" onclick="deleteInfo(${register.id})"> <span class="glyphicon glyphicon-trash"></a>
Ajax请求删除数据后刷新页面(JS)
// ajax异步删除后刷新页面
function deleteInfo(id) {
alert("dele");
$.ajax({
url : "/small/productServlet",
async : true,
type : "POST",
data : {
"type" : "delete",
"id" : id
},
success : function(data) {
alert(data);
// 删除成功后刷新页面
window.location.reload();
},
error : function() {
alert("请求失败");
},
dataType : "text"
});
}
后台处理删除的ajax请求(Java)
// 根据id删除
public void delete(HttpServletRequest request, HttpServletResponse response, RegisterService service)
throws Exception {
Integer id = Integer.valueOf(request.getParameter("id"));
boolean result = service.deleteRegisterById(id);
if (result) {
response.getWriter().write("success delete!");
}
}