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 ...

随机推荐

spring源码学习2
spring总览从入口看起我们用spring时会用ClassPathXmlApplicationContext来加载spring配置文件,就从它开始吧. 1.双击shhift,输入ClassPat ...
P4126 [AHOI2009]最小割
题目地址:P4126 [AHOI2009]最小割最小割的可行边与必须边首先求最大流,那么最小割的可行边与必须边都必须是满流. 可行边:在残量网络中不存在 \(x\) 到 \(y\) 的路径(强连通 ...
20165231 2017-2018-2 《Java程序设计》第9周学习总结
教材学习内容总结第十三章 URL类 URL类是java.net包中的一个重要的类,URL的实例封装着一个统一资源定位符(Uniform Resource Locator),使用URL创建对象的应用程 ...
PyQt4 / PyQt5
Python事多,做个笔记,区分. PyQt5 Reference Guide http://pyqt.sourceforge.net/Docs/PyQt5/index.html Qt4 signal ...
使用chttpfile的一个错误
先贴一部分代码 CString strHttpName="http://localhost/TestReg/RegForm.aspx"; // 需要提交数据的页面 CString ...
题解-PKUWC2018 Minimax
Problem loj2537 Solution pkuwc2018最水的一题,要死要活调了一个多小时(1h59min) 我写这题不是因为它有多好,而是为了保持pkuwc2018的队形,与这题类似的有 ...
TCP、消息分包和协议设计
TCP是一种流式协议 TCP是一种面向连接的.可靠的.基于字节流的传输层通信协议. 流式协议的特点是什么?就像流水连续不断那样,消息之间没有边界.例如send了3条消息(这里的“消息”是指应用层的一个 ...
POJ 3723
最大生成树 #include<iostream> #include<cstdio> #include<cstring> #include<set> #i ...
Go语言从入门到放弃(一) 变量/常量/函数
HelloWorld 我们先看看一个最简单的HelloWorld代码 package main import "fmt" func main() { fmt.Println(&qu ...
PHP中使用Redis长连接笔记
pconnect函数声明其中time_out表示客户端闲置多少秒后,就断开连接.函数连接成功返回true,失败返回false: pconnect(host, port, time_out, pers ...

Ajax增删改查-----------删 改

Ajax增删改查-----------删 改的更多相关文章

随机推荐

热门专题

Ajax增删改查-----------删改

Ajax增删改查-----------删改的更多相关文章