框架练习--layui, ajax controllor

Posted 子言小竹

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了框架练习--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>&nbsp" +
						"<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();
	}
}

  

 

以上是关于框架练习--layui, ajax controllor的主要内容,如果未能解决你的问题,请参考以下文章

求教layui中的ajax请求的讲解

layui框架跨域请求携带Cookie

layui框架跨域请求携带Cookie

layui点击switch 如何往后台传入0或1 用ajax怎么写

快速上手前端框架layui

基于layui的表格异步删除,ajax的简单运用