AJAX基础(三)
2021-02-18 07:19
标签：事件 font 模型 全局 function json对象 highlight 删除 progress 一. $.ajax()方法概述 作用：发送Ajax请求 作用：发送jsonp请求 二.serialize方法 作用：将表单中的数据自动拼接成字符串类型的参数 三.$.get()、$.post()方法概述 四.jQuery中Ajax全局事件 1.全局事件 只要页面中有Ajax请求被发送，对应的全局事件就会被触发 2.NProgress 五.RESTful 风格的 API RESTful API 概述 一套关于设计请求的规范 RESTful API 的实现 六.XML 基础 XML是什么 XML 的全称是 extensible markup language，代表可扩展标记语言，它的作用是传输和存储数据。 XML DOM XML DOM 即 XML 文档对象模型，是 w3c 组织定义的一套操作 XML 文档对象的API。浏览器会将 XML 文档解析成文档对象模型 AJAX基础(三) 标签：事件 font 模型 全局 function json对象 highlight 删除 progress 原文地址：https://www.cnblogs.com/liu0721/p/12943599.html 1 $.ajax({
2 type: ‘get‘, //请求方式
3 url: ‘http://www.example.com‘,//请求地址
4 data: { name: ‘zhangsan‘, age: ‘20‘ },//或{data:‘name=zhangsan&age=20‘} //请求参数
5 contentType: ‘application/x-www-form-urlencoded‘,//参数格式 也可以是{ontentType: ‘application/json‘},参数对应json字符串格式JSON.stringify({name: ‘zhangsan‘, age: ‘20‘})
6 beforeSend: function () {
7 return false
8 },
//请求成功后函数被调用
9 success: function (response) {},//方法内部会自动将json字符串转换为json对象
10 error: function (xhr) {}
11 }); 1 $.ajax({
2 url: ‘/jsonp‘,
3 // 向服务器端传递函数名字的参数名称
4 jsonp: ‘cb‘,
5 jsonpCallback: ‘fn‘,
6 // 代表现在要发送的是jsonp请求
7 dataType: ‘jsonp‘,
8 success: function (response) {
9 console.log(response)
10 }
11 })
var params = $(‘#form‘).serialize();
// name=zhangsan&age=30
作用：$.get方法用于发送get请求，$.post方法用于发送post请求$.get(‘http://www.example.com‘, {name: ‘zhangsan‘, age: 30}, function (response) {})
$.post(‘http://www.example.com‘, {name: ‘lisi‘, age: 22}, function (response) {})
.ajaxStart() // 当请求开始发送时触发
.ajaxComplete() // 当请求完成时触发
官宣：纳米级进度条，使用逼真的涓流动画来告诉用户正在发生的事情
NProgress.start(); // 进度条开始运动
NProgress.done(); // 进度条结束运动
1 // 当页面中有ajax请求发送时触发
2 $(document).on(‘ajaxStart‘, function () {
3 NProgress.start()
4 })
5
6 // 当页面中有ajax请求完成时触发
7 $(document).on(‘ajaxComplete‘, function () {
8 NProgress.done()
9 })
