Jquery 中封装的Ajax和封装函数serializeObject和nprogress 进度条插件

Jquery 中的Ajax

1.$.ajax基本使用

 <button id="btn">发送请求</button>
    <script src="/js/jquery.min.js"></script>
    <script>
        $('#btn').on('click',function(){
            //调用这个方法时需要传递一个参数 (对象),这个对象的作用配置ajax
            $.ajax({
                //1.请求方式
                type:'post',
                //http://localhost:3000可以省略,自动补全
                url:'/base',
                //请求成功以后函数被调用
                success:function(response){
                    //response为服务器端返回的数据
                    //方法内部回自动调用json字符串转换为json对象
                    console.log(response);
                },
                //请求失败以后函数调用    参数是ajax对象,里边很多信息
                error:function(xhr){
                    console.log(xhr)
                }
            })
        })
    
    </script>

2.$.ajax传递请求参数

<button id="btn">发送请求</button>
    <script src="/js/jquery.min.js"></script>
    <script>
        var params = {name:'xiaoming',age:300};
        $('#btn').on('click',function(){
            $.ajax({
                //请求方式
                type:'get',
                //请求地址
                url:'/user',
                //向服务器端发送的请求参数
                // // 内部会转换为字符串    name=zhangsan&age=290
                // data:{
                //     name:'zhangsan',
                //     age:290
                // },
                //第二种方法
                // data:'name=zhangsan&age=290',
                // 把上边定义的params对象转换为json字符串
                data:JSON.stringify(params),
                // 指定参数格式类型
                //如果参数格式为json格式,那么data里边传递json类型参数
                contentType:'application/json',
                
                //请求发送之前被调用
                beforeSend:function(){
                    alert('请求即将发送');
                    //请求不会被发送
                    return false;
                },

                //请求成功以后函数被调用
                success:function(response){
                    //response为服务器端返回的数据
                    //方法内部会自动将json字符串转换为json对象
                    console.log(response);
                }
            })
        })
    
    </script>

3.封装函数serializeObject

 //  将表单中用户输入的内容转换为对象类型
        function serializeObject(obj) {
            //处理结果对象
            var result = {};
            // serializeArray会将表单用户输入的内容转换为数组
            // [{name:'username',value='用户输入的内容'},{name='password',value="123456"}]
            var params = obj.serializeArray();
            //循环数组  将数组转化为对象类型
            $.each(params, function (index, value) {
                result[value.name] = value.value;
            })
            //将处理结果返回到函数外部
            return result;
        }

4.发送jsonp请求

		$.ajax({
                url:'/jsonp',
                //向服务器端传递函数名字的参数名称
                jsonp:'cb',
                //不想调用success成功后的函数,自己传入一个函数,在外边声明函数
                jsonpCallback:'fn',

                //代表现在要发送的是jsonp请求
                dataType:'jsonp',
                // success:function(response){
                //     console.log(response);
                // }
            })

5.单独发送get或post请求

			 $.get('/base', 'name=zhangsan&age=30', function (response) {
			 	console.log(response)
			 })
			
			$.post('/base','name=zhangsan&age=30', function (response) {
				console.log(response)
			})

6.全局事件

只要页面中有Ajax请求被发送，对应的全局事件就会被触发

.ajaxStart()     // 当请求开始发送时触发
.ajaxComplete()  // 当请求完成时触发

nprogress 进度条插件

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

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

RESTful 风格的API

RESTful API 概述

一套关于设计请求的规范。

GET	POST	PUT	DELETE
获取数据	添加数据	更新数据	删除数据