Ajax 学习笔记

1、Ajax 基础认识

• Ajax

在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是 Ajax 。Ajax 可以实现网页与服务器之间的数据交互

• 网页请求数据

如果在网页中请求服务器上的数据资源，需要用到XMLHttpRequest 对象，XMLHttpRequest（简称xhr）是浏览器提供的 js 成员。

用法：

var xhrObj = new XMLHttpRequest()

• 资源请求方式

get请求：获取服务器端资源

post请求：向服务器提交数据

• jQuery 中的 Ajax

浏览器中提供的 XMLHttpRequest 用法比较复杂，所以 jQuery 对 XMLHttpRequest进行封装，提供了一系列相关的函数，极大地降低了 Ajax 的使用难度

jQuery 中发起 Ajax 请求最常用的三个方法如下：

$.get()   请求数据
$.post()  提交数据
$.ajax()  可提交可请求

1. $.get() 函数 / $.post() 函数

语法：$.get( url, [data], [callback]) , $.post( url, [data], [callback])

带参数：

$.get('http://www.liulongbin.top:3006/api/getbooks', {
    
id: 1 }, function(res) {
   
    console.log(res)
})

不带参数：

$.get('http://www.liulongbin.top:3006/api/getbooks', function(res) {
   
    console.log(res) // 这里的 res 是服务器返回的数据
})

参数：

参数名	类型	是否必选	说明
url	string	是	要请求的资源地址
data	object	否	请求资源期间要携带的参数
callback	function	否	请求成功时的回调函数

• $.ajax() 函数

语法：

$.ajax({
   
   type: '', // 请求的方式，例如 GET 或 POST
   url: '',  // 请求的 URL 地址
   data: {
    },// 这次请求要携带的数据
   success: function(res) {
    } // 请求成功之后的回调函数
})

• 接口

使用 Ajax 请求数据时，被请求的 URL 地址，就叫做数据接口（简称接口）。同时，每个接口必须有请求方式。

• 接口检测工具 PostMan

PostMan 官网

使用步骤：

（1）选择请求的方式
（2）填写请求的URL地址
（3）填写请求的参数
（4）点击 Send 按钮发起 GET 请求
（5）查看服务器响应的结果

• 接口文档

概念：

接口文档，顾名思义就是接口的说明文档，它是我们调用接口的依据。好的接口文档包含了对接口URL，参数以及输出内容的说明，我们参照接口文档就能方便的知道接口的作用，以及接口如何进行调用。

组成部分：

2、form 表单与模板引擎

2.1 form 表单

• 概念

  表单在网页中主要负责数据采集功能。HTML中的<form>标签，就是用于采集用户输入的信息，并通过<form>标签的提交操作，把采集到的信息提交到服务器端进行处理。

• 组成

<form>    // 表单标签 <form>
          // 表单域，包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等。
    <input type="text" name="email_or_mobile" />
    <input type="password" name="password" />
    <input type="checkbox" name="remember_me" checked />
         // 表单按钮
    <button type="submit">提交</button>
</form>

• <form> 标签属性

<form>标签的属性则是用来规定如何把采集到的数据发送到服务器

（1）target 属性值：

（2）method

method 属性用来规定以何种方式把表单数据提交到 action URL。它的可选值有两个，分别是 get 和 post。
默认情况下，method 的值为 get，表示通过URL地址的形式，把表单数据提交到 action URL。

（3）enctype

enctype 属性用来规定在发送表单数据之前如何对数据进行编码
在涉及到文件上传的操作时，必须将 enctype 的值设置为 multipart/form-data。

2.2 通过 Ajax 提交表单数据

通过 Ajax 提交表单数据可以解决两个问题：

<form>表单同步提交后，整个页面会发生跳转，跳转到 action URL 所指向的地址，用户体验很差。

<form>表单同步提交后，页面之前的状态和数据会丢失。

• 步骤

在这里插入代码片

1. 监听表单提交事件

两种方式：

$('#form1').submit(function(e) {
   
   alert('监听到了表单的提交事件')
})

$('#form1').on('submit', function(e) {
   
   alert('监听到了表单的提交事件')
})

2. 阻止表单默认提交行为

调用事件对象的 event.preventDefault() 函数，来阻止表单的提交和页面的跳转

$('#form1').submit(function(e) {
   
   // 阻止表单的提交和页面的跳转
   e.preventDefault()
})

$('#form1').on('submit', function(e) {
   
   // 阻止表单的提交和页面的跳转
   e.preventDefault()
})

3. 快速获取表单中的数据

serialize()函数可以一次性获取表单中的所有数据，但必须为每个表单元素添加 name 属性！

$(selector).serialize()

示例：

<form id="form1">
    <input type="text" name="username" />
    <input type="password" name="password" />
    <button type="submit">提交</button>
</fom>

// 调用的结果：username=用户名的值&password=密码的值

2.3 模板引擎

• 概念

根据程序员的模板结构和数据，自动生成一个完整的 HTML 页面

• 作用

  （1）减少了字符串的拼接操作
  （2）使代码结构更清晰
  （3）使代码更易于阅读与维护
  

• art-template 模板引擎

下载链接后，鼠标右键，选择“链接另存为”，将 art-template 下载到本地，然后，通过 <script> 标签加载到网页上进行使用

下载地址：art-template 模板引擎

1. 使用步骤

   （1）导入 art-template
   （2）定义数据
   （3）定义模板
   （4）调用 template 函数
   （5）渲染HTML结构

2. art-template 标准语法

art-template 提供了 { { }} 这种语法格式，在 { { }} 内可以进行变量输出，或循环数组等操作，这种 { { }}语法在art-template 中被称为标准语法。

（1）输出

在 { { }} 语法中，可以进行变量的输出、对象属性的输出、三元表达式输出、逻辑或输出、加减乘除等表达式输出。

{
   {
   value}}
{
   {
   obj.key}}
{
   {
   obj['key']}}
{
   {
   a ? b : c}}
{
   {
   a || b}}
{
   {
   a + b}}

（2）原文输出

如果要输出的 value 值中，包含了 HTML 标签结构，则需要使用原文输出语法，才能保证 HTML 标签被正常渲染。

{
   {
   @ value }}

（3）条件输出

{
   {
   if value}} 按需输出的内容 {
   {
   /if}}

{
   {
   if v1}} 按需输出的内容 {
   {
   else if v2}} 按需输出的内容 {
   {
   /if}}

（4）循环输出

在 { { }} 内，通过 each 语法循环数组，当前循环的索引使用 $index 进行访问，当前的循环项使用 $value 进行访问

{
   {
   each arr}}
    {
   {
   $index}