jQuery ajax 异步请求（企业常用）

$.ajax()-终极模式（企业常用）

作用：

jQuery对ajax的终极支持！！！

# 最高频使用的8个参数：
参数对象中的属性：
    1.url:字符串，表示异步请求的地址
    2.type：字符串，请求方式：get或post
    3.data：传递到服务器端的参数
        1、字符串："name=geng&age=18"
        2、js对象:
            {
                name:\'geng\',
                age:18
                csrf:
            }
    4.dataType：字符串，响应回来的数据的格式
        1.\'html\'
        2.\'xml\'
        3.\'text\'
        4.\'script\'
        5.\'json\'
        6.\'jsonp\' //有关跨域的响应格式
    5.success：回调函数，请求和响应成功时，回来执行的操作
    6.error：回调函数，请求或响应失败时，回来执行的操作
    7.beforeSend：回调函数，发送ajax请求之前，执行的操作，如：return false，则终止请求
    8.async:是否为异步请求，true为异步，false为同步

语法：

$.ajax({
    url:\'\',
    type:\'get\'/\'post\',
    data:{
        name:\'\',
        csrfmiddlewaretoken:$("[name=\'csrfmiddlewaretoken\']").val(),
    },
    dataType:\'json\',
    success:function () {
                        
    },
    error:function(){
        
    },
    beforeSend:function(){
        
    },
})

实例：

$("button").click(function(){
    $.ajax({
        url:"demo_test.txt",
        type:\'post\',
        
        data:{
        name:\'\',
        csrfmiddlewaretoken:$("[name=\'csrfmiddlewaretoken\']").val(),
        },
        
        dataType:\'json\',
        
        success:function(result){
        $("#div1").html(result);
        },
        
        beforeSend:function(){
        
        },
    });
});

beforeSend经典用法：

场景：用户注册
功能：
- 用户输入账号密码完毕
- 点击【提交】按钮完毕
- 在网络传输过程中，网速慢的情况下，显示动画效果，等待服务器响应
- 在网络传输过程中，网速慢的情况下，提交按钮变为灰色不可用状态，直到得到服务器响应

代码实现：

<head>
    // 引入jQuery
    <script type="text/javascript" src="{% static \'bootstrap-3.3.7/js/jquery-1.12.4.min.js\' %}"></script>
</head>

{# $.ajax()   #}
<body>
    <span id="loading" style="display: none">加载中...[我是动画]</span>
    <button id="btn">jquery ajax</button>

    <script>
        $(function () {
            $(\'#btn\').click(function () {
                $.ajax({
                    url: \'/ajax/jquery_ajax\',
                    type: \'post\',
                    data:{
                        csrfmiddlewaretoken: $("[name=\'csrfmiddlewaretoken\']").val(),

                    },
                    dataType:\'json\',
                    async:true,

                    success:function () {
                        // post 请求发送成功
                        $(\'#loading\').hide(3000); // 3秒内消失
                        // 弹框：登录成功
                        alert(\'登录成功\');

                        // 提交按钮改为可用状态
                        $(\'#btn\').removeAttr(\'disabled\');

                    },

                    error:function () {

                    },

                    beforeSend:function () {
                        // 发送前，do something
                        $(\'#loading\').show(); // 发送前，让等待元素span显示（show）

                        // 发送前，让button置灰，不可点击
                        $(\'#btn\').attr({disabled:\'disabled\'})

                    },
                })
            }) 
        })
    </script>
</body>

经典用法：异步获取用户列表

场景：异步刷新用户列表界面

实例：

<head>
    // 引入jQuery
    <script type="text/javascript" src="{% static \'bootstrap-3.3.7/js/jquery-1.12.4.min.js\' %}"></script>
</head>

<body>
    <button id="btn">show data</button>
    <thead>
        <tr>
            <th>name</th>
            <th>age</th>
        </tr>
    </thead>
    <tbody id="show"></tbody>

    <script>
        $(function () {
            $(\'#btn\').click(function () {
                $.ajax({
                    url: \'/ajax/jquery_show\',
                    type: \'get\',
                    dataType: \'json\',
                    async: true,
                    data: {},
                    success: function (data) {
                        var html = \'\';

                        $.each(data, function (i, obj) {
                           html += \'<tr>\';
                            html += \'<td>\' + obj.name + \'</td>\';
                            html += \'<td>\' + obj.age + \'</td>\';
                           html += \'</tr>\';
                        });
                        $(\'#show\').html(html);  // 在id= show的html标签显示用户信息
                    },

                    error: function () {

                    },

                    beforeSend: function () {

                    },
                })
            })
        })
    </script>
</body>