Ajax增删改查-----------删 改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title> 删除 修改</title>
<style>
html body {
margin:0px;padding:0px}
li{
display: inline;
margin-right:25px;
padding-top:15px!important;
}
ul{
margin-top:0px;
padding-top:12px;
}
#One{
margin-left:10%;
}
a{
font-size:25px
}
#CD{
height:60px;
background-color:blue;
}
a{
text-decoration:none
}
a a:link{
color:white;
}
/*a:visited{
color:white;
}*/
a:active{
color:white;
}
a:hover {
color:red!important;
}
#nr{
margin-top:5%;
margin-left:10%;}
</style>
</head>
<body>
<div id="CD">
<ul>
<li id="One"><a href="findAllUser.html" ><font color="white">查询所有</font></a></li>
<li><a href="findOneUser.html" ><font color="white">查询单个</font></a></li>
<li><a href="save.html" ><font color="white">增加</font></a></li>
<li><a href="update.html" ><font color="white">删除</font></a></li>
<li><a href="update.html" ><font color="white">修改</font></a></li>
</ul>
</div>
<div id="nr">
<button>发送请求</button>
<br>
<br> <table id="mytab" border="1">
<tr id="htr">
<th>#</th>
<th>名</th>
<th>姓</th>
<th>邮箱</th>
<th>手机号</th>
<th>生日</th>
<th>操作</th>
<th>操作</th>
</tr>
</table>
</div>
<script src="jquery-3.3.1.min.js">
</script>
<script>
$(document).ready(function () {
$('button').on('click',function() {
var $tab1 = $("#mytab"); $.ajax({
url: "http://192.168.0.120:8080/customers",
type: 'GET',
dataType: 'json',
data: "",
success: function (data) { // 数据状态success
$("#htr").nextAll().remove();
console.log(data);
alert(data); for (var i = 0; i < data.length; i++) {
$tab1.append("<tr><td>" + data[i].id + "</td><td>" + data[i].firstName + "</td><td>" + data[i].lastName + "</td><td>"+ data[i].email + "</td><td>"
+ data[i].mobile+ "</td><td>"
+ data[i].dateOfBirth + "</td>+<td>" + "<a href='up3.html?id="+data[i].id+"'>修改</a>" + "</td>."
+"<td>" + "<a href='delete.html?id="+data[i].id+"'>删除</a>" + "</td>."); }
}
})
});
}) </script>
</body>
</html>
删除页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>删除</title><style>
html body {
margin:0px;padding:0px}
li{
display: inline;
margin-right:25px;
padding-top:15px!important;
}
ul{
margin-top:0px;
padding-top:12px;
}
#One{
margin-left:10%;
}
a{
font-size:25px
}
#CD{
height:60px;
background-color:blue;
}
a{
text-decoration:none
}
a a:link{
color:white;
}
a:visited{
color:white;
}
a:active{
color:white;
}
a:hover {
color:red;
}
#nr{
margin-top:5%;
margin-left:10%;}
</style>
</head>
<body>
<div id="CD">
<ul>
<li id="One"><a href="findAllUser.html" >查询所有</a></li>
<li><a href="findOneUser.html" >查询单个</a></li>
<li><a href="save.html" >增加</a></li>
<li><a href="update.html" >删除</a></li>
<li><a href="update.html" >修改</a></li>
</ul>
</div>
<div id="nr">
<br><br>
<br> <table id="mytab" border="1">
<tr id="htr">
<th>#</th>
<th>名</th>
<th>姓</th>
<th>邮箱</th>
<th>手机号</th>
<th>生日</th>
</tr>
</table>
</div>
<script language="JavaScript">
function myrefresh()
{
window.location.reload();
}
setTimeout('myrefresh()',1000); //指定1秒刷新一次
</script>
<script src="jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () {
// alert(id) var url = location.search;
var Request = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1) //去掉?号
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
Request[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
} var $id = Request["id"]; $obj = {
"id": $("#id").val(),
"firstName": $("#firstName").val(),
"lastName": $("#lastName").val(),
"email": $("#email").val(),
"mobile": $("#mobile").val(),
"dateOfBirth": $("#dateOfBirth").val()
}; var DD = JSON.stringify($obj);
$.ajax({
cache: false,
crossDomain: true,
url: "http://192.168.0.120:8080/customers/" + $id,
type: 'DELETE',
dataType: 'json',
data: JSON.stringify($obj),
contentType: "application/json",
success: function (data) { // 数据状态success
//alert(data);
console.log(data);
for (var i = 0; i < data.length; i++) {
$tab1.append("<tr><td>" + data[i].id + "</td><td>" + data[i].firstName + "</td><td>" + data[i].lastName + "</td><td>" + data[i].email + "</td><td>"
+ data[i].mobile + "</td><td>"
+ data[i].dateOfBirth + "</td></tr>");
} }
}); var $tab1 = $("#mytab");
$.ajax({
//alert(2);
url: "http://192.168.0.120:8080/customers" ,
type: 'GET',
dataType: 'json',
data: '',
// Jsonp: 'callback', success: function (data) { // 数据状态success
$("#htr").nextAll().remove();
// alert(3);
console.log(data);
for (var i = 0; i < data.length; i++) {
$tab1.append("<tr><td>" + data[i].id + "</td><td>" + data[i].firstName + "</td><td>" + data[i].lastName + "</td><td>" + data[i].email + "</td><td>"
+ data[i].mobile + "</td><td>"
+ data[i].dateOfBirth + "</td></tr>"); }
}
}) /*$('#X').on('click', function () {
alert(1); $obj = {
"id": $("#id").val(),
"firstName": $("#firstName").val(),
"lastName": $("#lastName").val(),
"email": $("#email").val(),
"mobile": $("#mobile").val(),
"dateOfBirth": $("#dateOfBirth").val()
}; var DD = JSON.stringify($obj);
$.ajax({
cache: false,
crossDomain: true,
url: "http://172.16.0.118:8080/customers/" + $id,
type: 'DELETE',
dataType: 'json',
data: JSON.stringify($obj),
contentType: "application/json",
success: function (data) { // 数据状态success
//alert(data);
console.log(data);
for (var i = 0; i < data.length; i++) {
$tab1.append("<tr><td>" + data[i].id + "</td><td>" + data[i].firstName + "</td><td>" + data[i].lastName + "</td><td>" + data[i].email + "</td><td>"
+ data[i].mobile + "</td><td>"
+ data[i].dateOfBirth + "</td></tr>");
} }
}); });*/
$('#C').on('click', function () {
var $tab1 = $("#mytab");
$.ajax({
//alert(2);
url: "http://172.16.0.118:8080/customers" ,
type: 'GET',
dataType: 'json',
data: '',
// Jsonp: 'callback', success: function (data) { // 数据状态success
$("#htr").nextAll().remove();
// alert(3);
console.log(data);
for (var i = 0; i < data.length; i++) {
$tab1.append("<tr><td>" + data[i].id + "</td><td>" + data[i].firstName + "</td><td>" + data[i].lastName + "</td><td>" + data[i].email + "</td><td>"
+ data[i].mobile + "</td><td>"
+ data[i].dateOfBirth + "</td></tr>"); }
}
})
}
)
}); </script> </body>
</html>
修改
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>修改</title><style>
html body {
margin:0px;padding:0px}
li{
display: inline;
margin-right:25px;
padding-top:15px!important;
}
ul{
margin-top:0px;
padding-top:12px;
}
#One{
margin-left:10%;
}
a{
font-size:25px
}
#CD{
height:60px;
background-color:blue;
}
a{
text-decoration:none
}
a a:link{
color:white;
}
a:visited{
color:white;
}
a:active{
color:white;
}
a:hover {
color:red;
}
#nr{
margin-top:5%;
margin-left:10%;}
</style>
</head>
<body>
<div id="CD">
<ul>
<li id="One"><a href="findAllUser.html" >查询所有</a></li>
<li><a href="findOneUser.html" >查询单个</a></li>
<li><a href="save.html" >增加</a></li>
<li><a href="update.html" >删除</a></li>
<li><a href="update.html" >修改</a></li>
</ul>
</div>
<div id="nr">
id<input type="text" name="id" id="id" style="margin-left: 34px"><br>
名字<input type="text" name="firstName" id="firstName" style="margin-left: 16px"><br>
姓<input type="text" name="lastName" id="lastName" style="margin-left: 32px"><br>
邮箱<input type="text" name="email" id="email" style="margin-left: 16px"><br>
手机号<input type="text" name="mobile" id="mobile"><br>
生日<input type="text" name="dateOfBirth" id="dateOfBirth" style="margin-left: 16px"><br><br>
<button id="X">修改</button>
<button id="C">查询</button>
<br><br>
<br> <table id="mytab" border="1">
<tr id="htr">
<th>#</th>
<th>名</th>
<th>姓</th>
<th>邮箱</th>
<th>手机号</th>
<th>生日</th>
</tr>
</table>
</div>
<script src="jquery-3.3.1.min.js"></script> <script type="text/javascript"> $(document).ready(function () {
// alert(id) var url = location.search;
var Request = new Object();
if (url.indexOf("?") != -1) {
var str = url.substr(1) //去掉?号
strs = str.split("&");
for (var i = 0; i < strs.length; i++) {
Request[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
}
}
//alert(Request["id"]); var $id = Request["id"]; // alert($id); $.ajax({
url: 'http://192.168.0.120:8080/customers/' + $id,
type: 'GET',
success: function (data) { // 数据状态success
alert(data.firstName);
// console.log(data.id);
$('#id').val(data.id);
$('#firstName').val(data.firstName);
$('#lastName').val(data.lastName);
$('#email').val(data.email);
$('#mobile').val(data.mobile);
$('#dateOfBirth').val(data.dateOfBirth); }
}); $('#X').on('click', function () {
alert(1); // var $id=$('#id').val();
// var $firstName=$('#firstName').val();
// var $lastName=$('#lastName').val();
// var $email=$('#email').val();
// var $mobile=$('#mobile').val();
// var $dateOfBirth=$('#dateOfBirth').val();
// var list={"id":$id,"firstName":$firstName,"lastName":$lastName,"email":$email,"mobile":$mobile,"dateOfBirth":$dateOfBirth};
$obj = {
"id": $("#id").val(),
"firstName": $("#firstName").val(),
"lastName": $("#lastName").val(),
"email": $("#email").val(),
"mobile": $("#mobile").val(),
"dateOfBirth": $("#dateOfBirth").val()
}; var DD = JSON.stringify($obj);
$.ajax({
cache: false,
crossDomain: true,
url: "http://192.168.0.120:8080/customers/" + $id,
type: 'PUT',
dataType: 'json',
data: DD,
contentType: "application/json",
success: function (data) { // 数据状态success
//alert(data);
console.log(data);
for (var i = 0; i < data.length; i++) {
$tab1.append("<tr><td>" + data[i].id + "</td><td>" + data[i].firstName + "</td><td>" + data[i].lastName + "</td><td>" + data[i].email + "</td><td>"
+ data[i].mobile + "</td><td>"
+ data[i].dateOfBirth + "</td></tr>");
} }
}); });
$('#C').on('click', function () {
var $tab1 = $("#mytab");
$.ajax({
//alert(2);
url: "http://192.168.0.120:8080/customers" ,
type: 'GET',
dataType: 'json',
data: '',
// Jsonp: 'callback', success: function (data) { // 数据状态success
$("#htr").nextAll().remove();
// alert(3);
console.log(data);
for (var i = 0; i < data.length; i++) {
$tab1.append("<tr><td>" + data[i].id + "</td><td>" + data[i].firstName + "</td><td>" + data[i].lastName + "</td><td>" + data[i].email + "</td><td>"
+ data[i].mobile + "</td><td>"
+ data[i].dateOfBirth + "</td></tr>"); }
}
})
}
)
}); </script> </body>
</html>
Ajax增删改查-----------删 改的更多相关文章
- 【基础篇】js对本地文件增删改查--删
前置条件: 1. 本地有安装node,点击传送门 项目目录: 1. msg.json内容 { "data": [ { "id": 1, "name&q ...
- SQL Server学习之路（五）：“增删改查”之“改”
0.目录 1.前言 2.通过SSMS修改数据 3.通过SQL语句修改数据 3.1 修改单列数据 3.2 修改多列数据 1.前言 增删改查都是对数据的操作,其中"改"对应的SQL语句 ...
- Sqlserver 增删改查----删
--我们就以院系,班级,学生来举例. create TABLE [dbo].YuanXi ( Id ,) NOT NULL,--学校id 自增量 YuanXiName varchar() null, ...
- 数往知来 AJAX Ajax增删改查<十九>
=================================================客户端================================================ ...
- Ajax增删改查-----------增
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- Ajax增删改查-----------查
查询所有 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF- ...
- Servlet做简单的ajax增删改查（分页）
jdbc.java package servlet; import java.sql.Connection; import java.sql.DriverManager; import java.sq ...
- THINKPHP增删改查--（改）
1.CURD 控制器?>namespace Home\Controller;use Think\Controller;class CurdController extends Controlle ...
- 【基础篇】js对本地文件增删改查--改
前置条件: 1. 本地有安装node,点击传送门 项目目录: 1. msg.json内容 { "data": [ { "id": 1, "name&q ...
随机推荐
- ROI Pool和ROI Align
这里说一下ROI Pool和ROI Align的区别: 一.ROI Pool层: 参考faster rcnn中的ROI Pool层,功能是将不同size的ROI区域映射到固定大小的feature ma ...
- valgrind--内存泄漏检测（转）
Valgrind 概述 体系结构 Valgrind是一套Linux下,开放源代码(GPL V2)的仿真调试工具的集合.Valgrind由内核(core)以及基于内核的其他调试工具组成.内核类似于一个框 ...
- ES6学习笔记四（类和对象）
{ // 构造函数和实例 class Parent{ constructor(name='mukewan'){ this.name=name; } } let v_parent=new Parent( ...
- 设计模式C++学习笔记之十三（Decorator装饰模式）
装饰模式,动态地给一个对象添加一些额外的职责.就增加功能来说,Decorator模式相比生成子类更为灵活. 13.1.解释 main(),老爸 ISchoolReport,成绩单接口 CFourt ...
- Windows登录类型及安全日志解析
Windows登录类型及安全日志解析 一.Windows登录类型 如果你留意Windows系统的安全日志,在那些事件描述中你将会发现里面的“登录类型”并非全部相同,难道除了在键盘上进行交互式登录(登录 ...
- Excel 2013 表格自用技巧
参考 Excel表格的基本操作(精选36个技巧) Excel2013基本用法 关于VLOOKUP函数 目录 快速复制单元格 单元格内强制换行 锁定标题行 查找重复值 万元显示 单元格中显示001 按月 ...
- MySQL--详细查询操作(单表记录查询、多表记录查询(连表查询)、子查询)
一.单表查询 1.完整的语法顺序(可以不写完整,其次顺序要对) (不分组,且当前表使用聚合函数: 当前表为一组,显示统计结果 ) select distinct [*,查询字段1,查询字段2,表达式, ...
- nginx负载均衡优化配置
针对nginx做负载均衡时其中一台服务器挂掉宕机时响应速度慢的问题解决 nginx会根据预先设置的权重转发请求,若给某一台服务器转发请求时,达到默认超时时间未响应,则再向另一台服务器转发请求. 默认超 ...
- Windows 下搭建 SVN服务器及使用
目录 一 .安装Visual SVN 二.配置SVN 三.安装TortoiseSVN 四.上传项目到远程仓库 五.从远程仓库下载项目 六.检出项目 七.版本回退 参考链接 http://blog.cs ...
- Linux命令之useradd和userdel（添加、删除用户）
一.[useradd]:添加用户命令 1.作用 useradd或adduser命令用来建立用户帐号和创建用户的起始目录,使用权限是超级用户. 2.格式 useradd [-d home] [-s sh ...