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

随机推荐

activemq学习笔记2
基本步骤: ConnectionFactory factory = new ActiveMQConnectionFactory("tcp://127.0.0.1:61616"); ...
[转] 理解NLP中的卷积&&Pooling
转自:http://blog.csdn.net/malefactor/article/details/51078135 CNN是目前自然语言处理中和RNN并驾齐驱的两种最常见的深度学习模型.图1展示了 ...
【转】Python 3的pathlib模块：驯服文件系统
[转]Python 3的pathlib模块:驯服文件系统 https://python.freelycode.com/contribution/detail/1248 Python部落(python. ...
最全的libcurl库资源整理
C++ 用libcurl库进行http 网络通讯编程百度登陆协议分析!!!用libcurl来模拟百度登陆 C++使用libcurl做HttpClient 使用libcurl库进行HTTP的下载 li ...
HTML5在线预览PDF
简介 PDF.js is a Portable Document Format (PDF) viewer that is built with HTML5. PDF.js is community-d ...
遇到一个json解码失败的问题
今日批量导入游戏, 从别人接口拉去的字符串json_decode总是失败, 但是把log里面记录的解码失败的字符串copy出来单独解析,却可以成功. 排除了是字符编码的问题后, 还是不行, 百思不得其 ...
Android应用内嵌unity3d游戏项目
在一个现有的Android项目中嵌入unity3d项目 1.将unity3d项目导出android工程 2.将第一步导出的Android工程中assets文件夹和libs文件夹下的所有内容复制到And ...
021_mac提效神奇Alfred
一.破解版下载 (1)https://pan.baidu.com/s/1Kb0HtybvdA1yzHeOWUFM_w 提取码:9tq2 Reference:https://www.jianshu.co ...
python连接kafka生产者，消费者脚本
# -*- coding: utf-8 -*- ''''' 使用kafka-Python 1.3.3模块 # pip install kafka==1.3.5 # pip install kafka- ...
通过python操作smtplib模块发送邮件
# gconf.py SMTP_SERVER_HOST='smtp.exmail.qq.com' SMTP_SERVER_PORT=25 SMTP_USER='jack@qq.com' # 邮箱客户端 ...

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

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

随机推荐

热门专题

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

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