关于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一道基本的练习题的更多相关文章

  1. ASP.NET 5 - $.ajax post JSON.stringify(para) is null

    JavaScript 代码: var para = {}; para.id = $("#ad-text-id").val(); para.title = $("#ad-t ...

  2. qt qml ajax 获取 json 天气数据示例

    依赖ajax.js类库,以下代码很简单的实现了获取天气json数据并展示的任务 [TestAjax.qml] import QtQuick 2.0 import "ajax.js" ...

  3. ajax将json写到table中去

    查询条件: <table style="width: 100%;border-collapse: collapse;" > <tr> <th styl ...

  4. ajax获取json对象

    ajax获取json对象 ajax获取json数据,都是一个原理,设置response 的Content-Type:application/json,这样浏览器自动会解析为json对象 $result ...

  5. Ajax与json在前后端中的细节解惑

    ajax请求JSON Thinkphp中对是否为Ajax的判断,在TP3.2开发手册中有这么一段:“需要注意的是,如果使用的是ThinkAjax或者自己写的Ajax类库的话,需要在表单里面添加一个隐藏 ...

  6. Ajax与Json的一些总结

    Ajax与Json AJAX=异步javaScript 和XML AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新. 这意味着可以在不 ...

  7. ajax返回JSON时的处理方式

    JSON中对象通过“{}”来标识,一个“{}”代表一个对象,如{“AreaId”:”123”},对象的值是键值对的形式(key:value). json_encode() 该函数主要用来将数组和对象, ...

  8. JQuery处理json与ajax返回JSON实例

    一.JSON的一些基础知识. JSON中对象通过“{}”来标识,一个“{}”代表一个对象,如{“AreaId”:”123”},对象的值是键值对的形式(key:value). “[]”,标识数组,数组内 ...

  9. Jquery 模板插件 jquery.tmpl.js 的使用方法(1):基本语法，绑定,each循环，ajax获取json数据

    jquery.tmpl.js 是一个模板js  ,主要有2个方法 (1):$.template()方法,将一段script或者是Html编译为模板,例如 $.template('myTemplate' ...

随机推荐

  1. hdu-1394(线段树求最小逆序数)

    http://acm.hdu.edu.cn/showproblem.php?pid=1394 题意: 给定一个n,然后又n个数字,首先,这些数字的大小是从0开始到n-1,比如样例n=10,则这十个数就 ...

  2. Tomcat的8080、8005、8009端口

    8080是http 1.1 connector,也就是接收处理http请求的端口,如果你只用一个tomcat处理所有请求,可以只使用这个connector. 8005是 tomcat接受关闭指令的端口 ...

  3. <前端>简单实现开心网注册

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. mac os Catalina beta Jetbrains idea闪退解决方案

    第一时间升级最新版本的Catalina 10.15 Beta 版(19A501i) 后, 发现不管在idea 输入什么,都会直接crash. 不论是卸载重装还是,clean,结果都是一样的. 在网上查 ...

  5. mac brew 安装 php 环境

    548  brew search php 549  brew tap homebrew/dupes 550  brew tap josegonzalez/homebrew-php 551  brew ...

  6. Android开发 EditText按回车按键后出现 focus search returned a view that wasn't able to take focus! 错误

    问题描述 将EditText这个View成为了ListView或者RecyclerView的item时,在按输入法的回车/下一步/next时会出现的 focus search returned a v ...

  7. Rainbow的信号

    Rainbow的信号 有一串长度为n的数列,现在从中等概率选出l,r,如果l大于r,则交换,有三个询问 l~r间的数与和的数学期望 l~r间的数或和的数学期望 l~r间的数异或和的数学期望 对于100 ...

  8. [转]Entity Framework教程(第二版)

    源起 很多年前刚毕业那阵写过一篇关于Entity Framework的文章,没发首页却得到100+的推荐.可能是当时Entity Framework刚刚发布介绍EF的文章比较少.一晃这么多年过去了,E ...

  9. python所有的标准异常类

    异常名称 描述 BaseException 所有异常的基类 SystemExit 解释器请求退出 KeyboardInterrupt 用户中断执行(通常是输入^C) Exception 常规错误的基类 ...

  10. centOS7.2防火墙常用配置（转）

    centOS7.2防火墙常用配置   firewall-cmd --state #查看默认防火墙状态(关闭后显示not running,开启后显示running) systemctl stop fir ...