JavaEE 简单html和Servlet通过Json交互

最新推荐文章于 2022-04-12 11:40:43 发布

原创

最新推荐文章于 2022-04-12 11:40:43 发布 · 786 阅读

2 ·

CC 4.0 BY-SA版权

下周正式开始边学边做一个简单的小项目----教师云管理平台

jar包和目录接上：https://blog.youkuaiyun.com/ignite_/article/details/90273515

前台页面:

index4.html(显示所有图片及简单描述)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatlble" content="IE=edge"/>
    <meta  name="viewport" content="width = device-width,initial-scale = 1,maximum-scale = 1,user-scalable = no"/>
    <title>教师云管理平台</title>
    <link rel="icon" href="img/favicon.ico" type="ico" />
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="css/bootstrap.css"/>
    <link rel="stylesheet" href="css/animate.css" />
    <link rel="stylesheet" href="css/jiaoshiyun.css"/>
    <!--    pc端屏幕大小     -->
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="js/jquery-3.3.1.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/jiaoshiyun.js"></script>
</head>
<script src="js/jquery-3.3.1.js"></script>
<script>
    window.onload=function () {
        var jsonLength=0;
        $.getJSON(
            // 地址
            "img",
            // 回调函数
            function (result) {
                //eval转换为可识别json对象
                var json = eval(result);
                // alert(json.img[0].path);

                // 获得json长度
                for(var Json in json.img){
                   jsonLength++;
                }

                // 循环输出图片及超链接url
                for (var i=0;i<jsonLength;i++){
                    $("#video").append( "<div class='col-sm-3 col-xs-6'>"+
                                        "<a href='img.html?id="+json.img[i].id+" ' "+
                                        "class='thumbnail'>"+
                                        "<img src='img/" + json.img[i].path + "'>"+
                                        "<p>数据结构与算法"+