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>

　　

【推广】 免费学中医，健康全家人
原文地址：https://www.cnblogs.com/max-hou/p/9540599.html