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' ...
随机推荐
- Android Support Library详细介绍
网上对Android Support Library中各个依赖包介绍的中文资料太少了,结合官方文档和有限的参考资料做了一次总结,有描述得不对的地方还请指正. 一.主工程.依赖包.jar包.androi ...
- 如何使用Python-GnuPG和Python3 实现数据的解密和加密
介绍 GnuPG包提供用于生成和存储加密密钥的完整解决方案.它还允许您加密和签名数据和通信. 在本教程中,您将创建一系列使用Python 3和python-gnupg模块的脚本.这些脚本允许您对多个文 ...
- spring boot发简单文本邮件
首先要去邮箱打开POP3/SMTP权限: 然后会提供个授权码,用来发送邮件.忘记了,可以点生成授权码再次生成. 1.引入spring boot自带的mail依赖,这里版本用的:<spring-b ...
- java.nio.file.FileSystemException: D:\kafka_2.12-2.1.0\kafka_2.12-2.1.0\logs\__consumer_offsets-30\00000000000000000000.timeindex.cleaned: 另一个程序正在使用此文件，进程无法访问。
在启动kafka时候报错: java.nio.file.FileSystemException: D:\kafka_2.12-2.1.0\kafka_2.12-2.1.0\logs\__consume ...
- JS规则 自加一，自减一 ( ++和- -) 【mynum = mynum + 1;//等同于mynum++;】
自加一,自减一 ( ++和- -) 算术操作符除了(+.-.*./)外,还有两个非常常用的操作符,自加一"++":自减一"--".首先来看一个例子: mynum ...
- 如何快速合并多个TXT文本内容
工作中有时候需要合并很多文本内容,例如一些推送清单之类,一个一个打开去复制粘贴的话,少量还行,如果txt文本数据量大(10+M以上)且文件数量多(成百上千),这种方式就显得很低效了.具体要求如下: ...
- Qt连接sql server数据库遇到的问题
在QT中使用addDataBase添加一个数据库连接,其中第一个参数应该填入使用数据库驱动的类型,如QMYSQL.QSQLLITE.QSQLPSSQL等. QSqlDatabase QSqlD ...
- Android 开发 Camera1_如何使用对焦功能
前言 Camera1的自动对焦还是有一些坑值得开一个篇幅来讲解,一般对焦Mode有以下几种: Camera.Parameters.FOCUS_MODE_CONTINUOUS_VIDEO 连续自动对焦视 ...
- python中遇到的问题：IndentationError: unexpected indent
在Python中写下列代码的时候,出现错误:IndentationError: unexpected indent 分析:IndentationError是缩进的错误,查看源代码发现names开始的这 ...
- 使用subprocessm模块管理进程
subprocess被用来替换一些老的模块和函数,如:os.system.os.spawn*.os.popen*.popen2.*.commands.*. subprocess的目的就是启动一个新的进 ...