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;
	}
	#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>保存</button><br><br>
</div>

<script src="jquery-3.3.1.min.js"></script>


<script type="text/javascript">

    $("button").on('click',function(){
        $obj={"id": $("#id").val(),"firstName": $("#firstName").val(),"lastName": $("#lastName").val(),"email": $("#email").val(),"mobile": $("#mobile").val(),"dateOfBirth": $("#dateOfBirth").val()};



//alert(JSON.stringify($obj));
        //alert($obj);


        $.ajax({
            cache: false,
            crossDomain: true,
            url: "http://192.168.0.120:8080/customers/",
            type: "POST",
            dataType:"json",
            contentType:"application/json",
            data:JSON.stringify($obj),
            success: function(data) {
                console.log(data);
				
				
				
            }
        });


    });




</script>

</body>
</html>

  

原文地址:https://www.cnblogs.com/max-hou/p/9540578.html