AJAX基础

Posted 2021-02-18 liu0721

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了AJAX基础相关的知识，希望对你有一定的参考价值。

一. $.ajax()方法概述

作用：发送Ajax请求

 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 });

作用：发送jsonp请求

 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             })

二.serialize方法

作用：将表单中的数据自动拼接成字符串类型的参数

var params = $(‘#form‘).serialize();
// name=zhangsan&age=30

三.$.get()、$.post()方法概述

作用：$.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) {})

　四.jQuery中Ajax全局事件

1.全局事件

只要页面中有Ajax请求被发送，对应的全局事件就会被触发
.ajaxStart() // 当请求开始发送时触发
.ajaxComplete() // 当请求完成时触发

2.NProgress
官宣：纳米级进度条，使用逼真的涓流动画来告诉用户正在发生的事情
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             })