AJAX对数据库增删改查实例
前端代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>AJAX小实例</title>
<link href="artDialog/css/dialog.css" rel="stylesheet">
<style>
a:hover{
color:green;
cursor:pointer;
}
</style>
</head>
<body>
<input id="add" type="button" value="添加">
<table id="table" border="1">
<thead>
<tr><td>编号</td><td>姓名</td><td>性别</td><td>操作</td></tr>
</thead>
<tbody id="tbody">
</tbody>
</table>
<!-- 添加 -->
<fieldset id="showdialog" style="display:none"><legend>添加信息</legend>
<form id="form1">
<label for="uname">用户名：</label><input id="uname" type="text" name="uname"><br/>
<label for="usex">性别：</label><select id="usex" name="usex"><option>男</option>
<option>女</option></select><br/>
<input id="addOneData" type="button" value="添加"><input id="updateOneData" type="button" value="修改"><input type="button" value="重置">
</form>
</fieldset>
</body>
<script type="text/javascript" src="js/jquery-1.11.3.js"></script>
<!-- artDialog的js文件 -->
<script type="text/javascript" src="artDialog/dist/dialog.js"></script>
<script type="text/javascript">
/* app:一个app对象 */
var app={
/* 数据源 */
bindData:function(){
$.post("TestUserControl?action=getAllUserInfo",{},function(data){
$("#tbody tr").remove();
$.each(data,function(index,obj){
var tr=$("<tr/>");
$("<td/>").html(obj.uid).appendTo(tr);
$("<td/>").html(obj.uname).appendTo(tr);
$("<td/>").html(obj.usex).appendTo(tr);
var aEdit=$("<a class='aEdit'>编辑<a/>").data("uid",obj.uid).data("user",obj);
var aDel=$("<a class='aDel'>删除</a>").data("uid",obj.uid).data("user",obj);
$("<td/>").append(aEdit).append(aDel).appendTo(tr);
$("#tbody").append(tr);
})
})
},
deleteData:function(){
var uid=$(this).data("uid");
if(!confirm("是否确定删除?")){
return false;
}
$.post("TestUserControl?action=deleteOne",{uid:uid},function(data){
alert(data.msg);
app.bindData();
})
},
/* 添加 */
dia:null,
showDialog:function(){
app.dia=dialog({
title:"详细信息",
modal:true,
backdropOpacity:0.4,
width:'500px',
height:'300px',
content:$("#showdialog")
});
app.dia.show();
},
addData:function(){
$.post("TestUserControl?action=addOneData",$("#form1").serialize(),function(data){
alert(data.msg);
app.bindData();
app.dia.close().remove();
})
},
/* 修改 */
user:null,
getUserInfo:function(){
app.user=$(this).data("user");
$("#uname").val(app.user.uname);
$("#usex").val(app.user.usex);
app.dia=dialog({
title:"详细信息",
modal:true,
backdropOpacity:0.4,
width:'500px',
height:'300px',
content:$("#showdialog")
});
app.dia.show();
},
updateOneData:function(){
app.user.uname=$("#uname").val();
app.user.usex=$("#usex").val();
$.post("TestUserControl?action=updateOneData",app.user,function(data){
alert(data.msg);
app.bindData();
app.dia.close().remove();
})
},
init:function(){
app.bindData();
$("#tbody").on("click",".aDel",app.deleteData);
$("#add").click(app.showDialog);
$("#addOneData").click(app.addData);
$("#tbody").on("click",".aEdit",app.getUserInfo);
$("#updateOneData").click(app.updateOneData);
}
}
app.init();
</script>
</html>
效果：
后台代码：
package controller;
import java.io.IOException;
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 dao.TestUserDao;
import vo.TestUser;
/**
* Servlet implementation class TestUserControl
*/
@WebServlet("/TestUserControl")
public class TestUserControl extends HttpServlet {
private static final long serialVersionUID = 1L;
private TestUserDao tudao=new TestUserDao();
/**
* Default constructor.
*/
public TestUserControl() {
// TODO Auto-generated constructor stub
}
/**
* @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
*/
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//设置相应编码以及响应json对象
request.setCharacterEncoding("utf-8");
response.setContentType("application/json;charset=utf-8");
response.setCharacterEncoding("utf-8");
String action=request.getParameter("action");
switch(action){
case"getAllUserInfo":
List<TestUser>list=tudao.getAllTestUser();
//向前台响应
response.getWriter().print(JsonUtils.Utils.toJson(list));
;break;
case"getone":;break;
case"deleteOne":
int uid=Integer.parseInt(request.getParameter("uid"));
tudao.delete(uid);
response.getWriter().print("{\"msg\":\"删除成功!\"}");
;break;
case"addOneData":
String uname=request.getParameter("uname");
String usex=request.getParameter("usex");
if(tudao.insert(new TestUser(uname,usex))>0){
response.getWriter().print("{\"msg\":\"添加成功!\"}");
}else{
response.getWriter().print("{\"msg\":\"添加失败!\"}");
};break;
case"updateOneData":
int uuid=Integer.parseInt(request.getParameter("uid"));
String uuname=request.getParameter("uname");
String uusex=request.getParameter("usex");
if(tudao.update(new TestUser(uuid,uuname,uusex))>0){
response.getWriter().print("{\"msg\":\"修改成功!\"}");
}else{
response.getWriter().print("{\"msg\":\"修改失败!\"}");
}
break;
default:;break;
}
}
/**
* @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);
}
}
心得：该例子采用了artDialog 框架以及采用了张果老师传授的封装数据的理念，在前端只对外只暴露一个方法，有效的保护了数据的安全性以及严谨性。
artDialog下载：http://aui.github.io/artDialog/
AJAX对数据库增删改查实例的更多相关文章
- Maven多模块项目+MVC框架+AJAX技术+layui分页对数据库增删改查实例
昨天刚入门Maven多模块项目,所以简单写了一个小测试,就是对数据库单表的增删改查,例子比较综合,写得哪里不妥还望大神赐教,感谢! 首先看一下项目结构: 可以看到,一个项目MavenEmployee里 ...
- python操作mysql数据库增删改查的dbutils实例
python操作mysql数据库增删改查的dbutils实例 # 数据库配置文件 # cat gconf.py #encoding=utf-8 import json # json里面的字典不能用单引 ...
- python链接oracle数据库以及数据库的增删改查实例
初次使用python链接oracle,所以想记录下我遇到的问题,便于向我这样初次尝试的朋友能够快速的配置好环境进入开发环节. 1.首先,python链接oracle数据库需要配置好环境. 我的相关环境 ...
- java：JSP（JSPWeb.xml的配置，动态和静态导入JSP文件，重定项和请求转发，使用JSP实现数据库的增删改查实例）
1.JSP的配置: <%@ page language="java" import="java.util.*" pageEncoding="UT ...
- (转)SQLite数据库增删改查操作
原文:http://www.cnblogs.com/linjiqin/archive/2011/05/26/2059182.html SQLite数据库增删改查操作 一.使用嵌入式关系型SQLite数 ...
- Android SQLite 数据库 增删改查操作
Android SQLite 数据库 增删改查操作 转载▼ 一.使用嵌入式关系型SQLite数据库存储数据 在Android平台上,集成了一个嵌入式关系型数据库--SQLite,SQLite3支持NU ...
- Java连接MySQL数据库增删改查通用方法
版权声明:本文为博主原创文章,未经博主允许不得转载. Java连接MySQL数据库增删改查通用方法 运行环境:eclipse+MySQL 以前我们Java连接MySQL数据库都是一个数据库写一个类,类 ...
- yii2.0增删改查实例讲解
yii2.0增删改查实例讲解一.创建数据库文件. 创建表 CREATE TABLE `resource` ( `id` int(10) NOT NULL AUTO_INCREMENT, `textur ...
- Yii2.0高级框架数据库增删改查的一些操作（转）
yii2.0框架是PHP开发的一个比较高效率的框架,集合了作者的大量心血,下面通过用户为例给大家详解yii2.0高级框架数据库增删改查的一些操作 --------------------------- ...
随机推荐
- div隐藏滚动条，仍可滚动
<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8" ...
- c++第一周测验
本次得分为:14.00/14.00, 本次测试的提交时间为:2020-03-08, 如果你认为本次测试成绩不理想,你可以选择再做一次. 1 单选(1分) 下面程序片段哪个没错? 得分/总分 A. in ...
- MATLAB神经网络（3） 遗传算法优化BP神经网络——非线性函数拟合
3.1 案例背景 遗传算法(Genetic Algorithms)是一种模拟自然界遗传机制和生物进化论而形成的一种并行随机搜索最优化方法. 其基本要素包括:染色体编码方法.适应度函数.遗传操作和运行参 ...
- 探究Spring Boot中的接收参数问题与客户端发送请求传递数据
结合此篇参考Spring框架学习笔记(9)--API接口设计相关知识及具体编码实现 在使用Spring Boot进行接收参数的时候,发现了许多问题,之前一直都很忙,最近才稍微有空研究一下此问题. 网上 ...
- Android平台接入OneNET
1. OneNET简介 中国移动物联网开放平台是由中国移动打造的PaaS物联网开放平台. 平台能够帮助开发者轻松实现设备接入与设备连接,提供综合性的物联网解决方案,实现物联网设备的数据获取,数据存储, ...
- win10安装ubuntu子系统和图形界面
子系统可以很方便的调用windows的文件(在/mnt里就有各个盘),也可以在windows里用VScode编辑linux的文件.还是很方便的.也可以切出去用QQ微信. 安装子系统参考教程:https ...
- Python可以用中文命名
Python中文命名 命名规则数字.字母.下划线 环境 python 3.7.3 x64 win10 现象 Python在命名的地方都是可以用中文命名 如: 变量 中文下划线无法被识别 打出中文下划线 ...
- 五分钟了解Consul
Hi,大家好,我叫consul,翻译成中文叫做“领事”,其实我更喜欢叫自己为中介,因为我觉得自己做的事情和房产中介非常像.比如说想要卖房的房东到我这边登记,我将房屋信息登录到我的表格中(服务注册),有 ...
- WebRTC的RTCPeerConnection()原理探析
从getUserMedia()到RTCPeerConnection(),自认为难度陡增.我想一方面是之前在Linux平台上学习ROS调用摄像头时,对底层的外设接口调用.摄像头参数都有学习理解:另一方面 ...
- WEB应用之httpd基础入门（二）
前文我们聊了下httpd的一些基础设置,聊了下httpd的配置文件格式,长连接.mpm的配置以及访问控制基于文件路径和URL管控,回顾请参考https://www.cnblogs.com/qiuhom ...