Ajax、Axios和JSON

---

资源的请求方式

客户端请求服务器时，请求的方式有很多种，最常见的两种请求方式分别为 get 和 post 请求。

• get 请求通常用于获取服务端资源（向服务器要资源）
  例如：根据 URL 地址，从服务器获取 HTML 文件、css 文件、js文件、图片文件、数据资源等

• post 请求通常用于向服务器提交数据（往服务器发送资源）
  例如：登录时向服务器提交的登录信息、注册时向服务器提交的注册信息、添加用户时向服务器提交的用户信息等各种数据提交操作

一、概念

Ajax的全称是Asynchronous JavaScript And XML（异步 JavaScript和XML）
通俗的理解：在网页中利用 XMLHttpRequest 对象和服务器进行数据交互的方式，就是Ajax。

1、Ajax作用

• Ajax能让我们轻松实现网页与服务器之间的数据交互。
• 搜索提示：当输入搜索关键字时，通过 ajax 的形式，动态加载搜索提示列表
• 数据分页显示：当点击页码值的时候，通过 ajax 的形式，根据页码值动态刷新表格的数据
• 数据的增删改查：数据的添加、删除、修改、查询操作，都需要通过 ajax 的形式，来实现数据的交互

2、jQuery中的Ajax

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

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

• $.get()：获取数据
• $.post()：提交数据
• $.ajax()：可以获取数据也可以提交数据

二、$.get()函数的语法

jQuery 中 $.get() 函数的功能单一，专门用来发起 get 请求，从而将服务器上的资源请求到客户端来进行使用。
$.get() 函数的语法如下：

$.get(url, [data], [callback])

$.get()发起不带参数的请求

使用 $.get() 函数发起不带参数的请求时，直接提供请求的 URL 地址和请求成功之后的回调函数即可

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

$.get()发起带参数的请求

使用 $.get() 函数发起带参数的请求时

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

三、$.post()函数的语法

jQuery 中 $.post() 函数的功能单一，专门用来发起 post 请求，从而向服务器提交数据。

$.post(url, [data], [callback])

$.post()向服务器提交数据

$.post(
   'http://www.liulongbin.top:3006/api/addbook', // 请求的URL地址
   { bookname: '张三传', author: '张三', publisher: '张三出版社' }, // 提交的数据
   function(res) { // 回调函数
      console.log(res)
   }
)

四、$.ajax()函数的语法

相比于 $.get() 和 $.post() 函数，jQuery 中提供的 $.ajax() 函数，是一个功能比较综合的函数，它允许我们对 Ajax 请求进行更详细的配置。

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

使用$.ajax()发起GET请求

使用 $.ajax() 发起 GET 请求时，只需要将 type 属性的值设置为 ‘GET’ 即可：

$.ajax({
   type: 'GET', // 请求的方式
   url: 'http://www.liulongbin.top:3006/api/getbooks',  // 请求的 URL 地址
   data: { id: 1 },// 这次请求要携带的数据
   success: function(res) { // 请求成功之后的回调函数
       console.log(res)
   }
})

使用$.ajax()发起POST请求

使用 $.ajax() 发起 POST 请求时，只需要将 type 属性的值设置为 ‘POST’ 即可：

$.ajax({
   type: 'POST', // 请求的方式
   url: 'http://www.liulongbin.top:3006/api/addbook',  // 请求的 URL 地址
   data: { // 要提交给服务器的数据
      bookname: '水浒传',
      author: '施耐庵',
      publisher: '上海图书出版社'
    },
   success: function(res) { // 请求成功之后的回调函数
       console.log(res)
   }
})

五、通过Ajax提交表单数据

1、监听表单提交事件

在 jQuery 中，可以使用如下两种方式，监听到表单的提交事件：

$('#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()函数

• 为了简化表单中数据的获取操作，jQuery 提供了 serialize() 函数

$(selector).serialize()

• serialize()函数的好处：可以一次性获取到表单的所有的数据

• serialize()函数示例

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

$('#form1').serialize()
// 调用的结果：
// username=用户名的值&password=密码的值

注意：在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加 name 属性！

六、Axios快速入门

1、引入Axios的js文件

<script src="js/axios-0.18.0.js"></script>

2、使用Axios发送请求，并获取响应结果

    axios({
      method:"get",
      url:"--------"
    }).then(function (resp){
      alert(resp.data);
    })

    axios({
      method:"post",
      url:"--------",
      data:"uaername=wangkay"
    }).then(function (resp){
      alert(resp.data);
    })

3、Axios请求方式别名

• 发送get请求

    axios.get("url")
            .then(function (resp){
              alert(resp.data);
            });

• 发送post请求

    axios.get("url","参数")
            .then(function (resp){
              alert(resp.data);
            });

七、JSON

1、概念

• JavaScript Object Notation。---- JavaScript对象表示法
• 由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输

2、JSON基础语法

• 定义

var 变量名={
	"key1":value1,
	"key2",value2,
	...
};

value的数据类型为：
数字（整型或浮点型）
字符串（在双引号中）
逻辑值（true或false）
数组（在方括号中）
对象（在花括号中）
null

• 获取值

  <script>
    //定义JSON
    var json = {
      "name":"wangkay",
      "age":"22",
      "addr":["芜湖","安庆"]
    };

    //获取值
    alert(json.name);
  </script>

3、JSON数据和Java对象的转换

• Fastjson是阿里巴巴提供的一个Java语言编写的高性能功能完善的JSON库，是目前Java语言中最快的JSON库，可以实现Java对象和JSON字符串的相互转换。

Fastjso的使用

• 导入坐标

    <dependency>
      <groupId>com.alibaba</groupId>
      <artifactId>fastjson</artifactId>
      <version>1.2.47</version>
    </dependency>

• Java对象转JSON

String jsonStr = JSON，toJSONString(obj);

• JSON字符串转Java对象

User user = JSON.parseObject(jsonStr,User.class);