jquery ajax
准备工作：
下载nodejs（js后台） （前端环境node）(不能进行dom操作)
下载后会带有npm（世界上最大的代码仓库），可以直接安装插件，会安装到当前目录里。如果想安装东西使用命令行。下载速度较慢，走国外资源。可以通过nrm / yarn切换源。
npm init -y（会在目录自动创建package.json文件）
npm i jquery -S
npm i nrm -g
nrm 安装后有两个命令，nrm ls 查看所有的源，nrm use源名字 切换源。
nrm安装东西：nrm install <下载内容> 会自动下载最新版本（例如jQuery，MySQL等）
nrm i json-server -g
yarn 安装东西：yarn add json-server --global （与nrm不同）
json-server 写好的接口 ，直接使用 。模拟接口，增删改查。
json-server特点：
1. get 获取 /get/id /get?username....
2. post 添加 /post
3. patch 修改 /patch/id
4. delelte 删除 /delete/id
jQuery：是一款优秀的JavaScript数据库，最主要的用途是用来查询，使用jQuery能让我们对HTML文档遍历和操作、事件处理、动画、Ajax变得简单。jQuery浏览器兼容很好。
如何使用jQuery：
1.下载jQuery库，如果有网络可以不下载直接引入使用
有压缩版本或未压缩版本可以下载，未压缩的版本格式美观、单词完整、更有利于阅读。压缩后的版本去除了多余的空格换行，把完整单词替换为字母。
在开发的过程中，我们使用未压缩的版本，有利于阅读学习。项目上线时使用压缩后的版本，利于传输，提升网页响应速度。
2.引入下载的jQuery库
有网络的情况下：
<head>
<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
</head>
无网络的情况下：
把下载的jQuery放入项目中，
<head>
<script src="jQuery的路径/版本"></script>
</head>
3.编写jQuery代码
以上内容准备好后就可以使用了。
数据库指的就是json文件。创建文件夹目录(如创建data文件夹，data文件夹下边创建db.json文件)，名字自定义命名。(字段名id必须有)
{
"users": [
{
"id": 1,
"username": "yonghu1",
"password": "admin"
},
{
"id": 2,
"username": "yonghu2",
"password": "admin",
...
}
],
"shopList": [
{
"name": "苹果",
"id": 1,
"desc": "红富士...."
}
]
}
启动服务：
命令行启动服务。
json-server 数据库文件 --port 端口号 --host(设置域名 如果没有可以不写 允许他人访问不能设置localhost 需设置本机IP地址) --watch(当我收修改数据库的时候 服务自动重启)
如：json-server ../data/db.json --port 8089 --watch
也可在package.json文件里编辑脚本命令行运行 npm run serve 启动服务（更方便）
"scripts": {
"serve": "json-server ../data/db.json --port 8089 --watch"
},
编写代码：
$(".denglu").click(function(){
let username = $("#username").val();
let password = $("#password").val();
$.ajax({
url:"http://localhost:8089/users",
type:"get",
data:{
username,
password
},
success:function(data){
if(data.length){
alert("登录成功");
}else{
alert("账号或密码错误");
}
},
fail:function(err){
alert(err);
}
})
})
完整代码：
链接：https://pan.baidu.com/s/1d1c5zsP9dtQX8hn5JYUMXg
提取码：1234
代码风格：restful风格
浙公网安备 33010602011771号