关于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. hexo next中遇到的bug，引发出的关于jquery中click()函数和on("click",function())的区别

    个人博客:https://mmmmmm.me 源码:https://github.com/dataiyangu/dataiyangu.github.io 背景: 本人在维护博客的时候加入了aplaye ...

  2. MyBatis - 常用标签与动态Sql

    MyBatis常用标签 ● 定义sql语句:select.insert.delete.update ● 配置JAVA对象属性与查询结构及中列明对应的关系:resultMap ● 控制动态sql拼接:i ...

  3. 1.1python基础_基础

    1_编码 默认情况下,Python 3 源码文件以 UTF-8 编码,所有字符串都是 unicode 字符串. 当然你也可以为源码文件指定不同的编码: # -*- coding: UTF-8 -*- ...

  4. C++的注释

    ### 1.2 注释 **作用**:在代码中加一些说明和解释,方便自己或其他程序员程序员阅读代码 **两种格式** 1. **单行注释**:// 描述信息  - 通常放在一行代码的上方,或者一条语句的 ...

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

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

  6. iOS逆向系列-theos

    概述 theos是GitHub开源的一个项目,通过nic.pl创建tweak项目.通过编写我们注入代码,然后执行编译.打包.安装等操作将代码注入iPhone安装的制定程序. theos环境配置 安装签 ...

  7. Luogu P2484 [SDOI2011]打地鼠(模拟+前缀和)

    P2484 [SDOI2011]打地鼠 题意 题目描述 打地鼠是这样的一个游戏:地面上有一些地鼠洞,地鼠们会不时从洞里探出头来很短时间后又缩回洞中.玩家的目标是在地鼠伸出头时,用锤子砸其头部,砸到的地 ...

  8. nginx压力测试webbench

    下载压力测试工具webbench wget http://home.tiscali.cz/~cz210552/distfiles/webbench-1.5.tar.gz 安装依赖包 yum -y in ...

  9. 线段树动态开点——cf1045G

    只计算半径小的能看到的半径大的,因为如果计算半径大的看到半径小的,虽然q在其范围内,但是小的不一定能看到大的 那么我们将机器人按照半径降序排序 遍历一次,去查询在[x-r,x+r]范围的,智商在[q- ...

  10. LUOGU P4777 【模板】扩展中国剩余定理（EXCRT）

    传送门 解题思路 扩展 $crt​$,就是中国剩余定理在模数不互质的情况下,首先对于方程 ​     $\begin{cases} x\equiv a_1\mod m_1\\x\equiv a_2\m ...