JQuery模式下的Ajax 及 在项目中JQuery模式下Ajax的应用

上一篇文章介绍了原生Ajax的编写及每一步代码的作用

这篇文章就来介绍一下JQuery下的Ajax的用法 以及 一般在项目中的用法

直接上代码

$.ajax({
            // 数据提交类型
            type: 'get',
            // 数据提交地址
            url: 'http://47.100.227.25:3000/books/queryall',
            // 所需传的数据
            data:{
             
            },
            // 数据提交成功响应后需要执行的内容
            success: function (result) {
            
            },
            // 数据提交失败响应后需要执行的内容，通常是错误提示
            error: function (err) {
                console.log(err)
            }
        })

提交类型

数据提交类型有15种：get、post、put、patch、delete、copy、head、options、link、unlink、purge、lock、unlock、propfind、view

在项目中的用法

通常在项目中，后端会给前端一个接口文档，如下：

这个接口是用来进行用户登录验证的。
请求路径和请求方法就是上面JQuery下Ajax中的url和type；
请求参数就是JQuery下Ajax中的data；
相应参数会存储在JQuery下Ajax中success方法的result参数中，可被调用。

具体示意如下：

$.ajax({
                type: 'post',
                url: 'http://47.100.227.25:3000/users/login',
                data: {
                    userpwd: $('#password').prop('value'),
                    username: $('#username').prop('value'),
                },
                success: function (result) {
                    // 如果成功响应参数，则跳转页面
                    if (result.data.length == 1) {
                        window.location.href='./library.html'
                    }
                },
                error: function (err) {
                    console.log(err)
                }
            })

响应回来的数据可以在success中通过打点方式调用，例如：

success: function (result) {
     console.log(result[0].username)
            },