Programación Ajax --- el uso del motor de plantillas del lado del cliente

1. Motor de plantillas

En un sitio web tradicional, el cliente envía una solicitud al servidor, el servidor empalma los datos y el html, y luego envía la cadena html empalmada al cliente.

Sin embargo, ahora usamos tecnología ajax para enviar solicitudes al lado del servidor, y el lado del servidor usará datos en formato json como contenido de respuesta en la mayoría de los casos.

Es decir, el empalme de los datos originales y el html se realiza del lado del servidor, pero ahora este trabajo debe realizarse del lado del cliente .

Al realizar el empalme de datos en el lado del cliente, también necesitamos usar un motor de plantillas.

A continuación, expliquemos el motor de plantillas del lado del cliente

1.1 Descripción general del motor de plantillas

Ya sea un motor de plantillas del lado del cliente o un motor de plantillas del lado del servidor, su función es: **Usar la sintaxis de plantilla proporcionada por el motor de plantillas para empalmar datos y HTML.

En la fase del curso Nodo, se explica el motor de plantillas de plantilla de arte (lado del servidor). Además, el motor de plantillas art-template también tiene una versión de cliente correspondiente.

Por lo tanto, en el lado del cliente, podemos usar art-template directamente sin aprender un nuevo motor de plantillas. Solo hay cambios menores en el uso.

Dirección oficial:
https://aui.github.io/art-template/zh-cn/index.html

1.2 Pasos de uso

1. Descargue el archivo del motor de plantilla de plantilla de arte e importe el archivo de biblioteca en la página HTML
   
2. Preparar la plantilla de plantilla de arte

JavaScript del lado del cliente no tiene la capacidad de leer archivos, por lo que la plantilla del lado del cliente no es un archivo separado (al aprender el nodo antes, la plantilla se almacenó en views/common/layout.art), sino un fragmento de código en un html, use la etiqueta de secuencia de comandos y obtenga una para la plantilla del lado del cliente id值.

3. Dígale al motor de plantillas qué plantilla concatenar con qué datos

4. Agregue la cadena html concatenada a la página

5. Dígale al motor de plantillas cómo empalmar datos y cadenas html a través de la sintaxis de la plantilla

2. Demostración de código

2.1 Ejemplo 1: Verificación de la unicidad de la dirección de correo electrónico

// 验证邮箱地址的正则表达式
var reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/

El código específico es el siguiente:

js/ajax.jsEl código completo es el siguiente:

function ajax (options) {
	// 默认值
	var defaults = {
		type: 'get',
		url: '',
		async: true,
		data: {},
		header: {
			'Content-Type': 'application/x-www-form-urlencoded'
		},
		success: function () {},
		error: function () {}
	}
	// 使用用户传递的参数替换默认值参数
	Object.assign(defaults, options);
	// 创建ajax对象
	var xhr = new XMLHttpRequest();
	// 参数拼接变量
	var params = '';
	// 循环参数
	for (var attr in defaults.data) {
		// 参数拼接
		params += attr + '=' + defaults.data[attr] + '&';
		// 去掉参数中最后一个&
		params = params.substr(0, params.length-1)
	}
	// 如果请求方式为get
	if (defaults.type == 'get') {
		// 将参数拼接在url地址的后面
		defaults.url += '?' + params;
	}

	// 配置ajax请求
	xhr.open(defaults.type, defaults.url, defaults.async);
	// 如果请求方式为post
	if (defaults.type == 'post') {
		// 设置请求头
		xhr.setRequestHeader('Content-Type', defaults.header['Content-Type']);
		// 如果想服务器端传递的参数类型为json
		if (defaults.header['Content-Type'] == 'application/json') {
			// 将json对象转换为json字符串
			xhr.send(JSON.stringify(defaults.data))
		}else {
			// 发送请求
			xhr.send(params);
		}
	} else {
		xhr.send();
	}
	// 请求加载完成
	xhr.onload = function () {
		// 获取服务器端返回数据的类型
		var contentType = xhr.getResponseHeader('content-type');
		// 获取服务器端返回的响应数据
		var responseText = xhr.responseText;
		// 如果服务器端返回的数据是json数据类型
		if (contentType.includes('application/json')) {
			// 将json字符串转换为json对象
			responseText = JSON.parse(responseText);
		}
		// 如果请求成功
		if (xhr.status == 200) {
			// 调用成功回调函数, 并且将服务器端返回的结果传递给成功回调函数
			defaults.success(responseText, xhr);
		} else {
			// 调用失败回调函数并且将xhr对象传递给回调函数
			defaults.error(responseText, xhr);
		} 
	}
	// 当网络中断时
	xhr.onerror = function () {
		// 调用失败回调函数并且将xhr对象传递给回调函数
		defaults.error(xhr);
	}
}

02-验证邮箱地址唯一性.htmlCódigo completo:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
    <style type="text/css">
        p:not(:empty) {
     
     
            padding: 15px;
        }
        
        .container {
     
     
            padding-top: 100px;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="form-group">
            <label>邮箱地址</label>
            <input type="email" class="form-control" placeholder="请输入邮箱地址" id="email">
        </div>
        <!-- 错误 bg-danger 正确 bg-success -->
        <p id="info"></p>
    </div>
    <script src="/js/ajax.js"></script>
    <script>
        // 获取页面中的元素
        var emailInp = document.getElementById('email')
        var info = document.getElementById('info')

        // 给emailInp添加离开焦点事件
        emailInp.onblur = function() {
     
     
            // 获取用户输入的邮箱地址
            var email = this.value
                // 验证邮箱地址的正则表达式
            var reg = /^[A-Za-z\d]+([-_.][A-Za-z\d]+)*@([A-Za-z\d]+[-.])+[A-Za-z\d]{2,4}$/
                // 如果用户输入的邮箱地址不符合规则
            if (!reg.test(email)) {
     
     
                // 阻止程序向下执行
                info.innerHTML = '请输入符合规则的邮箱地址'
                info.className = 'bg-danger'
                return;
            }

            // 向服务器端发送请求
            ajax({
     
     
                type: 'get',
                url: 'http://localhost:3000/verifyEmailAdress',
                data: {
     
     
                    email: email
                },
                success: function(result) {
     
     
                    console.log(result)
                    info.innerHTML = result.message;
                    info.className = 'bg-success';
                },
                error: function(result) {
     
     
                    console.log(result)
                    info.innerHTML = result.message;
                    info.className = 'bg-danger';
                }
            })
        }
    </script>
</body>

</html>

app.jsEl código correspondiente en:

// 邮箱地址验证
app.get('/verifyEmailAdress', (req, res) => {
    // 接收客户端传递过来的邮箱地址
    const email = req.query.email;
    // 判断邮箱地址注册过的情况
    if (email == '[email protected]') {
        // 设置http状态码并对客户端做出响应
        res.status(400).send({ message: '邮箱地址已经注册过了, 请更换其他邮箱地址' });
    } else {
        // 邮箱地址可用的情况
        // 对客户端做出响应
        res.send({ message: '恭喜, 邮箱地址可用' });
    }
});

2.2 Ejemplo 2: solicitar automáticamente el contenido del cuadro de búsqueda

El código específico es el siguiente:

03-搜索框内容自动提示.htmlEl código completo es el siguiente:

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="/assets/bootstrap/dist/css/bootstrap.min.css">
    <style type="text/css">
        .container {
     
     
            padding-top: 150px;
        }
        
        .list-group {
     
     
            display: none;
        }
    </style>
</head>

<body>
    <div class="container">
        <div class="form-group">
            <input type="text" class="form-control" placeholder="请输入搜索关键字" id="search">
            <ul class="list-group" id="list-box">

            </ul>
        </div>
    </div>
    <script src="/js/ajax.js"></script>
    <script src="/js/template-web.js"></script>
    <script type="text/html" id="tpl">
        {
     
     {
     
     each result}}
        <li class="list-group-item">{
     
     {
     
     $value}}</li>
        {
     
     {
     
     /each}}
    </script>
    <script>
        // 获取搜索框
        var searchInp = document.getElementById('search')
            // 获取提示文字的存放容器
        var listBox = document.getElementById('list-box')
            // 存储定时器的变量
        var timer = null
            // 当用户在文本框中输入的时候触发
        searchInp.oninput = function() {
     
     
            // 清除上一次开启的定时器
            clearTimeout(timer)
                // 获取用户输入的内容
            var key = this.value


            if (key.trim().length == 0) {
     
     
                // 如果用户没有在搜索框中输入内容
                // 将提示下拉框隐藏掉
                listBox.style.display = 'none'
                    // 组织程序向下执行
                return;
            }
            // 开启定时器，让请求延时发送
            timer = setTimeout(function() {
     
     

                // 向服务器端发送请求
                // 向服务器端索取和用户输入关键字相关的内容
                ajax({
     
     
                    type: 'get',
                    url: 'http://localhost:3000/searchAutoPrompt',
                    data: {
     
     
                        key: key
                    },
                    success: function(result) {
     
     
                        // 使用模板引擎拼接字符串
                        var html = template('tpl', {
     
     
                                result: result
                            })
                            // 将拼接好的字符串显示在页面中
                        listBox.innerHTML = html
                            // 显示ul容器
                        listBox.style.display = 'block'
                    }
                })
            }, 800)
        }
    </script>
</body>

</html>

El código correspondiente en app.js:

// 输入框文字提示
app.get('/searchAutoPrompt', (req, res) => {
    // 搜索关键字
    const key = req.query.key;
    // 提示文字列表
    const list = [
        '黑马程序员',
        '黑马程序员官网',
        '黑马程序员顺义校区',
        '黑马程序员学院报名系统',
        '传智播客',
        '传智博客前端与移动端开发',
        '传智播客大数据',
        '传智播客python',
        '传智播客java',
        '传智播客c++',
        '传智播客怎么样'
    ];
    // 搜索结果
    let result = list.filter(item => item.includes(key));
    // 将查询结果返回给客户端
    res.send(result);
});