jQuery中的ajax

 $('button').click(function () {

            //通过HHTP请求加载远程数据

            $.ajax({

                /* 异步 默认为true */

                /* false 表示同步 改同步渲染页面会出现白屏 */

                async: false,

                /* 是否设置浏览器的缓存功能

                   true 设置缓存

                   false 不设置缓存 每次请求都是新的请求 */

                cache:false,

                /* 请求的接口 */

                /* url: 'http://timemeetyou.com:8889/api/private/v1/login', */

                url:"./login.txt",

                /* 请求的方式post 有加密功能 */

                method: 'get',

                /* method: 'post', */

                /* 发送到服务器的数据 */

                data: {

                    username: 'admin',

                    password: '123456'

                },

                /* 预期服务器返回的数据类型 jaon jsonp */

                dataType:'json',

                /* 在一个jsonp请求中重写回调函数的名字 */

                /* 这里的fn需要和后台的代码对应 */

                jsonp:'fn',

                /* callbackFn是一个前端配置的 */

                jsonpCallback:'callbackFn',

                /* 请求成功后的回调函数 */

                success: function (res) {

                    /* success后面的方法里的形参res表示后台返回的数据 */

                    document.write(res);

                },

                /* 请求失败后的回调函数 */

                error:function(err){

                    document.write('请求失败');

                }

            })

        })

ajax练习

登录功能 

        $('#login').click(function () {

            $.post(url + 'login', { username: 'admin', password: '123456' }, function (res) {

                console.log(res);

                localStorage.token = res.data.token;

                $('button').slideUp('slow')

                /* 得到token后 */

                getUsers()

            })

        })

获取用户数据

        function getUsers() {

            $.ajax({

                url: url + 'users',

                headers: {

                    Authorization: localStorage.token

                },

                data: {

                    pagenum: 1,

                    pagesize: 30

                },

                success: function (res) {

                    console.log(res);

                    /* 插入现在的数据之前清空之前的数据 */

                    $('tbody').html('');

                    for (var i in res.data.users) {

                        $('tbody').append(

                            `

                       

                            ${res.data.users[i].username}

                            ${res.data.users[i].mobile}

                            ${res.data.users[i].email}

                            删除

                           

                        `

                        )

                    }

                }

            })

        }

        function del(id){

            $.ajax({

                url:url+'users/'+id,

                method:'delete',

                headers:{

                    Authorization: localStorage.token

                },

                success:function(res){

                    /* 出现提示 */

                    $('.msg').html(res.meta.msg)

                    /* 过3秒提示消失 */

                    setTimeout(function(){

                        $('.msg').html('')

                    },2000)

                }

            })

        }

增加用户

        $('#submit').click(function () {

            $.ajax({

                url: url + 'users',

                method: 'post',

                headers:{

                    Authorization: localStorage.token

                },

                data: {

                    username: $('#username').val(),

                    password: $('#password').val(),

                    email: $('#email').val(),

                    mobile: $('#mobile').val()

                },

                success:function(res){

                    console.log(res)

                    $('.msg').html(res.meta.msg)

                    setTimeout(function(){

                        $('.msg').html('')

                    },2000)

                    $('#username').val('')

                    $('#password').val('')

                    $('#email').val('')

                    $('#mobile').val('')

                    /* 更新最新的表格信息 */

                    getUsers();

                }

            })

        })