SSM(2)ajax的入门使用

配置jsp页面 ##
（自己配置好ui

1.引入jqery,bootstrap框架 （有顺序行

`<!-- 引入jquery --><script src="${PATH}/static/js/jquery-3.2.1.min.js"></script><!-- 引入前端框架bootstrap --><link href="${PATH}/static/bootstrap-3.3.7-dist/cssbootstrap.min.css"rel="stylesheet"><script src="${PATH}/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

2跳转页面的函数

<script>toPageNumber(1);  //自动跳转到1页面function toPageNumber(pageNumber) {    $(function() {        $.ajax({            url : "${PATH}/getInforsByJson",   //请求的controller路径            data : "pageNumber=" + pageNumber,            type : "GET",                      //请求的方法            success : function(result) {                       buildInforTable(result);       //利用jqery重构table                buildPageInfor(result);        //重构infor信息                buildPageNav(result)           //重构跳转的nav按钮            }        });    });}

知识点：ajax模板格式

$(function() {             $.ajax({            url : "controller",               data : "请求的数据",            type : "发送类型",                                  success : function(result) {                       返回数据为result            }        });    });

3.建立table ,加入result的信息

function buildInforTable(result) {    //清空请求  ajax局部刷新    $("#inforsTable tbody").empty();    var infors = result.map.pageInfo.list;    //每个下标   item为魅族的信息    $.each(infors, function(index, item) {        //利用jqrury制造每一个td信息        var id = $("<td></td>").append(item.id);        var name = $("<td></td>").append(item.name);        var email = $("<td></td>").append(item.email);        var password = $("<td></td>").append(item.password);        var prefessionid = $("<td></td>").append(item.prefessionid);        //构建button按钮        var editButton = $("<button></button>").addClass(                "btn btn-primary btn-sm").append(                $("<span></span>").addClass("glyphicon glyphicon-pencil"))                .append("编辑");        var deleteButton = $("<button></button>").addClass(                "btn btn-danger btn-sm").append(                $("<span></span>").addClass("glyphicon glyphicon-trash"))                .append("刪除");        var buttonTd = $("<td></td>").append(editButton).append(                deleteButton);        $("<tr></tr>").append(id) //因为$("<><>")是原类型返回so可以用链式插入        .append(name).append(password).append(email).append(prefessionid)                .append(buttonTd).appendTo("#inforsTable tbody");        //插入的f2        /* $("#inforsTable tbody").append($("<tr></tr>")          .append(id)        .append(name)        .append(password)        .append(email)        .append(prefessionid)        .append(buttonTd)) */    })}  

知识点：
1. (“#inforsTable tbody”).empty(); 不清空会造成每次的add添加重叠  
2..each(infors, function(index, item) {}遍历查询函数 infors是list或者map的一个节点元素
3. ("<td></td>").append()会向tr元素插入信息可以是新的(“<><>”) 可以是var类型
可以是字符串 可以连续的append (原因返回类型为原来类型 so可以链式插入
4. ("#id1").appendTo((“#id2”)) 等同于("#id1").append((“#id2”))