学习记录---04ajax---$.ajax()-serialize方法-todo案例-全局事件-NProgress-RESTful风格的API

$.ajax()方法

beforeSend:function(){
  // 在发送请求前的需要执行的代码
  // 可以使用return false取消 请求发送
}

方法内部会自动将json字符串转换为json对象
如果url的请求地址的协议域名端口号和当前文件的地址相同 可以只写路由地址

data 可以传对象类型 也可以传地址栏的参数格式

post方法时要将contentType转换为json格式 并且data中的对象类型的参数要转换为json字符串的格式

contentType 指定参数的格式类型

var params = {
      name:'lisi',
      age:25
    };
$('#btn').on('click',function(){
  $.ajax({
    type:'post',
    url:'/user',
    data:JSON.stringify(params),
    contentType:'application/json',
    success:function(data){
      console.log(data)
    }
  })
})

在$.ajax中传入的参数需要我们自己拼接

---

contentType:告诉服务器，我要发什么类型的数据

dataType：告诉服务器，我要想什么类型的数据，如果没有指定，那么会自动推断是返回 XML，还是JSON，还是script，还是String。

---

serialize方法

将表单中的数据自动拼接成字符串类型的参数
FormData 对象 —>构造函数 接收一个HTML表单DOM对象—>HTML5中存在的 存在兼容性

var params = $('#form').serialize();
// 返回值是拼接好的字符串

---

todo案例

展示任务列表

1. 准备一个防止人物列表的数组
2. 向服务器端发送请求，获取已存在的任务
3. 将已存在的任务存储在任务列表数组
4. 通过模板引擎将任务列表数组中的任务显示在页面中
   数据驱动DOM

---

添加任务

1. 为文本框绑定键盘抬起事件，在事件处理函数中判断当前用户敲击的是否是回车键
2. 当用户敲击回车键时，判断用户是否输入了任务名称
3. 向服务器端发送请求麻将用户输入的任务添加在数据库中，同时将任务添加到数组中
4. 通过模板引擎将任务列表数组中的任务显示在页面中

---

删除文件

1. 为删除按钮添加点击事件
2. 在事件处理函数中获取到要删除任务的id
3. 向服务器端发送请求，根据id删除任务，同时将任务数组中的相同任务删除
4. 通过模板引擎将任务列表数组中的任务重新显示在页面中

---

更改任务状态

1. 为任务复选框添加onchange事件
2. 在事件处理函数中获取复选框是否选中
3. 在服务器端发送请求，将当前复选框的选中状态提交到服务器端
4. 将任务状态同时也更新到任务列表数组中
5. 通过模板引擎将任务列表数组中的任务重新显示在页面中并且根据任务是否完成为li元素添加completed类名

---

is()方法

—— 用于筛选
语法：

jQueryObject.is( expr )
1
返回值：

is()函数的返回值为Boolean类型。true或者false。
只要其中至少有一个元素符合给定的表达式就返回true，否则就返回false。
说明：

is()方法用于判断与当前jQuery对象相匹配的元素是否符合指定的表达式。
这里的表达式包括：选择器(字符串)、DOM元素(Element)、jQuery对象、函数。
可以看出来，它是根据选择器、DOM元素或jQuery 对象来检测匹配元素集合。

---

修改任务名称

1. 为任务名称外层的label标签添加双击事件，同时为当前任务外层的li标签添加editing类名，开启编辑状态
2. 将任务名称显示在文本框中并让文本框获取焦点
3. 当文本框离开焦点时，将用户在文本框中输入的值提交到服务器端，并且将最新的任务名称更新到任务列表数组中
4. 使用模板引擎重新渲染页面中的任务列表

---

计算未完成的任务数量

1. 准备一个用于存储未完成任务数量的变量
2. 将未完成任务从任务数组中过滤出来
3. 将过滤结果数组的长度赋值给任务数量变量
4. 将结果更新到页面中

将计算代码封装在一个函数中

---

jQuery 中Ajax全局事件
只要页面中有AJax请求被发送，对应的全局事件就会被触发
.ajaxStart() 当请求开始发送时触发
.ajaxComplete 当请求完成时触发
$().on('ajaxStart',function(){})
一定要绑在document上

---

NProgress

进度条的使用
css+js引入
NProgress.start();
NProgress.done();

---

restful风格的API

关于设计请求的规范
GET: 获取数据
POST: 添加数据
PUT: 更新数据
DELETE:删除数据

集合名称和路由名称要一样
例如
集合名称user
路由名称 users

在服务器端使用restful风格

//获取信息
app.get('/users/:id',(req,res)=>{
  const id = req.params.id;
})
//删除信息
app.delete('/users/:id',(req,res)=>{
  const id = req.params.id;
})
//修改信息
app.put('/users/:id',(req,res)=>{
  const id = req.params.id;
})

优点

1. 更加语义化
2. 动词更多了(get post pull delete)
3. /user/:id

/users/:id
在客户端用req.params.id就能获得到id值**