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>

  

上一篇:LeetCode(32)-Binary Tree Level Order Traversal


下一篇:Linux (centos )下Nginx+PHP+MySQL配置——自己的lnmp配置