【项目杂记】通过简易 AJAX 进行接口测试

虽然我们是后台开发人员，但是最基本的 ajax 一定是要会写的；比如某个接口你通过 postman 接口测试已经没问题了，但是前端人员非要说你这有问题，你就可以一个简单的 ajax 去说服他。

1.Ajax 一般格式

function test(){
   $.ajax({
            // 提交数据的类型 POST GET
            type:"POST",
            // 提交的 URL
            url:"testLogin.aspx",
            // 提交的数据
            data:{Name:"sanmao",Password:"sanmaoword"},
            // 返回数据的格式
            datatype: "html",//"xml", "html", "script", "json", "jsonp", "text".
            // 在请求之前调用的函数
            beforeSend:function(){$("#msg").html("logining");},
            // 成功返回之后调用的函数             
            success:function(data){
               $("#msg").html(decodeURI(data));            
                }   ,
            // 调用执行后调用的函数
            complete: function(XMLHttpRequest, textStatus){
               alert(XMLHttpRequest.responseText);
               alert(textStatus);
                //HideLoading();
            },
            // 调用出错执行的函数
            error: function(){
                //请求出错处理
            }         
         });

  }

2.Ajax 测试实例

在 SpringBoot 项目的 static 目录下新建一个 test.html，这样我们在浏览器直接就可以访问该页面，从浏览器控制台看到请求头和请求体

注：先要引入 jquery 的 js 包（jquery-3.3.1.min.js）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button type="button" onclick="test()">TEST</button>

    <script src="jquery-3.3.1.min%20.js"></script>
    <script>
        function test() {
            $.ajax({
                type:"POST",
                url:"http://39.105.136.112/code/phone",
                contentType: "application/json", // json
                data:JSON.stringify({"phone":"15389093292"}), // 转 json（内置函数）
                dataType: 'json',
                success:function (data) {
                    console.log(data);
                }
            })
        }
    </script>
</body>
</html>