javaEE(云笔记添加)

最新推荐文章于 2024-08-13 02:09:46 发布

luanqi_77

最新推荐文章于 2024-08-13 02:09:46 发布

阅读量161

点赞数

本文链接：https://blog.csdn.net/luanqi_77/article/details/106190500

版权

对笔记项目进行添加
效果图在这里插入图片描述
用ajax,调用addnotebook,添加项目，

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>添加笔记本</title>
<link rel="stylesheet" href="./layui/css/layui.css" media="all">
  <style>
    body{margin: 10px;}
    .demo-carousel{height: 200px; line-height: 200px; text-align: center;}
  </style>

</head>
<body>
<div>
	<label class="layui-form-label">笔记本名称</label>
	<div class="layui-input-block">
		<input type="text" name="name" id="name" required lay-verify="required"
			placeholder="请输入笔记本名称" autocomplete="off" class="layui-input" style="width:200px">
	</div>
	  <button id="addnotebook" type="button" class="layui-btn layui-btn-warm" style="margin-left:112px; margin-top:20px">确认</button>
</div>	
	
	<script src="./layui/layui.js"></script>
    <script>
  layui.use(['layer','jquery'], function(){
     var layer = layui.layer //弹层
     ,$ = layui.jquery//jquery
    
    $("#addnotebook").on("click",function(){
    	if($('#name').val()==''){
    		layer.msg("名称不能为空");
    		
    	}
    	var sendData={"name":$('#name').val()};
		$.ajax({
			type:"get",
			url:"notebook/addnotebook.do",
			data:sendData,
			datatype:"json",
			success:function(msg){
				
				//console.log(msg);
				if(msg.state==1){
					//说明添加成功
					layer.msg(msg.message);
					
				}else{
					//添加失败
					layer.msg(msg.message);
				}
				
			},
			error:function(msg){
				alert("通信失败");
			}
		});
	
    });
    
	 
  });
  
</script>  
	
</body>
</html>

注意添加点击事件，代码不要写错
在这里插入图片描述