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

2023-03-20 12:46:16

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

　　

上一篇：【移动开发】WIFI热点通信（一）


下一篇：11.C++-临时对象分析