var str ="";
$.each(obj,function(){
str+= "
| "+this.userid +" | "+this.username+" | "+this.usersex+" | "+this.userbirth+" | 选择更新 删除 |
"
$("#tBody").prepend(str);
//用户添加或者用户更新
function addOrUpdateUser(flag){
//从页面中获取数据
var userid = $("#userid").val();
var username = $("#username").val();
var usersex = $("#usersex").val();
var userbirth = $("#userbirth").val();
var data = {
userid:userid,
username:username,
usersex:usersex,
userbirth:userbirth,
flag:flag
$.get("user.do",data,function(result){
alert(result);
location.reload();
//更新之前的数据选择
function preUpdateUser(userid){
var arr = new Array();
$("#"+userid).closest("tr").children().each(function(index,ele){
if(index <=3){
arr[index]= ele.innerText
$("#userid").val(arr[0]);
$("#username").val(arr[1]);
$("#usersex").val(arr[2]);
$("#userbirth").val(arr[3]);
$("#userid").attr("readonly",true);
//删除用户
function deleteUser(userid){
$("#"+userid).closest("tr").remove();
$.get("user.do",{userid:userid},function(result){
alert(result);
2
在
Servlet
处理删除用户请求
* 用户管理Servlet
@WebServlet("/user.do")
public class UserServlet extends HttpServlet {
//生成模拟数据初始化
@Override
public void init() throws ServletException {
User user = new User();
user.setUserid(1);
user.setUsername("Oldlu");
user.setUsersex("male");
user.setUserbirth(new Date());
User user2 = new User();
user2.setUserid(2);
user2.setUsername("Kevin");
user2.setUsersex("male");
user2.setUserbirth(new Date());
List<User> list = new ArrayList<>();
list.add(user);
list.add(user2);
ServletContext servletContext = this.getServletContext();
servletContext.setAttribute("list",list);
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
this.doPost(req, resp);
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
String flag = req.getParameter("flag");
if("getData".equals(flag)){
this.getData(req,resp);
}else if("addUser".equals(flag)){
this.addUser(req,resp);
}else if("updateUser".equals(flag)){
this.updateUser(req,resp);
}else{
this.deleteUser(req,resp);
//获取页面初始化数据
private void getData(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
List<User> list = (List<User>) this.getServletContext().getAttribute("list");
String s = JsonUtils.objectToJson(list);
resp.setContentType("application/json");
PrintWriter pw = resp.getWriter();
pw.print(s);
pw.flush();
pw.close();
//处理添加用户请求
private void addUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
User user = this.createUser(req);
ServletContext servletContext = this.getServletContext();
List<User> list = (List<User>) servletContext.getAttribute("list");
list.add(user);
resp.setContentType("text/plain;charset=utf-8");
PrintWriter pw = resp.getWriter();
pw.print("添加成功");
pw.flush();
pw.close();
//获取请求数据
private User createUser(HttpServletRequest req){
String userid = req.getParameter("userid");
String username = req.getParameter("username");
String usersex = req.getParameter("usersex");
String userbirth = req.getParameter("userbirth");
User user = new User();
user.setUserid(Integer.parseInt(userid));
user.setUsername(username);
user.setUsersex(usersex);
SimpleDateFormat sdf = new SimpleDateFormat("yyyy-MM-dd");
try {
Date parse = sdf.parse(userbirth);
user.setUserbirth(parse);
} catch (ParseException e) {
e.printStackTrace();
return user;
//处理更新用户请求
private void updateUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
User user = this.createUser(req);
ServletContext servletContext = this.getServletContext();
List<User> list = (List<User>) servletContext.getAttribute("list");
User u = null;
for(User temp : list){
if(temp.getUserid() == user.getUserid()){
u = temp;
break;
if(u != null){
list.remove(u);
list.add(user);
resp.setContentType("text/plain;charset=utf-8");
PrintWriter pw = resp.getWriter();
pw.print("更新成功");
pw.flush();
pw.close();
//处理删除用户请求
private void deleteUser(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException{
ServletContext servletContext = this.getServletContext();
List<User> list = (List<User>) servletContext.getAttribute("list");
String userid = req.getParameter("userid");
User user = null;
for(User temp:list){
if((temp.getUserid()+"").equals(userid)){
user = temp;
break;
if(user != null){
list.remove(user);
resp.setContentType("text/plain;charset=utf-8");
PrintWriter pw = resp.getWriter();
pw.print("删除成功");
pw.flush();
pw.close();
3 运行效果
目录1通过 Ajax 完成删除用户2在 Servlet 处理删除用户请求3 运行效果1通过 Ajax 完成删除用户 <script> $(function () { //获取页面初始化数据 getData(); //添加按钮绑定点击事件 $("#add").click(function(){ addOrUpdateUser(...
在登录
界面
显示
登陆者信息
在aside.jsp和header.jsp中添加以下代码:
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
在aside.jsp中输入以下代码：
<div class="pull-left info">
<security:a...
文章目录一、
Ajax
实战
案例1、搭建环境1.1、创建User类1.2、在页面中创建表格1.3、运行效果：2、加载
用户
数据
2.1、通过
Ajax
完成
页面
数据
初始化2.2、创建Servlet处理页面
数据
初始化
请求
3、添加
用户
操作3.1、通过
Ajax
完成
添加
用户
3.2、在Servlet中处理添加
用户
请求
4、更新
用户
操作4.1、通过
Ajax
完成
预更新
用户
选择4.2、通过
Ajax
完成
更新
用户
4.3、在Servlet中处理更新
用户
请求
5、
删除
用户
操作5.1、通过
Ajax
完成
删除
用户
5.2、在Servlet中处理
删除
请求
1.使用jquery全选按钮
功能
实现
<input type="checkbox" id="all" onclick="allClick()" style="margin-left: 50px"> 全选
1）获取全选复选框的状态 看是否已经选中
使用 id选择器选择其状态
2) 将此状态赋值给每个商品
列表
里的复选框 (就是点了全选复选框后 那几个复选框全部选中或不选)
这是我另外几个选择框 <input type="checkbox" name
HTML是一种专门对网页信息进行规范化展示的语言。把网页的信息格式化展现的语言
HTML(Hyper Text Markup Language)：超文本标记语言超文本：文本信息 、图片、声音、视频、超链接等
标记：标签的...
