jquery Ajax异步请求详解新手提高篇

首先我们要搞清楚为Ajax是个什么技术？有什么作用？为啥要使用它？

1、 Ajax是一个异步请求服务器的技术

2、 作用很大，可以在不刷新整个页面的前提下更新局部页面布局更新数据

3、 就是因为异步操作，可以不刷新整个页面即可更新数据，大大提高了用户体验，所以这个Ajax技术是非常流行的

4、 我个人对Ajax的理解，就好像我们出去串门 、走亲戚；去的时候带着礼物，回来的时候我们亲朋好友给回赠礼物。礼尚往来。 Ajax就很像这个场景，去服务器请求的时候带着参数 如 获取用户资料，可能需要带着uid、token等参数，等请求完成返回的时候，带回来服务器抛给我们的数据（用户资料）一般是json格式。大家不陌生吧 ，json 是数据交换传输的通用格式 也是非常流行的，不了解的一定要多看看json相关的文档手册

Ajax 异步请求是基于事件的，也就是它自己不会执行，需要一个事件触发 比如 onclick 点击事件 onfocus 获取焦点事件 或者onchange 元素改变事件 等 ，事件吊起 事件内可以发起一个 异步请求到服务器

下面是一个栗子 GET

$(document).ready(function() {
    // 点击事件
    $('#subBtn').click(function() {
        $.ajax({
           url:"请求地址",
           data:{id:99,name:'efngzb'},// 携带的参数
           methods:"GET", // 请求方式 最常用  GET POST 等
           success:function(res){
                 console.log(success);
                 // 进一步处理业务逻辑
           },
           fail:function(err){
                 console.log(err);
           }
        });
        // 或者
	    $.get(url,{},function(res){
           // 成功
           console.log(res);
        });
	});
});

下面是一个栗子 POST

$(document).ready(function() {
    // 点击事件
    $('#subBtn').click(function() {
        $.ajax({
           url:"请求地址",
           data:{id:99,name:'efngzb'},// 携带的参数
           methods:"POST", // 请求方式 最常用  GET POST 等
           success:function(res){
                 console.log(success);
                 // 进一步处理业务逻辑
           },
           fail:function(err){
                 console.log(err);
           }
        })
	});
    // 或者
	$.post(url,{},function(res){
       // 成功
       console.log(res);
    })
});

上面这几种写法都是需要引入jQuery的，拿到服务器返回的数据之后，那么就是通过jQuery的一些函数 方法 将数据渲染到页面上，如一些常用的函数 attr() append() html() val() 等等

今天就给大家总结到这里了希望初学者，新手前端研发人员看了之后有所收获