本文共 5490 字,大约阅读时间需要 18 分钟。
作用:使用模板引擎提供的模板语法,可以将数据和 HTML 拼接起来。
官方地址: https://aui.github.io/art-template/zh-cn/index.htmlvar html = template('tpl', { username: 'zhangsan', age: '20'});
document.getElementById('container').innerHTML = html;
也可以实现循环。
例子:
Document
var form = document.getElementById('form'); var formData = new FormData(form);
xhr.send(formData);
注意:
html表单部分:
app.js服务器部分
//引用模块const formidable = require('formidable');app.post('/formData', (req, res) => { // 创建formidable表单解析对象 const form = new formidable.IncomingForm(); // 解析客户端传递过来的FormData对象 form.parse(req, (err, fields, files) => { res.send(fields); });});
输入111,111
效果图:formData.get('key');
formData.set('key', 'value');
formData.delete('key');
formData.append('key', 'value');
注意:set 方法与 append 方法的区别是,在属性名已存在的情况下,set 会覆盖已有键名的值,append会保留两个值。
html部分:
123
app.js服务器部分
//引用模板const formidable = require('formidable');// 实现文件上传的路由app.post('/upload', (req, res) => { // 创建formidable表单解析对象 const form = new formidable.IncomingForm(); // 设置客户端上传文件的存储路径 form.uploadDir = path.join(__dirname, 'public', 'uploads'); // 保留上传文件的后缀名字 form.keepExtensions = true; // 解析客户端传递过来的FormData对象 form.parse(req, (err, fields, files) => { // 将客户端传递过来的文件地址响应到客户端 res.send("ok"); });});
效果:
//html部分// 在文件上传的过程中持续触发 xhr.upload.onprogress = function (ev) { // ev.loaded 文件已经上传了多少 // ev.total 上传文件的总大小 var result = (ev.loaded / ev.total) * 100 + '%'; // 设置进度条的宽度 bar.style.width = result; // 将百分比显示在进度条中 bar.innerHTML = result; }
$.Ajax()是jQuery对ajax封装的一种方法,使用前要引入jQuery。
作用:发送Ajax请求;发送jsonp请求。$.ajax({ // 请求方式 type: 'post', // 请求地址 url: '/base', data: { name: 'zhangsan', age: 100 }, // 在请求发送之前调用 beforeSend: function () { alert('我是请求前的') }, // 请求成功以后函数被调用 success: function (response) { // response为服务器端返回的数据 // 方法内部会自动将json字符串转换为json对象 console.log(response); }, // 请求失败以后函数被调用 error: function (xhr) { console.log(xhr) } })
var params = { name: 'wangwu', age: 300} $('#btn').on('click', function () { $.ajax({ // 请求方式 type: 'post', // 请求地址 url: '/user', //转化 data: JSON.stringify(params), // 指定参数的格式类型 contentType: 'application/json', // 请求成功以后函数被调用 success: function (response) { // response为服务器端返回的数据 // 方法内部会自动将json字符串转换为json对象 console.log(response); } }) });
$.ajax({ url: '/jsonp', // 指定当前发送jsonp请求 dataType: 'jsonp', // 修改callback参数名称 (选填) jsonp: 'cb', // 指定函数名称 (选填) jsonCallback: 'fnName', success: function (response) { } })
作用:将表单中的数据自动拼接成字符串类型的参数
作用:$.get方法用于发送get请求。
$.post方法用于发送post请求。$.get('/base', 'name=zhangsan&age=30', function (response) { console.log(response) }) $.post('/base', function (response) { console.log(response) })
只要页面中有Ajax请求被发送,对应的全局事件就会被触发
ajaxStart() // 当请求开始发送时触发ajaxSend()//ajax请求时ajaxSuccess()//ajax获取数据后ajaxComplete() //ajax请求完成时ajaxError()//ajax请求发生错误后ajaxStop()//ajax请求停止后
例子:
$(document).on('ajaxStart',function(){ console.log('start') }) $(document).on('ajaxComplete',function(){ console.log('complete') })
一套关于设计请求的规范。
RESTful API 的实现
在服务器端
// 获取用户列表信息app.get('/users', (req, res) => { res.send('当前是获取用户列表信息的路由');});// 获取某一个用户具体信息的路由app.get('/users/:id', (req, res) => { // 获取客户端传递过来的用户id const id = req.params.id; res.send(`当前我们是在获取id为${ id}用户信息`);});// 删除某一个用户app.delete('/users/:id', (req, res) => { // 获取客户端传递过来的用户id const id = req.params.id; res.send(`当前我们是在删除id为${ id}用户信息`);});// 修改某一个用户的信息app.put('/users/:id', (req, res) => { // 获取客户端传递过来的用户id const id = req.params.id; res.send(`当前我们是在修改id为${ id}用户信息`);});
在客户端
XML 的全称是 extensible markup language,代表可扩展标记语言,它的作用是传输和存储数据。
001 张三 002 王二丫
XML DOM 即 XML 文档对象模型,是 w3c 组织定义的一套操作 XML 文档对象的API。浏览器会将 XML 文档解析成文档对象模型。
例子
在服务器端响应一个XMLapp.get('/xml', (req, res) => { res.header('content-type', 'text/xml'); res.send('')}); 消息标题 消息内容
客户端获得xml的数据方法
var xhr = new XMLHttpRequest(); xhr.open('get', '/xml'); xhr.send(); xhr.onload = function () { // xhr.responseXML 获取服务器端返回的xml数据 var xmlDocument = xhr.responseXML; var title = xmlDocument.getElementsByTagName('title')[0].innerHTML; }
转载地址:http://kaah.baihongyu.com/