目标：

1. jq如何像vue一样把数据源挂载到HTML节点上，节点直接使用 data.xxx 进行数据渲染
2. jq能正常在表格上渲染按钮但点击按钮无反应
3. jq实现获取后端数据并下载成文件

目标一：
jq请求后端数据，返回的是数组形式，需要把数据渲染到表格上。（待开发）
虽然这个方法暂时没能很好的解决，但我们可以使用其它方法解决。

实现效果一：

html jquery渲染列表 jquery渲染表格_数据


实现代码一：

<table style="text-align: center" id="table" class="table table-hover table-bordered">
			<thead>
				<tr>
					<th style="text-align: center">名称</th>
					<th style="text-align: center">大小</th>
					<th style="text-align: center">创建时间</th>
					<th style="text-align: center">修改时间</th>
				</tr>
			</thead>
			<tbody id="road">
			</tbody>
		</table>
$(document).ready(function () {
			function search() {
				$.ajax({
					type: 'get',
					data: 'data.datas',
					dataType: 'json',
					url: 'http://******',
					success: function (data) {
						const json = data.data.datas
						for (let index = 0; index < json.length; index++) {
							$("#road").append(`
						<tr>
							<td class="name">`+ json[index].name + ` </td>
							<td class="size">`+ json[index].size + `</td>
							<td class="createTime">`+ json[index].createTime + `</td>
							<td class="modifyTime">`+ json[index].modifyTime + `</td>
						</tr>
						`)
						}
					}
				})
			};
			search();    // 调用
		});

目标二：
需要在表格上添加一个下载按钮来下载数据，但按钮加上去了点击却没有反应。这就很烧脑。

没反应的原因：
节点未渲染完毕方法已经执行

解决方法： 给方法设置一个计时器，把方法延期执行即可。

$(document).ready(function () {
	function search() {
		$.ajax({
				***
					<td><button id="download" type="download" class="btn btn-primary">下载</button></td>
				***
				</tr>
		})
	};
	search();    // 调用
});

setTimeout(function () {
	$('button').click(function () {
		console.log(111)
}, 100)

目标三：
jq实现获取后端数据并下载成文件

实现代码三：

setTimeout(function () {
			$('button').click(function () {
				var row = $(this).closest("tr");
				var param = row.find("td:eq(0)").text()
				$.ajax({
					type: 'get',
					data: param,
					url: 'http://***/download/' + param,
					success: function (data) {
						// 调用方法  （返回的数据， 文件名），如果想自定义文件名可直接书写，比如“ index.html ”
						funDownload(data, param);
					},
					error: function (data) {
						alert('文件下载失败，请稍后再试');
					}
				})
			})
		}, 100)

		// jq实现把后端数据转成文件的方法
		var funDownload = function (content, filename) {
			// 创建隐藏的可下载链接
			var eleLink = document.createElement('a');
			eleLink.download = filename;
			eleLink.style.display = 'none';
			// 字符内容转变成blob地址
			var blob = new Blob([content]);
			eleLink.href = URL.createObjectURL(blob);
			// 触发点击
			document.body.appendChild(eleLink);
			eleLink.click();
			// 然后移除
			document.body.removeChild(eleLink);
		};

总结三：
在请求这个下载接口的时候踩到了一个坑，全都是因为自己的粗心大意造成。
一开始的时候以为后端是以文件名作为参数传递给接口，就造成了接口一直响应404，对比接口发现接口在参数前面多加了一个？，如 http://***/download/?param。但真实的接口是 http://***/download/param。这个时候想到的办法肯定是如何把接口中的？去掉。后来经后端同事告知才知道，这个接口是不需要传递参数，是拼接上去的。所以后续如何再遇到接口与真是接口多个？的时候可以往接口后面的数据是否是拼接上去的方面思考。