一：$.ajax()

1.$.ajax()方法概述

作用：发送Ajax请求。

$.ajax({
     type: 'get',
     url: 'http://www.example.com',
     data: { name: 'zhangsan', age: '20' },
     contentType: 'application/x-www-form-urlencoded',
     beforeSend: function () { 
         return false
     },
     success: function (response) {},
     error: function (xhr) {}
});

其他属性：

//$.Ajax默认把参数转换为字符串
{
     data: 'name=zhangsan&age=20'
 }
//发送json格式参数
{
     contentType: 'application/json'
 }
//我们将其转换成字符串，然后响应回json对象格式
JSON.stringify({name: 'zhangsan', age: '20'})

实例（细节含注释）：

Node服务器代码（含全部$.Ajax实例）

// 引入express框架
const express = require('express');
//引入path模块
const path = require('path');
//引入mongoose模块
const mongoose = require('mongoose');
//引入Joi模块
const joi = require('joi');
//引入接收post参数的bady-parser模块
const bodyParser = require('body-parser');
//搭建服务器
const app = express();


//实现静态页面访问功能
app.use(express.static(path.join(__dirname, 'public')));
//实现post请求参数的解析
app.use(bodyParser.urlencoded({ extended: false }));


//todo实现测试$.ajax功能
app.get('/test', (req, res) => {
    res.send({ name: 'zs', age: 30 })
});
app.post('/test', (req, res) => {
    res.send({ name: 'lisi', age: 32 })
});
//todo测试请求参数格式
app.post('/user', (req, res) => {
    console.log(req.body);
    res.send(req.body);
});
//todo测试jsonp请求
app.get('/jsonp', (req, res) => {
    const cb = req.query.cb;
    const data = cb + "({name:'cwen',age:18})";
    res.send(data);
    // res.jsonp({ name: 'ls', age: 19 })
});
//监听端口
app.listen(3000);
console.log('服务器启动成功，端口3000');

客户端代码：

<button id="btn">点击发送</button>
    <script src="/js/jquery.min.js"></script>
    <script>
        var params = {
            name: 'zs',
            age: 14
        };
        // 为按钮绑定事件
        $('#btn').click(function() {
            // 发送ajax请求
            $.ajax({
                //请求方式
                type: 'post',
                url: '/user',
                // 向服务器端发送请求参数
                //会被$.ajax转换成‘name=xiaohei&age=23’
                // data: {
                //     name: 'xiaohei',
                //     age: 23
                // },
                data: JSON.stringify(params),
                // 指定参数格式
                contentType: 'application/json',
                //在请求发送之前调用
                beforeSend: function() {
                    alert('请求即将发送')
                },
                //请求成功以后函数被调用
                success: function(response) {
                    //response为服务器端返回的数据
                    // 方法内部会自动将json字符串转换成json对象
                    console.log(response);
                },
                error: function(xhr) {
                    console.log(xhr);
                }
            });
        });
    </script>

用$.ajax发送jsonp请求

$.ajax({
    url: 'http://www.example.com',
    // 指定当前发送jsonp请求
    dataType: 'jsonp',
    // 修改callback参数名称
    jsonp: 'cb',
    // 指定函数名称
    jsonCallback: 'fnName',
    success: function (response) {} 
})

实例：

<button>发送</button>
    <script>
        function fn(response) {
            console.log(response);
        }
    </script>
    <script src="/js/jquery.min.js"></script>
    <script>
        $('button').on('click', function() {
            $.ajax({
                url: '/jsonp',
                // 向服务器端传递函数名字的参数名称(选填)
                jsonp: 'cb',
                //自定义接收响应的函数（选填,不建议）
                jsonpCallback: 'fn',
                // 代表要发送jsonp请求
                dataType: 'jsonp',
                // success: function(response) {
                //     console.log(response);
                // }
            })
        })
    </script>

2.serialize方法

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

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

serializeArray方法

作用：将表单中的数据转换成对象格式（封装后）
封装代码：

<form id="form">
        <input type="text" name="username">
        <input type="password" name="password">
        <input type="submit" value="提交">
    </form>
    <script src="js/jquery.min.js"></script>
    <script>
        $('#form').on('submit', function() {
            //将表单内容拼接成字符串类型的参数
            // var params = $(this).serialize();
            // console.log(params);
            var myinfo = serializeObject($(this));
            console.log(myinfo);
            return false;
        });

        //将表单输入内容转换成对象类型
        function serializeObject(obj) {
            //先定义一个空对象
            var result = {};
            // 将表单内容转换成数组
            var info = obj.serializeArray();
            // 循环数组，使数组变为可用的对象
            $.each(info, function(index, val) {
                result[val.name] = val.value;
            });
            //将处理结果返回到函数
            return result;
        }
    </script>

二： $.get() and $.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

官宣：纳米级进度条，使用逼真的涓流动画来告诉用户正在发生的事情！
下载路径：点击进入GitHub

<link rel='stylesheet' href='nprogress.css'/>
<script src='nprogress.js'></script>

NProgress.start();  // 进度条开始运动 
NProgress.done();   // 进度条结束运动

与ajax请求结合实例代码：

 // jQuery中全局事件
        // 进度条展示        
        //页面中ajax请求发送时触发
        $(document).on('ajaxStart', function() {
            NProgress.start();
        });
        // 页面中ajax请求完成时触发
        $(document).on('ajaxComplete', function() {
            NProgress.done();
        });

冲冲冲

下一篇：$.ajax案例（todo）

5：jQuery中的Ajax