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 ...
随机推荐
- telegram即时通信软件和outline ---- by 余弦 by倾旋
第一次遇到它 是在余弦的圈子里发现的tele推送,他当时关键部分说的极其少,就三个字,你懂的..看完以后,我想哭.我真的不懂.. 我是如何突破这个术语的 近期,随着信息源的增多.(收集了大量的可靠公众 ...
- C++ 模式设计
只写了MinGw/Linux API部分.所有相关的代码都是参考C++ API C++ 11智能指针参考http://blog.csdn.net/zy19940906/article/details/ ...
- Scala 入门介绍
1 基础 1.1 Scala 解释器 REPL - 交互式解释器环境 R(read).E(evaluate).P(print).L(loop) 输入值,交互式解释器会读取输入内容并对它求值,再返回结果 ...
- P1262 间谍网络 （tarjan缩点 水过去）
题目描述 由于外国间谍的大量渗入,国家安全正处于高度的危机之中.如果A间谍手中掌握着关于B间谍的犯罪证据,则称A可以揭发B.有些间谍收受贿赂,只要给他们一定数量的美元,他们就愿意交出手中掌握的全部情报 ...
- redis-3.2.11哨兵模式的配置
设置内核参数: echo never > /sys/kernel/mm/transparent_hugepage/enabled > /proc/sys/vm/overcommit_mem ...
- Docker 导出 & 导入
Docker 容器因为它的快速部署被深受喜爱.本文记录 Docker 容器的导出与导入,分别用到 Docker 的 export 和 import 命令. 1.查看正在运行的容器: [root@loc ...
- codecs and formats of digital media
A codec is a device or software that is used to compress or decompress a digital media file, such as ...
- PDF阅读器中如何改变线条颜色、线宽和线型等
1.打开PDF阅读器过后,点击菜单栏"注释"这一栏,找到绘图区域中的线条或铅笔: 2.分别用线条和铅笔随意画两条直线,然后选中直线,右键点击直线并打开"属性": ...
- 所有ORM操作 (第二版)
####################################################################### # PUBLIC METHODS THAT ALTER ...
- [JavaScript]iframe的contentWindow
HTMLIFrameElement.contentWindow返回的是HTMLIFrameElement类型元素的window对象 通过此对象可以修改iframe实体内的window行为 <if ...