【Ajax】模板引擎

在Ajax应用中，通常需要将从服务器获取的数据插入到页面的某个位置。这时，可以使用JavaScript模板引擎来渲染这些数据，而不是将数据直接嵌入HTML代码中。

以下是一个使用Mustache模板引擎的简单示例：

1. 首先，引入Mustache.js库。

<script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/4.2.2/mustache.min.js"></script>

2. 准备一个用于渲染的模板。

<script type="text/template" id="template">
    <h1>{{title}}</h1>
    <p>{{content}}</p>
</script>

3. 使用Ajax获取数据，并使用Mustache模板引擎渲染数据。

var xhr = new XMLHttpRequest();
xhr.open('GET', '/api/data', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState == 4 && xhr.status == 200) {
        var data = JSON.parse(xhr.responseText);
        var template = document.getElementById('template').innerHTML;
        var rendered = Mustache.render(template, data);
        document.getElementById('content').innerHTML = rendered;
    }
};
xhr.send();

在这个例子中，我们通过Ajax请求获取数据，然后使用Mustache模板引擎将数据渲染到具有id="content"的元素中。这样，我们就可以将数据动态地插入到页面中，而不是将HTML代码硬编码。