Ajax和json一道基本的练习题
关于ajax是javaEE中最基本的操作：
下面是这道题：
基本功能： jsp+servlet+ajax实现用户信息查询，实现无刷新删除
用户信息包括
|
学号 |
姓名 |
出生日期 |
性别 |
操作 |
|
20170101 |
张三 |
1996-10-03 |
男 |
删除 |
|
……. |
…… |
…… |
….. |
删除 |
要求：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+" οnclick='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+" οnclick='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("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一道基本的练习题的更多相关文章
- ASP.NET 5 - $.ajax post JSON.stringify(para) is null
JavaScript 代码: var para = {}; para.id = $("#ad-text-id").val(); para.title = $("#ad-t ...
- qt qml ajax 获取 json 天气数据示例
依赖ajax.js类库,以下代码很简单的实现了获取天气json数据并展示的任务 [TestAjax.qml] import QtQuick 2.0 import "ajax.js" ...
- ajax将json写到table中去
查询条件: <table style="width: 100%;border-collapse: collapse;" > <tr> <th styl ...
- ajax获取json对象
ajax获取json对象 ajax获取json数据,都是一个原理,设置response 的Content-Type:application/json,这样浏览器自动会解析为json对象 $result ...
- Ajax与json在前后端中的细节解惑
ajax请求JSON Thinkphp中对是否为Ajax的判断,在TP3.2开发手册中有这么一段:“需要注意的是,如果使用的是ThinkAjax或者自己写的Ajax类库的话,需要在表单里面添加一个隐藏 ...
- Ajax与Json的一些总结
Ajax与Json AJAX=异步javaScript 和XML AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. 这意味着可以在不 ...
- ajax返回JSON时的处理方式
JSON中对象通过“{}”来标识,一个“{}”代表一个对象,如{“AreaId”:”123”},对象的值是键值对的形式(key:value). json_encode() 该函数主要用来将数组和对象, ...
- JQuery处理json与ajax返回JSON实例
一.JSON的一些基础知识. JSON中对象通过“{}”来标识,一个“{}”代表一个对象,如{“AreaId”:”123”},对象的值是键值对的形式(key:value). “[]”,标识数组,数组内 ...
- Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据
jquery.tmpl.js 是一个模板js ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...
随机推荐
- Docker系列(七)：Docker图形化管理和监控
Docker管理工具之官方三剑客 Docker Machine是什么鬼 从前 现在 你需要登录主机,按照主机及操作系统特有的安装以及配置步骤安装Docker,使其 能运行Docker容器. Docke ...
- re.groups取出来的空元祖？？
源自学习笔记: day23_1_re_ groups方法取出来的字符是空的元组??为啥? ''' # ------------------------------------------------- ...
- Ubuntu 上如何安装Docker
Docker 是一个开源项目,为开发者和系统管理员提供了一个开放的平台,在任何地方通过打包和运行应用程序作为一个轻量级的容器.Docker 在软件容器内自动部署应用程序.Docker 最开始由 Sol ...
- java生成验证码并可刷新
手心创建一个简单的页面来显示所创建的验证码 <body> <form action="loginName.mvc" method="post" ...
- Java程序员注意：Tomcat Get请求的巨坑！
Tomcat8.5,当Get请求中包含了未经编码的中文字符时,会报以下错误,请求未到应用程序在Tomcat层就被拦截了. Tomcat报错: java.lang.IllegalArgumentExce ...
- Hadoop2.7.1配置NameNode+ResourceManager高可用原理分析
关于NameNode高可靠需要配置的文件有core-site.xml和hdfs-site.xml 关于ResourceManager高可靠需要配置的文件有yarn-site.xml 逻辑结构: Nam ...
- Struts2基本总结
现在Struts2慢慢退出舞台了,但是很多项目还需要用Struts2进行开发和维护,这里就简单的重新快速的掌握这门技术 Struts2的相关配置文件 * default.properties ...
- display: -webkit-box; 做个小小试验
最近做个微信项目发现css3在微信内部浏览器中和其他浏览有些区别 做个小小笔记 .job { display: -webkit-box; display: flexbox; -webkit-box-p ...
- C++ 系列：typedef 和 #define 的区别
总结一下typedef和#define的区别 1.概念 #define 它在编译预处理时进行简单的替换,不作正确性检查.它是预处理指令. typedef 它在自己的作用域内给一个已经存在的类型一个别名 ...
- 运行 composer update,提示 Allowed memory size of bytes exhausted
composer update运行之后,提示 PHP Fatal error: Allowed memory size of 1610612736 bytes exhausted (tried to ...