$.ajax()方法概述

作用：发送Ajax请求

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

实例，发送请求

var params = {name:"zhangsan", age:30}
       $('#btn').on('click',function(){
           $.ajax({
               //请求方式 
               type: 'get',
               //请求地址
               url: 'http://localhost:8080/base',
               //向服务器端发送的请求参数
               //name=zhangsan&age=100
               // data:{
               //     name: 'zhangsan',
               //     age: 100
               // },
               // data: 'name=zhangsan&age=20',
               data: JSON.stringify(params),
               //指定参数的格式类型
               contentType: 'application/json',
               //在请求之前调用
               beforeSend: function(){
                   alert('请求即将发送')
                   //请求不会被发送
                   return false
               },
               //请求成功以后函数被调用
               success: function(response){
                   //response为服务器端返回的数据
                   //方法内部会自动将json字符串转换为json对象
                   console.log(response)
               },
               //请求失败以后函数被调用
               error: function(xhr){
                   console.log(xhr)
               }
           })
       })

serialize方法

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

<form id="form">
    <input type="text" name="username">
    <input type="password" name="password">
    <input type="submit" value="提交">
</form>
<script>
    $("#form").on('submit',function(){
        //将表单内容拼接成字符串类型的参数
        //var params = $('#form').serialize();
        //console.log(params);  //username=zhangsan&password=123456
       var params = serializeObject($(this))
       console.log(params);
        return false;  //组织表单默认提交行为
    })

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

    
</script>

封装serializeObject函数

作用：输入的内容转化为json格式

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

发送jsonp请求

<script>
       function fn(response){
           console.log(response)
       }
       $('#btn').on('click',function(){
           $.ajax({
               url:'/jsonp',
               //向服务器端传递函数名字的参数名称
               jsonp:'cp',
               jsonpCallback:'fn',
               //代表现在要发送的是jsonp请求
               dataType:'jsonp',
               success:function(response){
                   console.log(response)
               }
           })
       })
  </script>

$.get(),$.post()

$('#btn').on('click',function(){  //参数可写可不写
           $.get('http://localhost:8080/abc',{username:'张三',password:'123456'},function(response){
               console.log(response)
           })
           $.get('http://localhost:8080/test',function(response){
               console.log(response)
           })
          $.post('http://localhost:8080/abc',{username:'zhangsan',password:'abcdef'},function(){
              console.log(response)
          })
      })

全局事件ajaxStart，ajaxComplete

也可以通过beforeSend实现，但是那样太麻烦

//当页面中有ajax请求发送时触发
      $(document).on('ajaxStart', function(){
          console.log('start')
      })
      //当页面中有ajax请求完成时触发
      $(document).on('ajaxComplete',function(){
          console.log('complete')
      })

进度条Nprocess

引入对应的文件

1 2	`<link rel="stylesheet" href="css/nprogress.css"> <script src="js/nprogress.js"></script>`

编写代码：

//当页面中有ajax请求发送时触发
      $(document).on('ajaxStart', function(){
         NProgress.start()  //进度条开始运动
      })
      //当页面中有ajax请求完成时触发
      $(document).on('ajaxComplete',function(){
          NProgress.done()  //进度条结束运动
      })