theme="ajax" : Template /template/ajax/head.ftl not found异常解决（error in the ajax）

25-03-10 14

对于theme="ajax":Template/template/ajax/head.ftlnotfound异常解决感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍errorintheajax，

对于theme="ajax" : Template /template/ajax/head.ftl not found异常解决感兴趣的读者，本文将会是一篇不错的选择，我们将详细介绍error in the ajax，并为您提供关于Ajax_简介：异步的 JS 和 XML_原生写 ajax 分析其原理_jquery_ajax_art-template、Ajax_艺术模板 art-template-web、AlternatingItemTemplate类似于 ItemTemplate 元素、An error happened during template parsing (template: "class path resource [templates/index.h...的有用信息。

本文目录一览：

theme="ajax" : Template /template/ajax/head.ftl not found异常解决（error in the ajax）
Ajax_简介：异步的 JS 和 XML_原生写 ajax 分析其原理_jquery_ajax_art-template
Ajax_艺术模板 art-template-web
AlternatingItemTemplate类似于 ItemTemplate 元素
An error happened during template parsing (template: "class path resource [templates/index.h...

theme=

theme="ajax" : Template /template/ajax/head.ftl not found异常解决（error in the ajax）

在核心包的目录：struts2-core-2.1.8.1\template下查看有哪些主题theme可用:

我的如图：

故而，用theme="ajax"肯定出错，因为根本就没有"ajax"这个主题文件存在。

其中，css_xhtml、simple、xhtml中的文件格式为.ftl，这是视图FreeMarker默认的模板文件名后缀。

xhtml是默认的主题。

-------------------------------------------------------------

archive文件中的子文件为：

其中，ajax、simple、xhtml中的文件格式为.vm，这是视图veLocity默认的模板文件名后缀。

总的来说，要注意自己用的是哪种视图jsp、freeMarker or veLocity，不同视图对应的格式不一样的。

Ajax_简介：异步的 JS 和 XML_原生写 ajax 分析其原理_jquery_ajax_art-template

AJAX

Asynchronous JavaScript And XML

通过 AJAX 可以在浏览器中向服务器发送异步请求

一种使用现有标准的 新方法，而非新语言

XML

可扩展标记语言

被设计用来传输和存储数据

被 JSON 替代，JSON 内容更少，解析更方便

和 HTML 类似，不同的是

HTML 都是预定义标签
XML 全部是自定义标签，用来表示一些数据
AJAX 工作原理

相当于在用户和服务器之间加了一个中间层（AJAX 引擎）

使得用户操作和服务器响应异步化

1. 原生 AJAX（不要通过 webstorm 启动页面，否则会发生跨域错误）

// 1. 创建 xhr 对象

const xhr = new XMLHttpRequest();

// 2. 设置事件监听

xhr.onreadystatechange = function(){ // 会监听 readyState 值的变化

if (xhr.readyState === 2) {

console.log(xhr.status);
console.log(xhr.getResponseHeader(''Content-Type''));

}
if (xhr.readyState === 3) {

console.log(xhr.responseText);

}

if(xhr.readyState === 4 && xhr.status === 200){ // 响应成功

console.log(xhr.responseText); // 响应数据

};

/****

前端面试题：

readyState

0 xhr 对象创建成功，但是 xhr.open() 还未调用

1 open() 已经调用了，但是还未调用 send() （意味着还没有发送请求，还可以设置请求头信息）

2 send() 已经调用了，接收到部分响应数据（响应首行、响应头，没接到响应体）

3 接收到了响应体数据（如果响应体较小，或者纯文体，在此阶段就全部接收完了）

4 接收完全部的响应体数据（数据较大，或者音视频资源）

****/

// 3. 设置请求信息设置请求方式、地址、参数

xhr.open("GET", "http://localhost:3000/ajax?username=jack&age=18");

// 还能设置请求头 xhr.setRequestHeader();

xhr.setRequestHeader(''content-type'', ''application/x-www-form-urlencoded'');

/****

必须要设置 请求头标准规范（有三种常见规范），否则不会解析请求参数

chrome 和 FireFox 第二次及以后默认走协商缓存，状态码 304，且还会向服务器发送请求

ie 第二次及以后 get 请求默认走强制缓存，状态码 200，且不会向服务器发送请求

需求：股票需要实时更新信息，此时就不能从缓存里找

解决 ie 的缓存问题：

让每一次的请求不一样

只要请求不一样，就不会走缓存

xhr.open("GET", "http://localhost:3000/ajax?username=jack&age=18&date="+Date.now());

****/

// 4. 发送请求

xhr.send();

// post 发送数据必须以 urlencode 格式，即查询字符串去掉？，即 key=value的方式，多个键值对之间以 & 连接

源码实例
node.js 服务器

index.js

const express = require(''express'');

const app = express();

app.use(express.static("public"));
app.use(express.urlencoded({extended: true}));

app.get("/", (request, response)=>{
    response.sendFile("./public/idnex.html");
});

// 原生 ajax 的 get 路由
app.get("/ajax", (request, response)=>{
    console.log(''----get 接收的 浏览器数据： '');
    console.log(request.query);    // {}
     console.log(request.body);    // get 请求体 始终为空
     console.log(''----'');
    
    response.send({name: ''服务器 get 响应'', line: 15});
});

// 原生 ajax 的 post 路由
app.post("/ajax", (request, response)=>{
    console.log(''----post 接收的 浏览器数据： '');
    console.log(request.query);    // {} 可以有 请求字符串
     console.log(request.body);    // post请求体 数据{ username: ''jack'', age: ''18'' }
     console.log(''----'');
    
    response.send({name: ''服务器 post 响应'', line: 21});
});

/**************** 端口号 3000, 启动服务器 ***************/
app.listen(3000, err=>console.log(err?err:''\n\n服务器已启动: http://localhost:3000\n\t\tHunting Happy!''));

浏览器前端代码

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>原生 ajax</title>
    </head>
    
    <body>
        
        <button id="get_btn">get</button>
        <button id="post_btn">post</button>


        <script type="text/javascript" src="js/index.js"></script>
    </body>
</html>

js/index.js

window.addEventListener(''DOMContentLoaded'', function () {
    const getBtn = document.getElementById("get_btn");
    const postBtn = document.getElementById("post_btn");
    
    getBtn.onclick = function () {
        // 1. 创建 xhr 对象
           const xhr = new XMLHttpRequest();
        
        // 2. 设置事件监听
           xhr.onreadystatechange = function () {
            if (xhr.readyState === 2) {
                console.log(xhr.status);    // 状态码
                 console.log(xhr.getResponseHeader(''Content-Type''));    // 请求头 信息
            };
            if (xhr.readyState === 3) {
                console.log(xhr.responseText);    // 服务器响应 数据
            };
            if(xhr.readyState === 4 && xhr.status === 200){
                console.log(xhr.responseText);    // 服务器响应 数据
            };
        };
        
        // 3. 设置请求方式、请求地址、请求参数
           xhr.open("GET", "http://localhost:3000/ajax?username=get&get=get");
    
        // 4. 设置请求头
           xhr.setRequestHeader(''get-x'', ''get'');    
        
        // 5. 发送请求
           xhr.send(''request=get&get=get'');    // get 请求体为空，所以这里传的参数，无效
    };
    
    postBtn.onclick = function () {
        // 1. 创建 xhr 对象
           const xhr = new XMLHttpRequest();
    
        // 2. 设置事件监听
           xhr.onreadystatechange = function () {
            if (xhr.readyState === 2) {
                console.log(xhr.status);
                console.log(xhr.getResponseHeader(''Content-Type''));
            }
            if (xhr.readyState === 3) {
                console.log(xhr.responseText);
            }
            if(xhr.readyState === 4 && xhr.status === 200){
                console.log(xhr.responseText);
            };
        };
    
        // 3. 设置请求方式、请求地址、请求参数
           xhr.open("POST", "http://localhost:3000/ajax?username=post&post=post");
    
        // 4. 设置请求头
           xhr.setRequestHeader(''content-type'', ''application/x-www-form-urlencoded'');    
        
        // 5. 发送请求
           xhr.send(''request=post&post=post'');
    };
}, false);

2. jQuery 中的 AJAX 请求

node.js 服务器

index.js

const express = require(''express'');

const app = express();

app.use(express.static("public"));
app.use(express.urlencoded({extended: true}));

app.get("/", (request, response)=>{
    response.sendFile("./public/idnex.html");
});

// 原生 ajax 的 get 路由
app.get("/jquery_ajax", (request, response)=>{
    console.log(''----get 接收的 浏览器数据： '');
    console.log(request.query);    // {}
      console.log(request.body);    // get 请求体 始终为空
      console.log(''----'');
    
    response.send({name: ''服务器 get 响应'', line: 15});
});

// 原生 ajax 的 post 路由
app.post("/jquery_ajax", (request, response)=>{
    console.log(''----post 接收的 浏览器数据： '');
    console.log(request.query);    // {} 可以有 请求字符串
      console.log(request.body);    // post请求体 数据{ username: ''jack'', age: ''18'' }
      console.log(''----'');
    
    response.send({name: ''服务器 post 响应'', line: 21});
});

/**************** 端口号 3000, 启动服务器 ***************/
app.listen(3000, err=>console.log(err?err:''\n\n服务器已启动: http://localhost:3000\n\t\tHunting Happy!''));

浏览器前端代码

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>jQuery 中的 ajax</title>
    </head>
    
    <body>
        
        <button id="get_btn">get</button>
        <button id="post_btn">post</button>
    
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <script type="text/javascript" src="js/jquery_ajax.js"></script>
    </body>
</html>

index.js

window.addEventListener(''DOMContentLoaded'', function () {
    const getBtn = document.getElementById("get_btn");
    const postBtn = document.getElementById("post_btn");
    
    getBtn.onclick = function () {
        $.ajax(''http://localhost:3000/jquery_ajax'', {
            method: ''GET'',    // 可以直接换成 POST，库解决好了请求头和兼容等一系列问题
            data: {
                getrequest:''Browser'',
                age:10
            },
            headers: {
                ''get-xxx'': ''xxxx''
            },
            success: function (server_info) {
                console.log(''请求成功的回调函数'');
                console.log(server_info);    // 自动将 json 字符串 转换成 JSON 对象
            },
            error: function (err) {
                console.log(''请求失败的回调函数'');
                console.log(err);
            }
        });
    };
    
    postBtn.onclick = function () {
        $.get(    // 可以直接换成 post，库解决好了请求头和兼容等一系列问题
            ''http://localhost:3000/jquery_ajax'',
            {postrequest:''Browser'', age:26},
            function (server_info) {
            console.log(server_info);
        });
    };
}, false);

三级联动选择（省-市-县）

服务器 index.js

const express = require(''express'');
const promiseConnect = require(''./db/connectDB.js'');
const citiesModel = require(''./models/userModel.js'');
const app = express();

(async ()=>{
    const ret = await promiseConnect;
    console.log(ret);
    
    app.use(express.static("public"));
    app.use(express.urlencoded({extended: true}));
    
    app.get("/", (request, response)=>{
        response.sendFile("./public/index.html");
    });

    // 省 的 get 路由
    app.get("/province", async (request, response)=>{
        try{
            const province = await citiesModel.find({"level": 1}, {"province": 1, "name": 1, "_id": 0});
            response.json({code: 200, data: province});
        }catch(err){
            console.log(err);
            response.json({code: 404, data: ''网络不稳定，请刷新重试''});
        };
    });
    
    // 市 的 get 路由
    app.get("/city", async (request, response)=>{
        try{
            const {province} = request.query;
            const city = await citiesModel.find({province, "level": 2}, {"city": 1, "name": 1, "_id": 0});
            response.json({code: 200, data: city});
        }catch(err){
            console.log(err);
            response.json({code: 404, data: ''网络不稳定，请刷新重试''});
        };
    });
    
    // 县 的 get 路由
    app.get("/county", async (request, response)=>{
        try{
            const {province, city} = request.query;
            const county = await citiesModel.find({province, city, "level": 3}, {"county": 1, "name": 1, "_id": 0});
            response.json({code: 200, data: county});
        }catch(err){
            console.log(err);
            response.json({code: 404, data: ''网络不稳定，请刷新重试''});
        };
    });
})().catch(err=>console.log(err));

/**************** 端口号 3000, 启动服务器 ***************/
app.listen(3000, err=>console.log(err?err:''\n\n服务器已启动: http://localhost:3000\n\t\tHunting Happy!''));

浏览器前端 index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>三级联动-省-市-县</title>
        <link rel="stylesheet" href="./css/index.css">
    </head>
    
    <body>
        <div id="outer_box">
            <select id="province">
                <option>请选择省份</option>
            </select>省
        
            <select id="city">
                <option>请选择市</option>
            </select>市
        
            <select id="county">
                <option>请选择区(县)</option>
            </select>区(县)
        </div>
        
        
        
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <script type="text/javascript" src="./js/jquery_ajax.js"></script>
    </body>
</html>

index.css

html, body {
    width: 100%;
    height: 100%;
    
    color: #000;
    background: #b9c2a4;
    background-size: cover; /* 指定背景图片大小 */
}

/*************************************************/
#outer_box {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#outer_box select {
    width: 152px;
    font-size: 16px;
    background-color: #aec57e;
    cursor: pointer;
}

选择省份

为了避免重排重绘，使用拼串，最后一次追加

选择市

监听表单的 change 事件

选择县
jquery_ajax.js

$(function () {
    const $province = $("#province");
    const $city = $("#city");
    const $county = $("#county");
    
    // 进入页面 首先渲染省份
    $.get("http://localhost:3000/province", function({code, data}){
        if(code === 200){
            let htmlStr = ''<option>请选择省份</option>'';
            data.forEach(each=>{
                /* <option value="44">广东省</option> */
                htmlStr += `<option value="${each.province}">${each.name}</option>`;
            });
            $province.html(htmlStr);
        }else{
            alert(data);    // 网络不稳定，请刷新重试
        };
    });
    
    // 省 改变出现 市
    $province.on("change", function(){
        const province = this.value;    /* <option value="11">北京</option> */
        $.get(''/city'', {province}, function({code, data}){
            if(code === 200){
                let htmlStr = ''<option>请选择市</option>'';
                data.forEach(each=>{
                    /* <option value="03">深圳市</option> */
                    htmlStr += `<option value="${each.city}">${each.name}</option>`;
                });
                $city.html(htmlStr);
            }else{
                alert(data);    // 网络不稳定，请刷新重试
            };
        });
    });
    
    // 市 改变出现 县
    $city.on("change", function(){
        const province = $province.val();    /* <option value="11">北京</option> */
        const city = $city.val();    /* <option value="undefined">鞍山市</option> */
        console.log({province, city});
        $.get(''/county'', {province, city}, function({code, data}){
            if(code === 200){
                let htmlStr = ''<option>请选择市</option>'';
                data.forEach(each=>{
                    /* <option value="06">宝安区</option> */
                    htmlStr += `<option value="${each.county}">${each.name}</option>`;
                });
                $county.html(htmlStr);
            }else{
                alert(data);    // 网络不稳定，请刷新重试
            };
        });
    });
});

在 jQuery 中 $.get("http://localhost:3000/city", function({code, data}){}); 对于同一域名，可以简写为

$.get("/city", function({code, data}){});

使用 art-template 模板引擎优化代码

1. 引入第三方 js库 art-template

2. 新建 <script> 标签，并设置 id 以供渲染

源码由上方代码改变

index.html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8"/>
        <title>jQuery 中的 ajax</title>
        <link rel="stylesheet" href="./css/index.css">
    </head>
    
    <body>
        <div id="outer_box">
            <select id="province">
                <option>请选择省份</option>
            </select>省
        
            <select id="city">
                <option>请选择市</option>
            </select>市
        
            <select id="county">
                <option>请选择区(县)</option>
            </select>区(县)
        </div>
    
        <script type="text/html" id="templateScript">
            <option>{{firstOption}}</option>
        {{each data}}
            <option value="{{$value[name]}}">{{$value.name}}</option>
        {{/each}}
        </script>
        
        
        
        
        <script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
        <script type="text/javascript" src="./js/template-web.js"></script>
        <script type="text/javascript" src="./js/jquery_ajax.js"></script> <!-- 注意编写顺序 -->
    </body>
</html>

jquery_ajax.js

$(function () {
    const $province = $("#province");
    const $city = $("#city");
    const $county = $("#county");
    
    // 进入页面 首先渲染省份
    $.get("http://localhost:3000/province", function({code, data}){
        if(code === 200){
            const htmlStr = template(
                ''templateScript'',
                {data, firstOption: ''请选择省份'', name: ''province''}
            );
            $province.html(htmlStr);
        }else{
            alert(data);    // 网络不稳定，请刷新重试
        };
    });
    
    // 省 改变出现 市
    $province.on("change", function(){
        const province = this.value;    /* <option value="11">北京</option> */
        $.get(''/city'', {province}, function({code, data}){
            if(code === 200){
                const htmlStr = template(
                    ''templateScript'',
                    {data, firstOption: ''请选择市'', name: ''city''}
                );
                $city.html(htmlStr);
            }else{
                alert(data);    // 网络不稳定，请刷新重试
            };
        });
    });
    
    // 市 改变出现 县
    $city.on("change", function(){
        const province = $province.val();    /* <option value="11">北京</option> */
        const city = $city.val();    /* <option value="undefined">鞍山市</option> */
        $.get(''/county'', {province, city}, function({code, data}){
            if(code === 200){
                const htmlStr = template(
                    ''templateScript'',
                    {data, firstOption: ''请选择区县'', name: ''county''}
                );
                $county.html(htmlStr);
            }else{
                alert(data);    // 网络不稳定，请刷新重试
            };
        });
    });
});

Ajax_艺术模板 art-template-web

艺术模板 art-template____jQuery 项目可用

最快的模板渲染引擎

兼容 ejs 语法

推荐语法

{{$value}} ---- {{$index}}

1. 引入 template-web.js 库

2. 创建模板代码

1) 创建 script 标签，将其 type 改为 text/html

2) 设置一个 id 属性

3) 写模板代码

const arr = [{name: ‘jaek‘,age:20},{name:‘rose‘,age:18}];

const obj = {name: ‘jaek‘,age:20};

3. template(元素id,{要渲染的数据}) 将模板代码解析为标签字符串

传一个数组 data，接的就是一个同名的数组 data[0].name

传一个对象 obj，接的就是一个同名的对象 obj.name

返回的是一个 htmlStr，用于追加到页面生效

4. 将生成的标签字符串渲染到页面上生效

AlternatingItemTemplate类似于 ItemTemplate 元素

DataList Web 服务器控件
通过使用模板显示数据源中的项。通过操作组成 DataList 控件的不同组件的模板（如 ItemTemplate 和 HeaderTemplate），可以自定义该控件的外观和内容。

<asp:DataList id="DataList1"
     CellPadding="pixels"
     CellSpacing="pixels"
     DataKeyField="DataSourceKeyField"
     DataSource=''<% databindingexpression %>''
     ExtractTemplateRows="True|False"
     GridLines="None|Horizontal|Vertical|Both"
     RepeatColumns="ColumnCount"
     RepeatDirection="Vertical|Horizontal"
     RepeatLayout="Flow|Table"
     ShowFooter="True|False"
     ShowHeader="True|False"
     OnCancelCommand="OnCancelCommandMethod"
     OnDeleteCommand="OnDeleteCommandMethod"
     OnEditCommand="OnEditCommandMethod"
     OnItemCommand="OnItemCommandMethod"
     OnItemCreated="OnItemCreatedMethod"
     OnUpdateCommand="OnUpdateCommandMethod"
     runat="server">

   <AlternatingItemStyle ForeColor="Blue"/>
   <EditItemStyle BackColor="Yellow"/>
   <FooterStyle BorderColor="Gray"/>
   <HeaderStyle BorderColor="Gray"/>
   <ItemStyle Font-Bold="True"/>
   <PagerStyle Font-Name="Ariel"/>
   <SelectedItemStyle BackColor="Blue"/>

   <HeaderTemplate>
      Header template HTML
   </HeaderTemplate>
   <ItemTemplate>
      Item template HTML
   </ItemTemplate>
   <AlternatingItemTemplate>
      Alternating item template HTML
   </AlternatingItemTemplate>
   <EditItemTemplate>
      Edited item template HTML
   </EditItemTemplate>
   <SelectedItemTemplate>
      Selected item template HTML
   </SelectedItemTemplate>
   <SeparatorTemplate>
      Separator template HTML
   </SeparatorTemplate>
   <FooterTemplate>
      Footer template HTML
   </FooterTemplate>

</asp:DataList>
备注
通过定义模板，可以操作控件的布局和内容。下表列出 DataList 控件的不同模板。

AlternatingItemTemplate 类似于 ItemTemplate 元素，但在 DataList 控件中隔行（交替行）呈现。通过设置 AlternatingItemTemplate 元素的样式属性，可以为其指定不同的外观。
EditItemTemplate 项在设置为编辑模式后的布局。此模板通常包含编辑控件（如 TextBox 控件）。当 EditItemIndex 设置为 DataList 控件中某一行的序号时，将为该行调用 EditItemTemplate。
FooterTemplate 在 DataList 控件的底部（脚注）呈现的文本和控件。
FooterTemplate 不能是数据绑定的。

HeaderTemplate 在 DataList 控件顶部（标头）呈现的文本和控件。
HeaderTemplate 不能是数据绑定的。

ItemTemplate 为数据源中的每一行都呈现一次的元素。
SelectedItemTemplate 当用户选择 DataList 控件中的一项时呈现的元素。通常的用法是增加所显示的数据字段的个数并以可视形式突出标记该行。
SeparatorTemplate 在各项之间呈现的元素。
SeparatorTemplate 项不能是数据绑定的。

通过为 DataList 控件的不同部分指定样式，可以自定义该控件的外观。下表列出用于控制 DataList 控件不同部分的外观的样式属性。

样式属性说明样式类
AlternatingItemStyle 隔项（交替项）的样式。 TableItemStyle
EditItemStyle 正在编辑的项的样式。 TableItemStyle
FooterStyle 列表结尾处的脚注（如果有的话）的样式。 TableItemStyle
HeaderStyle 列表开始处的标头（如果有的话）的样式。 TableItemStyle
ItemStyle 单个项的样式。  Style
SelectedItemStyle 选定项的样式。 TableItemStyle
SeparatorStyle 各项之间的分隔符的样式。 TableItemStyle

注意   DataList 控件与 Repeater 控件的不同之处在于，前者支持定向呈现（通过使用 RepeatColumns 和 RepeatDirection 属性）并且有用于在 HTML 表内呈现的选项。
Items 集合包含 DataList 控件的数据绑定成员。当在 DataList 控件上调用 DataBind 方法时该集合将被填充。首先添加标头（如果有的话），然后为每个数据行添加一个 Item 对象。如果存在 SeparatorTemplate，则 Separators 将被创建并添加到各项之间，但不会添加到 Items 集合中。

在为 DataSource 中的行创建所有项之后，Footer 被添加到该控件中（但不会添加到 Items 集合中）。最后，该控件为每一项（包括标头、脚注和分隔符）引发 ItemCreated 事件。与大多数集合不同，Items 集合不公开 Add 或 Remove 方法。但是，可以通过为 ItemCreated 事件提供处理程序来修改项内的内容。

警告   文本在 DataList 控件中显示之前并非 HTML 编码形式。这使得可以在文本中的 HTML 标记间嵌入脚本。如果控件值是用户输入的，请务必验证这些值以防止出现安全漏洞。
有关 DataList Web 服务器控件的属性和事件的详细信息，请参见 DataList 类文档。

示例
以下示例说明如何使用 DataList 控件显示数据源中的项。

[Visual Basic]
<%@ Page Language="VB" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>

<html>
   <script runat="server">

      Function CreateDataSource() As ICollection

         Dim dt As New DataTable()
         Dim dr As DataRow

         dt.Columns.Add(New DataColumn("StringValue", GetType(String)))

         Dim i As Integer

         For i = 0 To 9
            dr = dt.NewRow()
            dr(0) = "Item " & i.ToString()
            dt.Rows.Add(dr)
         Next i

         Dim dv As New DataView(dt)
         Return dv

      End Function ''CreateDataSource

      Sub Page_Load(sender As Object, e As EventArgs)

         If Not IsPostBack Then
            DataList1.DataSource = CreateDataSource()
            DataList1.DataBind()
         End If

      End Sub ''Page_Load

      Sub Button1_Click(sender As Object, e As EventArgs)

         If DropDown1.SelectedIndex = 0 Then
            DataList1.RepeatDirection = RepeatDirection.Horizontal
         Else
            DataList1.RepeatDirection = RepeatDirection.Vertical
         End If

         If DropDown2.SelectedIndex = 0 Then
            DataList1.RepeatLayout = RepeatLayout.Table
         Else
            DataList1.RepeatLayout = RepeatLayout.Flow
         End If

         DataList1.RepeatColumns = DropDown3.SelectedIndex + 1

         If Check1.Checked = True And DataList1.RepeatLayout = RepeatLayout.Table Then
            DataList1.BorderWidth = Unit.Pixel(1)
            DataList1.GridLines = GridLines.Both
         Else
            DataList1.BorderWidth = Unit.Pixel(0)
            DataList1.GridLines = GridLines.None
         End If

      End Sub ''Button1_Click

   </script>

<body>

   <form runat="server">

      <h3>DataList Example</h3>

      <asp:DataList id="DataList1" runat="server"
           BorderColor="black"
           CellPadding="3"
           Font-Name="Verdana"
           Font-Size="8pt">

         <HeaderStyle BackColor="#aaaadd">
         </HeaderStyle>

         <AlternatingItemStyle BackColor="Gainsboro">
         </AlternatingItemStyle>

         <HeaderTemplate>
            Items
         </HeaderTemplate>

         <ItemTemplate>
            <%# DataBinder.Eval(Container.DataItem, "StringValue") %>
         </ItemTemplate>

      </asp:DataList>
      <p>
      <hr noshade align="left" width="300px">
      RepeatDirection:
      <asp:DropDownList id=DropDown1 runat="server">
         <asp:ListItem>Horizontal</asp:ListItem>
         <asp:ListItem>Vertical</asp:ListItem>
      </asp:DropDownList><br>
      RepeatLayout:
      <asp:DropDownList id=DropDown2 runat="server">
         <asp:ListItem>Table</asp:ListItem>
         <asp:ListItem>Flow</asp:ListItem>
      </asp:DropDownList><br>
      RepeatColumns:
      <asp:DropDownList id=DropDown3 runat="server">
         <asp:ListItem>1</asp:ListItem>
         <asp:ListItem>2</asp:ListItem>
         <asp:ListItem>3</asp:ListItem>
         <asp:ListItem>4</asp:ListItem>
         <asp:ListItem>5</asp:ListItem>
      </asp:DropDownList><br>
      Show Borders:
      <asp:CheckBox id=Check1 runat="server" /><p>
      <asp:LinkButton id=Button1
           Text="Refresh DataList"
           OnClick="Button1_Click"
           runat="server"/>
   </form>

</body>
</html>
[C#]
<%@ Page Language="C#" AutoEventWireup="True" %>
<%@ Import Namespace="System.Data" %>
<html>
   <script runat="server">

      ICollection CreateDataSource()
      {
         DataTable dt = new DataTable();
         DataRow dr;

         dt.Columns.Add(new DataColumn("StringValue", typeof(string)));
         for (int i = 0; i < 10; i++)
         {
            dr = dt.NewRow();
            dr[0] = "Item " + i.ToString();
            dt.Rows.Add(dr);
         }

         DataView dv = new DataView(dt);
         return dv;
      }

      void Page_Load(Object Sender, EventArgs e)
      {
         if (!IsPostBack)
         {
            DataList1.DataSource = CreateDataSource();
            DataList1.DataBind();
         }
      }

      void Button1_Click(Object Sender, EventArgs e)
      {

         if (DropDown1.SelectedIndex == 0)
            DataList1.RepeatDirection = RepeatDirection.Horizontal;
         else
            DataList1.RepeatDirection = RepeatDirection.Vertical;
         if (DropDown2.SelectedIndex == 0)
            DataList1.RepeatLayout = RepeatLayout.Table;
         else
            DataList1.RepeatLayout = RepeatLayout.Flow;
         DataList1.RepeatColumns=DropDown3.SelectedIndex+1;
         if ((Check1.Checked ==true) &&
            (DataList1.RepeatLayout == RepeatLayout.Table))
         {
            DataList1.BorderWidth = Unit.Pixel(1);
            DataList1.GridLines = GridLines.Both;
         }
         else
         {
            DataList1.BorderWidth = Unit.Pixel(0);
            DataList1.GridLines = GridLines.None;
         }
      }

   </script>

<body>

   <form runat="server">
      <h3>DataList Sample</h3>

         <asp:DataList id="DataList1"
              BorderColor="black"
              CellPadding="3"
              Font-Name="Verdana"
              Font-Size="8pt"
              runat="server">

            <HeaderStyle BackColor="#aaaadd"/>
            <AlternatingItemStyle BackColor="Gainsboro"/>

            <HeaderTemplate>
               Items
            </HeaderTemplate>
            <ItemTemplate>
               <%# DataBinder.Eval(Container.DataItem, "StringValue") %>
            </ItemTemplate>

         </asp:DataList>
         <p>
         <hr noshade align="left" width="300px">
         RepeatDirection:
         <asp:DropDownList id=DropDown1 runat="server">
            <asp:ListItem>Horizontal</asp:ListItem>
            <asp:ListItem>Vertical</asp:ListItem>
         </asp:DropDownList><br>
         RepeatLayout:
         <asp:DropDownList id=DropDown2 runat="server">
            <asp:ListItem>Table</asp:ListItem>
            <asp:ListItem>Flow</asp:ListItem>
         </asp:DropDownList><br>
         RepeatColumns:
         <asp:DropDownList id=DropDown3 runat="server">
            <asp:ListItem>1</asp:ListItem>
            <asp:ListItem>2</asp:ListItem>
            <asp:ListItem>3</asp:ListItem>
            <asp:ListItem>4</asp:ListItem>
            <asp:ListItem>5</asp:ListItem>
         </asp:DropDownList><br>
         Show Borders:
         <asp:CheckBox id=Check1 runat="server" />
         <p>
         <asp:LinkButton id=Button1
              Text="Refresh DataList"
              OnClick="Button1_Click"
              runat="server"/>
      </font>
   </form>

</body>
</html>
请参见

您可能感兴趣的文章:

Git 常用命令速查表(图文+表格)
Git客户端TortoiseGit（Windows系统）的使用方法
Git客户端图文详解如何安装配置GitHub操作流程攻略
分享下自己总结的Git常用命令
PHP中数字检测is_numeric与ctype_digit的区别介绍
mac git xcrun error active developer path 错误
linux系统安装git及git常用命令
使用git代替FTP部署代码到服务器的例子
使用GIT进行源码管理——GUI客户端小结
git提交空目录的方法

An error happened during template parsing (template:

An error happened during template parsing (template: "class path resource [templates/index.h...

转自 https://blog.csdn.net/qq_41426326/article/details/88837112

在开发 springboot 的时候，进行 modelAndView 视图层映射的时候，一直出现

An error happened during template parsing (template: "class path resource [templates/index.html]")

模板解析过程中发生错误 (模板:“类路径资源 [templates/index.html]”)

在向 index.html 映射的时候出现错误，小编在和其他程序员一样打开了百度开始搜索，有各种说法

1. 配置文件问题.(我重新看了一遍确定没有问题，但是还是错误)

spring.thymeleaf.prefix=classpath:/templates/
spring.thymeleaf.suffix=.html
spring.thymeleaf.servlet.content-type=text/html
spring.thymeleaf.encoding=utf-8
spring.thymeleaf.mode=LEGACYHTML5
spring.thymeleaf.cache=false
spring.mvc.static-path-pattern=/**
spring.resources.static-locations=classpath:/static/
2. 说是 @Controller 和 @RestController 功能不一样，将 @Controller 修改为 @RestController 在加上 @ResponseBody (依然无效)、

3. 说在映射的时候实体类没有 get 方法，为变量加上 get 就可以了（结果我本来就有 get 方法的）

4. 还有说在 pom.xml 文件下的 build 配置 (都不是这个错误的解决方案)

<resources>
<resource>
<directory>sre/main/resources</directory>
</resource>
</resources>
最后小编早上智商最高峰的时候发现了这个小小小问题

在这附上小编 index.html 的文件开头，就是因为加了

https: xmlns:https="http://www.w3.org/1999/xhtml"
和

xmlns:th="http://www.thymeleaf.org"
导致调用的时候原本要调用第二句话的代码调用了第一句代码中的方法发生错误，把第一句代码删除就可以了

小编总结了一下，一般系统出现以下错误

An error happened during template parsing (template: "class path resource [templates/index.html]")

大家可以去看看视图层，并不是 java 代码出现错误.

今天关于theme="ajax" : Template /template/ajax/head.ftl not found异常解决和error in the ajax的分享就到这里，希望大家有所收获，若想了解更多关于Ajax_简介：异步的 JS 和 XML_原生写 ajax 分析其原理_jquery_ajax_art-template、Ajax_艺术模板 art-template-web、AlternatingItemTemplate类似于 ItemTemplate 元素、An error happened during template parsing (template: "class path resource [templates/index.h...等相关知识，可以在本站进行查询。

本文标签：