Ajax和json一道基本的练习题
2017-11-07 08:17
337 查看
关于ajax是javaEE中最基本的操作：
下面是这道题：
基本功能： jsp+servlet+ajax实现用户信息查询，实现无刷新删除
用户信息包括
要求：1）通过ajax
加载数据，json实现
2）实现异步删除，删除时不刷新整个页面
3）通过sql语句建表
这里数据库可以用MySQL，建表这里就先省略了
a.前台js页面
<%@ 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>
<%
String path=request.getContextPath();
request.setAttribute("path", path);
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${path}/js/jquery.1.9.2.min.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url:"${path}/UserServlet",
data:{},
type:"get",
datatype:"json",
success:function(data){
//alert(data);
var list = eval('('+data+')')
//alert(list);
var rows="";
var table=$("#mytable");
for(var i in list){
//alert(list[i].id);
table.append("<tr><td>"+list[i].id+"</td>"+
"<td>"+list[i].stid+"</td>"+
"<td>"+list[i].name+"</td>"+
"<td>"+list[i].birthday+"</td>"+
"<td>"+list[i].sex+"</td>"+
"<td>"+"<input type='checkbox' name='chec' value="+list[i].id+" onclick='del()'/>删除"+"</td>"+
+"</tr>");
}
},error:function(){
alert("error");
}
});
});
function del(){
var cbox =document.getElementsByName("chec");
for(var i=0;i<cbox.length;i++){
if(cbox[i].checked){
var id =cbox[i].value;
$.ajax({
url:"${path}/deleteServlet",
data:{"id":id},
type:"get",
datatype:"json",
success:function(data){
//alert("删除成功！");
var list = eval('('+data+')')
//alert(list);
var rows="";
var table=$("#mytable");
table.empty();
table.append("<tr><td>编号</td><td>学号</td><td>姓名</td><td>出生日期</td><td>性别</td><td>操作</td></tr>");
for(var i in list){
//alert(list[i].id);
table.append("<tr><td>"+list[i].id+"</td>"+
"<td>"+list[i].stid+"</td>"+
"<td>"+list[i].name+"</td>"+
"<td>"+list[i].birthday+"</td>"+
"<td>"+list[i].sex+"</td>"+
"<td>"+"<input type='checkbox' name='chec' value="+list[i].id+" onclick='del()'/>删除"+"</td>"+
+"</tr>");
}
},error:function(){
alert("error");
}
});
}
}
}
</script>
</head>
<body>
<table border="1" id="mytable">
<tr>
<td>编号</td><td>学号</td><td>姓名</td><td>出生日期</td><td>性别</td><td>操作</td>
</tr>
</table>
</body>
</html>
b.两个后台页面：
1 UserServlet
package com.orange.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
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 javax.servlet.http.HttpSession;
import com.alibaba.fastjson.JSON;
import com.orange.entity.Student;
import com.orange.service.UserService;
import com.orange.service.impl.UserServiceImpl;
/**
* Servlet implementation class UserServlet
*/
@WebServlet("/UserServlet")
public class UserServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public UserServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
UserService service= new UserServiceImpl();
List<Student>list = service.selsectAll();
String json = JSON.toJSONString(list);
out.print(json);
out.flush();
out.close();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
2.deleteServlet
package com.orange.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
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 com.alibaba.fastjson.JSON;
import com.orange.entity.Student;
import com.orange.service.UserService;
import com.orange.service.impl.UserServiceImpl;
/**
* Servlet implementation class deleteServlet
*/
@WebServlet("/deleteServlet")
public class deleteServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public deleteServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType
ab99
("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String ida =request.getParameter("id");
int id = Integer.parseInt(ida);
UserService service= new UserServiceImpl();
int result=service.deleteByid(id);
List<Student>list = service.selsectAll();
String json = JSON.toJSONString(list);
out.print(json);
out.flush();
out.close();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
效果呢就是不加载整个页面可以进行动态的删除每一行的数据，注意empty（）的使用。
下面是这道题：
基本功能： jsp+servlet+ajax实现用户信息查询，实现无刷新删除
用户信息包括
| 学号 | 姓名 | 出生日期 | 性别 | 操作 |
| 20170101 | 张三 | 1996-10-03 | 男 | 删除 |
| ……. | …… | …… | ….. | 删除 |
加载数据，json实现
2）实现异步删除，删除时不刷新整个页面
3）通过sql语句建表
这里数据库可以用MySQL，建表这里就先省略了
a.前台js页面
<%@ 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>
<%
String path=request.getContextPath();
request.setAttribute("path", path);
%>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="${path}/js/jquery.1.9.2.min.js"></script>
<script type="text/javascript">
$(function(){
$.ajax({
url:"${path}/UserServlet",
data:{},
type:"get",
datatype:"json",
success:function(data){
//alert(data);
var list = eval('('+data+')')
//alert(list);
var rows="";
var table=$("#mytable");
for(var i in list){
//alert(list[i].id);
table.append("<tr><td>"+list[i].id+"</td>"+
"<td>"+list[i].stid+"</td>"+
"<td>"+list[i].name+"</td>"+
"<td>"+list[i].birthday+"</td>"+
"<td>"+list[i].sex+"</td>"+
"<td>"+"<input type='checkbox' name='chec' value="+list[i].id+" onclick='del()'/>删除"+"</td>"+
+"</tr>");
}
},error:function(){
alert("error");
}
});
});
function del(){
var cbox =document.getElementsByName("chec");
for(var i=0;i<cbox.length;i++){
if(cbox[i].checked){
var id =cbox[i].value;
$.ajax({
url:"${path}/deleteServlet",
data:{"id":id},
type:"get",
datatype:"json",
success:function(data){
//alert("删除成功！");
var list = eval('('+data+')')
//alert(list);
var rows="";
var table=$("#mytable");
table.empty();
table.append("<tr><td>编号</td><td>学号</td><td>姓名</td><td>出生日期</td><td>性别</td><td>操作</td></tr>");
for(var i in list){
//alert(list[i].id);
table.append("<tr><td>"+list[i].id+"</td>"+
"<td>"+list[i].stid+"</td>"+
"<td>"+list[i].name+"</td>"+
"<td>"+list[i].birthday+"</td>"+
"<td>"+list[i].sex+"</td>"+
"<td>"+"<input type='checkbox' name='chec' value="+list[i].id+" onclick='del()'/>删除"+"</td>"+
+"</tr>");
}
},error:function(){
alert("error");
}
});
}
}
}
</script>
</head>
<body>
<table border="1" id="mytable">
<tr>
<td>编号</td><td>学号</td><td>姓名</td><td>出生日期</td><td>性别</td><td>操作</td>
</tr>
</table>
</body>
</html>
b.两个后台页面：
1 UserServlet
package com.orange.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
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 javax.servlet.http.HttpSession;
import com.alibaba.fastjson.JSON;
import com.orange.entity.Student;
import com.orange.service.UserService;
import com.orange.service.impl.UserServiceImpl;
/**
* Servlet implementation class UserServlet
*/
@WebServlet("/UserServlet")
public class UserServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public UserServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
UserService service= new UserServiceImpl();
List<Student>list = service.selsectAll();
String json = JSON.toJSONString(list);
out.print(json);
out.flush();
out.close();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request, response);
}
}
2.deleteServlet
package com.orange.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
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 com.alibaba.fastjson.JSON;
import com.orange.entity.Student;
import com.orange.service.UserService;
import com.orange.service.impl.UserServiceImpl;
/**
* Servlet implementation class deleteServlet
*/
@WebServlet("/deleteServlet")
public class deleteServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
/**
* @see HttpServlet#HttpServlet()
*/
public deleteServlet() {
super();
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
request.setCharacterEncoding("utf-8");
response.setContentType
ab99
("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
String ida =request.getParameter("id");
int id = Integer.parseInt(ida);
UserService service= new UserServiceImpl();
int result=service.deleteByid(id);
List<Student>list = service.selsectAll();
String json = JSON.toJSONString(list);
out.print(json);
out.flush();
out.close();
}
/**
* @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
*/
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
// TODO Auto-generated method stub
doGet(request, response);
}
}
效果呢就是不加载整个页面可以进行动态的删除每一行的数据，注意empty（）的使用。
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- Ajax + Json 基本用法（自整理）
- struts2之使用JSON插件实现Ajax(JSON基本知识)
- 实现基本的Ajax和Json请求
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据
- 转-----实现基本的Ajax和Json请求
- Ajax基本案例详解之$.getjson的实现
- 4.6.2: Struts2的Ajax支持---json的基本知识
- 【Ajax】的一些基本方法,Json操作
- ajax+json+servlet实现表格的基本功能
- 基本于Yii 的ajax json请求 接收处理
- Ajax-JSON基本概念
- [学习小结]Ajax基本操作_JSON格式&&在jQuery中如何操作
- jQuery+JSON实现AJAX二级联动实例分析
- ajax和json数据
- ajax+jQuery+json
- jsp发送ajax请求，servlet返回json对象实例
- 避免IE在ajax请求时，返回json出现下载
- Ajax json交互和SpringMVC中@RequestBody
- PHP关于Ajax返回多个json数据的处理
- Ajax中XML和JSON格式的优劣比较