十几万数据请求ajax,Ajax - 数据请求

1.安装json-server：npm i json-server -g

2.在api目录打开命令行窗口，执行：json-server db.json --port 3000

3.为了方便我们管理各种命令，我们在api文件夹下新建package.json文件，使用npm将mock数据的命令管理起来，这样我们直接npm run mock 就可以启动数据服务了

4.Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中

在客户端client文件夹安装： npm i axios --save

这里提一嘴：由于浏览器执行html文件是自上而下执行的，如果js代码死循环或者执行时间过长，页面就会阻塞dom渲染，会一直显示空白，给用户不好的体验，所以在main.js我们把所有代码用一个函数包起来： window.onload = function(){ //放所有代码 }

6.请求数据处理

图片.png

7.ajax请求 数据

window.onload = function () {

axios.get('http://localhost:3000/movies')

.then(function (response) {

let movies = response.data, str = ` `;

movies.forEach(movie => {

str += `

x

${movie.title}

${movie.score} 分

`

});

let moviesRow = document.getElementById("moviesRow");

moviesRow.innerHTML += str; //拼接字符串的操作

})

.catch(function (error) {

console.log(error);

});

}

8.新增一条数据

浏览器会帮我们做表单提交，它需要我们在 form上写上action属性(服务请求地址)与 method属性(请求方式：get，post)，我们在点了 type 叫 submit 的按钮之后，浏览器就把我们的数据通过post方法传递给服务器了

图片.png