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 ...
随机推荐
- nova 命令管理虚拟机
nova命令管理虚拟机: $ nova list #查看虚拟机$ nova stop [vm-name]或[vm-id] #关闭虚拟机$ nova start [vm-name]或[vm-id] #启 ...
- 20165221 JAVA第二周学习心得及体会
基本数据类型与数组理论学习 根据第二章的网课链接,归纳出以下板块: 知识框架 标识符与关键字 1.标识符 其本质是文件名字 标识符的第一个字符不能为数字,标识符不能为关键字(如inter) 标识符不能 ...
- [转] 指定进程运行的CPU
转自:https://www.cnblogs.com/liuhao/archive/2012/06/21/2558069.html coolshell最新的文章<性能调优攻略>在“多核CP ...
- tar命令加密压缩
场景 Centos6下使用加密压缩,可以从A机器到B机器解压. 可用在kali上解压就不行. 命令 解包 tar zxvf FileName.tar 打包 tar czvf FileName.tar ...
- MySQL报错总结
错误一: MySQL从cmd使用命令“mysql -u root -p”启动报错,显示“不能连接到端口xxx”(实际端口为3306),这里的问题实际是由于我没有设置mysql开机自启动,所以解决方案就 ...
- python实战===教你用微信每天给女朋友说晚安【转】
转自:https://www.cnblogs.com/botoo/p/8622379.html#4081184 但凡一件事,稍微有些重复.我就考虑怎么样用程序来实现它. 这里给各位程序员朋友分享如何每 ...
- Python3学习笔记32-xlwt模块
xlwt模块是用来写入excel的第三方模块,需要下载安装后才能使用. 设置字体样式 import xlwt #初始化一个excel excel = xlwt.Workbook(encoding='u ...
- hibernate框架学习之数据模型-POJO
Hibernate数据模型用于封装数据,开发时候需要遵从如下规范:1)提供公共无参的构造方法(可使用自动生成的)如果使用投影技术,一定要显式声明公共无参的构造方法2)提供一个标识属性,作为对象的主键, ...
- webstorm加载项目卡死在scanning files to index
今天用webstorm导入项目时,需要加载node-modules文件夹,导致webstorm非常卡,页面提示scanning files to index... 网上搜到办法,记录下: 说明: 在n ...
- T-SQL 数值函数
MS SQL Server数字函数可以应用于数值数据,并返回数值数据. 下面是带有示例的数值函数列表. ABS() 输出给定值的绝对值. 例 以下查询将输出-22的绝对值:22. Select ABS ...