Ajax笔记
定制化开发资源的请求方式
定制化开发客户端请求服务器时，定制化开发请求的方式有很多种，定制化开发最常见的两种请求方式分别为 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])- 1
$.get()发起不带参数的请求
使用 $.get() 函数发起不带参数的请求时，直接提供请求的 URL 地址和请求成功之后的回调函数即可
$.get('http://www.liulongbin.top:3006/api/getbooks', function(res) { console.log(res) // 这里的 res 是服务器返回的数据})- 1
- 2
- 3
$.get()发起带参数的请求
使用 $.get() 函数发起带参数的请求时
$.get('http://www.liulongbin.top:3006/api/getbooks', { id: 1 }, function(res) { console.log(res)})- 1
- 2
- 3
三、$.post()函数的语法
jQuery 中 $.post() 函数的功能单一，专门用来发起 post 请求，从而向服务器提交数据。
$.post(url, [data], [callback])- 1
$.post()向服务器提交数据
$.post( 'http://www.liulongbin.top:3006/api/addbook', // 请求的URL地址 { bookname: '张三传', author: '张三', publisher: '张三出版社' }, // 提交的数据 function(res) { // 回调函数 console.log(res) })- 1
- 2
- 3
- 4
- 5
- 6
- 7
四、$.ajax()函数的语法
相比于 $.get() 和 $.post() 函数，jQuery 中提供的 $.ajax() 函数，是一个功能比较综合的函数，它允许我们对 Ajax 请求进行更详细的配置。
$.ajax({ type: '', // 请求的方式，例如 GET 或 POST url: '', // 请求的 URL 地址 data: { },// 这次请求要携带的数据 success: function(res) { } // 请求成功之后的回调函数})- 1
- 2
- 3
- 4
- 5
- 6
使用$.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) }})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
使用$.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) }})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
五、通过Ajax提交表单数据
1、监听表单提交事件
在 jQuery 中，可以使用如下两种方式，监听到表单的提交事件：
$('#form1').submit(function(e) { alert('监听到了表单的提交事件')})$('#form1').on('submit', function(e) { alert('监听到了表单的提交事件')})- 1
- 2
- 3
- 4
- 5
- 6
- 7
2、阻止表单默认提交行为
当监听到表单的提交事件以后，可以调用事件对象的 event.() 函数，来阻止表单的提交和页面的跳转
$('#form1').submit(function(e) { // 阻止表单的提交和页面的跳转 e.preventDefault()})$('#form1').on('submit', function(e) { // 阻止表单的提交和页面的跳转 e.preventDefault()})- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
3、快速获取表单中的数据
serialize()函数
- 为了简化表单中数据的获取操作，jQuery 提供了 serialize() 函数
$(selector).serialize()- 1
-
()函数的好处：可以一次性获取到表单的所有的数据
-
serialize()函数示例
<form id="form1"> <input type="text" name="username" /> <input type="password" name="password" /> <button type="submit">提交</button></form>$('#form1').serialize()// 调用的结果：// username=用户名的值&password=密码的值- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
注意：在使用 serialize() 函数快速获取表单数据时，必须为每个表单元素添加 name 属性！
六、Axios快速入门
1、引入Axios的js文件
<script src="js/axios-0.18.0.js"></script>- 1
2、使用Axios发送请求，并获取响应结果
axios({ method:"get", url:"--------" }).then(function (resp){ alert(resp.data); })- 1
- 2
- 3
- 4
- 5
- 6
axios({ method:"post", url:"--------", data:"uaername=wangkay" }).then(function (resp){ alert(resp.data); })- 1
- 2
- 3
- 4
- 5
- 6
- 7
3、方式别名
- 发送get请求
axios.get("url") .then(function (resp){ alert(resp.data); });- 1
- 2
- 3
- 4
- 发送post请求
axios.get("url","参数") .then(function (resp){ alert(resp.data); });- 1
- 2
- 3
- 4
七、JSON
1、概念
- JavaScript Object Notation。---- JavaScript对象表示法
- 由于其语法简单，层次结构鲜明，现多用于作为数据载体，在网络中进行数据传输
2、JSON基础语法
- 定义
var 变量名={ "key1":value1, "key2",value2, ...};- 1
- 2
- 3
- 4
- 5
value的数据类型为：
数字（整型或浮点型）
字符串（在双引号中）
逻辑值（true或false）
数组（在方括号中）
对象（在花括号中）
null
- 获取值
<script> //定义JSON var json = { "name":"wangkay", "age":"22", "addr":["芜湖","安庆"] }; //获取值 alert(json.name); </script>- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
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>- 1
- 2
- 3
- 4
- 5
- Java对象转JSON
String jsonStr = JSON，toJSONString(obj);- 1
- JSON字符串转Java对象
User user = JSON.parseObject(jsonStr,User.class);- 1