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 ...
随机推荐
- Linux系统安全学习笔记（1）-- 文件系统类型
今天看了一个关于Linux系统安全的视频教程,这个教程有很多的知识点,我会分几篇博文将我的笔记分享出来. 首先是关于Linux文件系统类型的一些知识,Linux有四种常见的文件系统类型(网上大多数是3 ...
- SqlServer三种常用窗口函数
插入数据 ,),(,),(,),(,),(,),(,),(,) ⒈rank()over,跳跃排序,允许并列,并在发生并列时保留名次空缺. select rank() over(order by sco ...
- 2018 codejam kickstart H轮
被第一题傻逼题卡了很久……好的我也是个傻逼 倒在了最后一题 本来以为小数据过了就能过大数据 结果下载了大数据 发现怎么输出了好多个零 调代码过程中超时了 结束后重新提交了一下 果然是不通过的 A 题目 ...
- Redis主从哨兵和集群搭建
主从配置 哨兵配置 集群配置 1.主从: 国王和丞相,国王权力大(读写),丞相权利小(读) 2.哨兵: 国王和王子,国王死了(主服务挂掉),王子继位(从服务变主服务) 3.集群: 国王和国王,一个国王 ...
- Python3-lamba表达式、zip函数
lambda表达式 学习条件运算时,对于简单的 if else 语句,可以使用三元运算来表示,即: # 普通条件语句 == : name = 'wupeiqi' else: name = 'alex' ...
- FAT文件系统规范v1.03学习笔记---1.保留区之 Fat32 FSInfo扇区结构和备份启动扇区
1.前言 本文主要是对Microsoft Extensible Firmware Initiative FAT32 File System Specification中文翻译版的学习笔记. 每个FAT ...
- hibernate框架学习之数据查询（QBC）
lQBC(Query By Criteria)是一种Hibernate中使用面向对象的格式进行查询的计数 lQBC查询方式步骤 •获取Session对象 •初始化Criteria对象(使用Sessio ...
- eclipse 迁移项目 乱码
eclipse 迁移项目总是乱码问题,网上解决都无非是把workspace.项目.文件等改成utf-8,但总是不好使,因为原来有的文件类型还是要改成原来的编码格式,可以使用文本工具如notepad打开 ...
- 转-CSRF&OWASP CSRFGuard
一. 什么是CSRF?CSRF(Cross-Site Request Forgery)直译的话就是跨站点请求伪造也就是说在用户会话下对某个需要验证的网络应用发送GET/POST请求——而这些请求是未经 ...
- bootstrap4简单使用和入门03-响应式布局
响应式布局的原理 页面源码 <!DOCTYPE html> <html lang="en"> <head> <meta charset=& ...