前端ajax异步请求

定义一个表格，表格边框是2
表格中tr：行；下图中绿色部分
td：标准单元格，包含数据；下图中蓝色部分
th：表头单元格，包含表头信息；下图中红色部分
在这里插入图片描述
tbody 是table的一个内嵌标签，（放数据体到table中的时候就用tbody），但是会更严谨，用tbody的id追加数据
定义一个loading图片，一个按钮（点击按钮时调用getInterfaceTest方法：请求方法），该按钮上图中可以看到
初始化方法隐藏图片
getInterfaceTest方法中：
url就是要请求的地址，就是controller的地址
发送ajax请求，包括
1 请求url请求地址
2 dataType请求的数据类型
3 type请求方法：请求的后端controller请求的接口是get请求这里就写get、是post这里就写post
什么时候该用get、什么时候该用post？
get是从别的地方获取数据
post是将数据推送到其他地方
4 data：预期服务器返回的数据类型，就是后端controller返回的类型
5 success:function(result)请求成功之后的回调方法，result就是后端controller返回的对象，这个result里有什么？
在这里插入图片描述
如上图，result返回的是json，result里有total、rows，可以用result.获取
rows又是一个json，rows里有interfaceId、testCaseId、testCaseName
用forEach遍历获取rows的值，forEach用第一个参数value获取值，回调方法中动态拼接，第一列是testCaseId，第二列是testCaseName，将拼接好的结果用tbody的id值interfaceBody追加到表格中，控制台打印结果
error:function (error)请求出错的回调方法，输出的是http的错误信息和状态码
beforeSend:function ()请求发送之前的回调方法，请求之前显示loading图片
complete:function ()请求之后的回调方法，不管请求成功或是失败都执行该方法，请求之后隐藏loading图片

script type="text/javascript" src="/lib/jquery/jquery-3.1.1.min.js"></script>

<table border="2">
<tr>
    <th>
        测试用例编号
    </th>
    <th>
        测试用例名称
    </th>
</tr>

<tbody id="interfaceBody"></tbody>
</table>
<img id="loading" style="width: 400px" height="300" src="/lib/img/QQ.jpg">

<input type="button" value="获取接口测试用例" onclick="getInterfaceTest()">

<script type="text/javascript">
$(function () {
    $("#loading").hide();

})
function getInterfaceTest() {
    var url="/MyBatisController/selectForPage";
    $.ajax({
        url:url,
        dataType:"json",
        type:"get",
        data:{
            pageNumber:1,
            pageSize:10
        },success:function(result){
            console.info(result);
            var total=result.total;
            var rows=result.rows;
            rows.forEach(function (value,index) {
                var testCaseId=value.testCaseId;
                var testCaseName=value.testCaseName;
                var tr= "<tr><td>"+testCaseId+"</td><td>"+testCaseName+"</td></tr>";
                $("#interfaceBody").append(tr);
            }),
                    console.info(result);
        },error:function (error) {
            console.info(error.status);
            console.info(error.responseText);
        },beforeSend:function () {
            $("#loading").show();
        },complete:function () {
            $("#loading").hide();
        }
    })
}
</script>

上述例子中forEach的回调方法第二个参数没有用到，可以不写，因为forEach是用第一个参数（值）获取遍历到的结果

请求链路
请求http://127.0.0.1:8080/jQuery/myjquery（该ftl的controller请求地址）——页面有个按钮——点击按钮执行MyBatisController/selectForPage（controller中获取分页的地址）——执行ajax请求——请求到后端分页的内部逻辑——返回数据——ajax接收到后端返回的数据——用jQuery的forEach遍历处理动态写入table表格

猜你喜欢