Ajax接收并展示后台传来的list集合内的数据信息

最新推荐文章于 2023-08-22 06:43:28 发布

qq_1061383457

最新推荐文章于 2023-08-22 06:43:28 发布

阅读量3.5k

点赞数 6

分类专栏：前端 SSM框架文章标签： ajax list linq

本文链接：https://blog.csdn.net/adingyb/article/details/122917191

版权

前端同时被 2 个专栏收录

15 篇文章 0 订阅

订阅专栏

SSM框架

9 篇文章 0 订阅

订阅专栏

后台是springMVC，将查询的集合replies放进map，返回到前台。

@RequestMapping("manage/queryTime")
    @ResponseBody
    public Map<String, Object> queryTime(Integer page, Integer limit, String name) {
        System.out.println("name:"+name);
        Paikeinfo paike = new Paikeinfo();
        paike.setCourseteacher(name);
        List<Paikeinfo> list = paikeDao.queryAll(paike);
        Map<String, Object> map = new HashMap<String, Object>();
        map.put("replies", list);
        return map;
    }

前台ajax接收代码如下：

form.on('select(test)', function(data){
                var test=data.value;
                $("#msg").css("display","none");
                $.ajax({
                    url:ctx+"/manage/queryTime",
                    type:"POST",
                    async:false,
                    data: {name:test},
                    dataType: "json",
                    success:function(data){
                        var arr=data.replies;//如果前方代码取值不称就用这个：jQuery.parseJSON(data).replies；
                        for(var i=0;i<arr.length;i++){
                            var starttime=arr[i].starttime;
                            var endtime=arr[i].endtime;
                            var coursename=arr[i].coursename;
                            var addr=arr[i].addr;
                            $('#msg').prepend("<dl style='background-color:red;'>" +
                                "<dt>"+coursename+"</dt>" +
                                "<dd>开始时间："+starttime+"</dd>" +
                                "<dd>结束时间："+endtime+"</dd>" +
                                "<dd>教室："+addr+"</dd>" +
                                "</dl>");
                            $("#msg").css("display","block");
                        }
                    },error:function(data){
                        alert(系统错误);
                    }

                });
            });

html如下：

 <div class="layui-form-item">
            <label class="layui-form-label">授课教师</label>
            <div class="layui-input-block">

                <select name="courseteacher" id="courseteacher" class="layui-select" lay-verify="required" lay-filter="test" lay-search>
                    <c:if test="${paikeinfo.courseteacher!=null}">
                        <option value="${paikeinfo.courseteacher}">${paikeinfo.courseteacher}</option>
                    </c:if>
                    <option value=""  >请选择授课教师</option>
                    <c:forEach items="${userinfoList}" var="user">
                        <option value="${user.name}">${user.name}</option>
                    </c:forEach>
                </select>
                <div id="msg"></div>
            </div>
        </div>

前端页面完整代码如下，功能为排课时当管理员选择教师后会通过ajax查询该教师已经排过的课，并展示排过的课的信息到页面，防止排课时时间和教室冲突：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page contentType="text/html;charset=UTF-8" language="java"  pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!-- 项目绝对路径-->
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<html>
<head>
    <title>排课信息修改页面</title>
    <!-- 引入css样式和js文件-->
    <meta charset="UTF-8">

    <link rel="stylesheet" href="${ctx}/static/layui/css/layui.css" media="all"/>
    <script type="text/javascript" src="${ctx}/static/layui/layui.js"></script>
    <script>
        var ctx = "${ctx}"; //js全局项目路径
    </script>
</head>
<body>
<div class="layui-container">
    <form class="layui-form" action="" method="post" style="width: 500px;margin: 50px auto;" id="saveCourseinfoForm" onsubmit="return false;">
        <input type="hidden" name="id" value="${paikeinfo.id}"/>
        <div class="layui-form-item">
            <label class="layui-form-label">课程名称</label>
            <div class="layui-input-block">

                <select name="coursename" id="coursename" class="layui-select" lay-verify="required" >
                    <c:if test="${paikeinfo.coursename!=null}">
                    <option value="${paikeinfo.coursename}">${paikeinfo.coursename}</option>
                    </c:if>
                    <option value=""  >请选择课程名称</option>
                    <c:forEach items="${list}" var="course">
                        <option value="${course.name}">${course.name}</option>
                    </c:forEach>
                </select>
            </div>
        </div>



        <div class="layui-form-item">
            <label class="layui-form-label">授课教师</label>
            <div class="layui-input-block">

                <select name="courseteacher" id="courseteacher" class="layui-select" lay-verify="required" lay-filter="test" lay-search>
                    <c:if test="${paikeinfo.courseteacher!=null}">
                        <option value="${paikeinfo.courseteacher}">${paikeinfo.courseteacher}</option>
                    </c:if>
                    <option value=""  >请选择授课教师</option>
                    <c:forEach items="${userinfoList}" var="user">
                        <option value="${user.name}">${user.name}</option>
                    </c:forEach>
                </select>
                <div id="msg"></div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学年</label>
            <div class="layui-input-block">
                <input type="text" name="nianfen" id="nianfen" value="${paikeinfo.nianfen}" lay-verify autocomplete="off"
                       placeholder="请输入年份"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">学期</label>
            <div class="layui-input-block">


                <select name="chunqiu" id="chunqiu" class="layui-select" lay-verify="required" >
                    <c:if test="${paikeinfo.chunqiu!=null}">
                        <option value="${paikeinfo.chunqiu}">${paikeinfo.chunqiu}</option>
                    </c:if>
                    <option value=""  >请选择学期</option>
                    <option value="春季">春季</option>
                    <option value="秋季">秋季</option>

                </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">星期</label>
            <div class="layui-input-block">
              <%--  <input type="text" name="week" id="week" value="${paikeinfo.week}" lay-verify autocomplete="off"
                       placeholder="请输入星期"
                       class="layui-input">--%>
                  <select name="week" id="week" class="layui-select" lay-verify="required" >
                      <c:if test="${paikeinfo.week!=null}">
                          <option value="${paikeinfo.week}">${paikeinfo.week}</option>
                      </c:if>
                      <option value=""  >请选择星期</option>
                      <option value="星期一">星期一</option>
                      <option value="星期二">星期二</option>
                      <option value="星期三">星期三</option>
                      <option value="星期四">星期四</option>
                      <option value="星期五">星期五</option>

                  </select>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上课时间</label>
            <div class="layui-input-block">
                <input type="datetime-local" name="starttime" id="starttime" value="${paikeinfo.starttime}" lay-verify autocomplete="off"
                       placeholder="请输入上课时间"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">下课时间</label>
            <div class="layui-input-block">
                <input type="datetime-local" name="endtime" id="endtime" value="${paikeinfo.endtime}" lay-verify autocomplete="off"
                       placeholder="请输入下课时间"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">上课地点</label>
            <div class="layui-input-block">
                <input type="text" name="addr" id="addr" value="${paikeinfo.addr}" lay-verify autocomplete="off"
                       placeholder="请输入上课地点"
                       class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">备注</label>
            <div class="layui-input-block">
                <input type="text" name="remark" id="remark" value="${paikeinfo.remark}" lay-verify autocomplete="off"
                       placeholder="请输入备注"
                       class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-form-item">
                <div class="layui-input-block">
                    <button class="layui-btn" lay-submit="" lay-filter="saveCourseinfoForm">立即保存</button>
                    <button type="reset" class="layui-btn layui-btn-primary">重置</button>
                    <button onclick="backPage()" class="layui-btn layui-btn-warm">返回</button>
                </div>
            </div>
        </div>
    </form>

   <script type="text/javascript" src="${ctx}/static/js/common.js"></script>
    <script type="text/javascript">
        var $;
        var $form;
        var form;
        layui.config({
            base: "js/"
        }).use(['form', 'layer', 'jquery', 'laypage', 'table', 'laytpl', 'laydate', 'upload'], function () {
            var form = layui.form, table = layui.table;
            layer = parent.layer === undefined ? layui.layer : parent.layer,
                laypage = layui.laypage, laydate = layui.laydate, upload = layui.upload,
                $ = layui.jquery;
            nowTime = new Date().valueOf();

            form.on('select(test)', function(data){
                var test=data.value;
                $("#msg").css("display","none");
                $.ajax({
                    url:ctx+"/manage/queryTime",
                    type:"POST",
                    async:false,
                    data: {name:test},
                    dataType: "json",
                    success:function(data){
                        var arr=data.replies;//如果前方代码取值不称就用这个：jQuery.parseJSON(data).replies；
                        for(var i=0;i<arr.length;i++){
                            var starttime=arr[i].starttime;
                            var endtime=arr[i].endtime;
                            var coursename=arr[i].coursename;
                            var addr=arr[i].addr;
                            $('#msg').prepend("<dl style='background-color:red;'>" +
                                "<dt>"+coursename+"</dt>" +
                                "<dd>开始时间："+starttime+"</dd>" +
                                "<dd>结束时间："+endtime+"</dd>" +
                                "<dd>教室："+addr+"</dd>" +
                                "</dl>");
                            $("#msg").css("display","block");
                        }
                    },error:function(data){
                        alert(系统错误);
                    }

                });
            });



            /*$("#courseteacher").change(function(){
                alert(111)
                $("#msg").css("display","none");
                var options=$("#courseteacher option:selected");
                var name=options.val()
                alert(options.val());//获取value
                // alert(options.text());//获取文本
                    $.ajax({
                        url:ctx+"/manage/queryTime",
                        type:"POST",
                        async:false,
                        data: {name:name},
                        dataType: "json",
                        success:function(result){
                            $("#msg").css("color","red");
                            $("#msg").html(result.list).css("display","block");
                        },
                        error:function(e){
                            alert("请求出错！");
                        }
                    });

            });*/



            //表单提交
            form.on("submit(saveCourseinfoForm)", function (data) {
                //弹出loading
                var index = top.layer.msg('数据提交中，请稍候', {icon: 16, time: false, shade: 0.8});
                var msg;
                var subURL = ctx + "/manage/savePaikeinfo";//添加提交地址
                // alert(data.field.id);rtfx
                if (!isEmpty(data.field.id)) { //判断是添加还是修改
                    subURL = ctx + "/manage/updatePaikeinfo";//修改提交地址
                }
                $.ajax({
                    type: "post",
                    url: subURL,
                    data: data.field,
                    dataType: "json",
                    success: function (d) {
                        if (d.code == 0) {
                            msg = d.msg;
                            // 重置表单 saveUserinfoForm是表单的id
                            //$("#saveUserinfoForm")[0].reset();
                            //layui.form.render();
                            layer.msg(msg, {time: 3000, icon: 1}, function () {
                                var url = ctx + "/manage/paikeinfoList"; //返回列表页面
                                window.location.href = url;
                            });
                        } else {
                            msg = d.msg;
                            layer.alert(msg);
                        }
                    }
                });
                return false;
            })

        });
    </script>
</div>


</body>
</html>

效果如下：