框架练习--layui, ajax controllor
llayui写的页面样式参考
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var = "ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ipms人员信息管理系统</title>
<link type="text/css" rel ="stylesheet" href="${ctx }/layui/css/layui.css"></link>
<link type="text/css" rel="stylesheet" href="${ctx }/css/index.css"></link>
<script type="text/javascript" src="${ctx }/js/jquery-3.2.1.min.js"></script>
<!-- 这个script必须放到这里,不能移到最上面,否则功能不管用 -->
<script type="text/javascript" src="${ctx }/layui/layui.all.js"></script>
<%-- <script src="${ctx }/layui/layui.js" charset="utf-8"></script> --%>
<script type="text/javascript" src="${ctx }/js/index.js"></script>
<script type="text/javascript" src="${ctx }/js/timeChange.js"></script>
</head>
<body>
<!-- 最上面导航栏 start -->
<div class="layui-row layui-bg-black " id="topbox" >
<div class="layui-col-md5 ">
<div class="grid-demo" style="padding:15px 0 0 20px;">
<h3>ipms人员信息管理系统</h3>
</div>
</div>
<div class="layui-col-md5 ">
<ul class="layui-nav ">
<li class="layui-nav-item"><a href="">最新活动</a></li>
<li class="layui-nav-item layui-this">
<a href="javascript:;">产品功能</a>
<dl class="layui-nav-child">
<dd><a href="">选项1</a></dd>
<dd><a href="">选项2</a></dd>
<dd><a href="">选项3</a></dd>
</dl>
</li>
<li class="layui-nav-item "><a href="">大数据</a></li>
<li class="layui-nav-item ">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd class="layui-this"><a href="">选中项</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item "><a href="">关于我们</a></li>
</ul>
</div>
<div class="layui-col-md2">
<div class="grid-demo" style="padding:10px 20px 0 0;">
<%-- <form action="coredom06.jsp" method="post">
<input type="text" name="uname" value="${param.uname}">
<input type="submit" value="登录">
</form>
<c:if test="${param.uname=='admin' }" var=”adminchock”>
<c:out value="管理员欢迎您！">
</c:out>
</c:if>
${adminchock}
<c:if test="${param.username != null }" >
<c:out value="${param.username}:欢迎你~">
</c:out>
</c:if>--%>
<a href="javascript:;" class="layui-btn layui-btn-warm layui-btn-radius"
style="float:left;">注册</a>
<a href="javascript:;" class="layui-btn layui-btn-radius" style="float:left;">登录</a>
</div>
</div>
</div>
<!--最上面导航栏 end -->
<!--中间部分 start -->
<div class="layui-row" style="margin-top:90px;">
<div class="layui-col-xs2 ">
<!--侧边导航 start 占1 -->
<div class="layui-side">
<div class="layui-side-scroll">
<!--用的是侧边导航 -->
<ul class="layui-nav layui-nav-tree layui-nav-side" lay-filter="demo" style="top:60px;position:fixed; z-index:100;">
<!-- <ul class="layui-nav layui-nav-tree "> </ul>-->
<li class="layui-nav-item layui-nav-itemed">
<a href="javascript:;">默认展开</a>
<dl class="layui-nav-child">
<dd><a href="javascript:;">选项1</a></dd>
<dd><a href="javascript:;">选项2</a></dd>
<dd><a href="">跳转</a></dd>
</dl>
</li>
<li class="layui-nav-item">
<a href="javascript:;">解决方案</a>
<dl class="layui-nav-child">
<dd><a href="">移动模块</a></dd>
<dd><a href="">后台模版</a></dd>
<dd><a href="">电商平台</a></dd>
</dl>
</li>
<li class="layui-nav-item"><a href="">产品</a></li>
<li class="layui-nav-item"><a href="">大数据</a></li>
</ul>
</div>
</div>
<!--侧边导航 end -->
</div>
<!-- 用列偏移留出来的白 占10 start-->
<div class="layui-col-xs9 layui-col-md-offset2" id="middlebox" >
<div class="grid-demo layui-carousel" id="test10">
<!--大图轮播 start -->
<div carousel-item="">
<div><img src="${ctx }/imgs/1.png"></div>
<div><img src="${ctx }/imgs/2.png"></div>
<div><img src="${ctx }/imgs/3.png"></div>
<div><img src="${ctx }/imgs/4.png"></div>
</div>
<!--大图轮播 end -->
</div>
<div class="layui-row layui-col-space30" id="dakuang" style="margin-top:30px;
position:relative;top:0px;">
<div class="layui-col-xs4">
<div class="grid-demo">
<div id="leftadv">
<div style="border-bottom:2px solid #faca52;padding-bottom:5px; font-size:14px;">
<i class="layui-icon" style="font-size:20px;"></i>
<b> 焦点要闻</b>
<i class="layui-icon" style="font-size:20px;float:right;"></i>
</div>
<div class="line-limit-length" style="margin:10px 0; font-size:16px; overflow:hidden;">
<!--遍历资料库database中的数据 -->
<ul id="cyclezl"></ul>
</div>
</div>
</div>
</div>
<div class="layui-col-xs4">
<div class="grid-demo">
<div id="rightadv">
<div style="border-bottom:2px solid #faca52; padding-bottom:5px; font-size:14px;">
<i class="layui-icon" style="font-size:20px;"></i>
<b> 项目中心</b>
<i class="layui-icon" style="font-size:20px;float:right;"></i>
</div>
<div class="line-limit-length" style="margin:10px 0; font-size:16px;" >
<!--遍历项目管理表projet中的数据 -->
<ul id="cyclexm"></ul>
</div>
</div>
</div>
</div>
<div class="layui-col-xs4">
<div class="grid-demo" >
<div id="leftadv" >
<div style="border-bottom:2px solid #faca52;padding-bottom:5px; font-size:14px;">
<i class="layui-icon" style="font-size:20px;"></i>
<b> 通知公告</b>
<i class="layui-icon" style="font-size:20px;float:right;"></i>
</div>
<div class="line-limit-length " style="margin:10px 0; font-size:16px;overflow:hidden;">
<!--遍历公告表notice中的数据 -->
<ul id="cycletz"></ul>
</div>
</div>
</div>
</div>
<div class="layui-col-xs12">
<div class="grid-demo" >
<div id="leftadv" >
<div style="border-bottom:2px solid #faca52;padding-bottom:5px; font-size:14px;">
<i class="layui-icon" style="font-size:20px;"></i>
<b>学员风采</b>
<i class="layui-icon" style="font-size:20px;float:right;"></i>
</div>
<div style="margin:10px 0; font-size:16px;">
<!--遍历资料库database中的数据 -->
<ul id="cyclexy"></ul>
</div>
</div>
</div>
</div>
</div>
<!--下一行 -->
<!-- <div class="layui-row " id="" style="margin-top:30px;position:relative;top:0px;">
</div> -->
</div>
<!-- 用列偏移留出来的白 占10 end-->
</div>
<!--中间部分 end -->
<!-- 最下面 -->
<div class="layui-row" style="position:absolate;bottom:0px;">
<div class="layui-col-md6 layui-bg-black" style="height:45px;padding-top:15px;" >
<div class="grid-demo "> </div>
</div>
<div class="layui-col-md2 layui-bg-black" style="height:45px;padding-top:15px;">
<div class="grid-demo ">@ ipms人员信息管理系统 欢迎您 ! </div>
</div>
<div class="layui-col-md4 layui-bg-black" style="height:45px;padding-top:15px;" >
<div class="grid-demo "> </div>
</div>
</div>
</body>
</html>
js页面ajax代码传递后台数据
$(function() {
/* 最上面导航栏 js start */
layui.use('element', function(){
var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
element.render();
//监听导航点击
element.on('nav(demo)', function(elem){
//console.log(elem)
layer.msg(elem.text());
});
});
/* 最上面导航栏 js end */
layui.use(['carousel','form'], function(){
var carousel = layui.carousel,form = layui.form;
//图片轮播
carousel.render({
elem:'#test10',
width:'950px',
height:'440px',
interval:3000
});
});
/**
* 数据返回主页所用ajax
*
*/
/**
* a方法调用(传到哪个controllor页面,返回回来的哪个json对象,给index.jsp页面的哪个id追加内容,jsp页面显示哪个参数);
*/
a("/IPMS/database/selectDatabase.do","Database","#cyclezl","filename"); //Database表参数传递
a("/IPMS/projectmsg/selectProject.do","Projet","#cyclexm","pname"); //Projet表参数传递
a("/IPMS/notice/selectNotice.do","Notice","#cycletz","title");//Notice表参数传递
function a(urll,project,tagid,name){
$.ajax({
dataType :"json",
type : "post",
url : urll,
success : function(data) {
//可以取到数据
// console.log(data);
//for(var i=0;i< project.length; i++) 当项查找的数据是从后台传过来的时候就得用中括号[]而不能用.了,否则就出不来数据
for(var i=0;i<10; i++)
{
//循环每一个标签,就开始向标签中塞东西了
//console.log(data[project]);
// console.log(data[project][i].createtime);
$(tagid).append("<li style='font-size:16px;'>" +
"<i class='layui-icon' style='font-size:5px;'></i> " +
"<b class='line-limit-length' style='width:200px;display:inline-block;'>"+ data[project][i][name] +"</b>"+
"<span style='font-size:14px;float:right;'>"+ddate(data[project][i].createtime)+"</span></li>");
}
},
error: function() {
alert("后台异常,请联系管理员!");
}
});
}
/*这个v方法调用是给页面最下面要显示的图片传递参数
* a("","Usertable","#cyclexy","username");*/
v();
function v () {
$.ajax({
dataType :"json",
type : "post",
url : "/IPMS/Usertable/selectUsertable.do",
success : function(data) {
for(var i=0;i<4; i++)
{
$("#cyclexy").append("<li class='line-limit-length' " +
"style='width:220px;height:190px;font-size:14px;text-align:center;padding:5px; display:inline-block;'>" +
"<img src='/IPMS/imgs/"+data.Usertable[i].headportriait+"'" +
"style='background-size:100% 100%; width:170px; height:170px;'><br>" +
data.Usertable[i].username+"</li>");
}
},
error: function() {
alert("后台异常,请联系管理员!");
}
});
}
});
后台四个页面controllor层之一,内容参考
package com.ipms.controller;
import java.util.List;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import com.alibaba.fastjson.JSONObject;
import com.ipms.model.Database;
import com.ipms.service.DatabaseService;
@Controller
@RequestMapping("/database")
public class DatabaseController {
@Autowired
private DatabaseService databaseService;
/**
* index页面查询数据所需方法
*
* @return Projet
*/
@ResponseBody
@RequestMapping("/selectDatabase")
public String selectDatabase() {
JSONObject jo = new JSONObject();
List<Database> da = databaseService.selectAll();
jo.put("Database", da);
return jo.toJSONString();
}
}
