ssm ajax加json,ssm项目之Ajax请求返还json解析(示例代码)

员工列表

SSM-CRUD

新增

删除

#empNamegenderemaildepartment操作

$(function(){

to_page(1);

});

function to_page(pn) {

$.ajax({

url:"${APP_PATH}/emps",

data:"pn="+pn,

type:"GET",

success:function(result){//解析数据并显示员工数据

build_emps_table(result);//显示分页信息

build_page_info(result);//显示分页条数据

build_page_nav(result);

}

});

}//显示员工信息

function build_emps_table(result) {//清空数据

$("#emps_table tbody").empty();

var emps=result.extend.pageInfo.list;

$.each(emps, function(index, item) {

var checkBoxTd= $("

");

var empIdTd= $("

").append(item.empId);

var empNameTd= $("

").append(item.empName);

var genderTd= $("

").append(item.gender==\'M\'?\'男\':\'女\');

var emailTd= $("

").append(item.email);

var deptNameTd= $("

").append(item.department.deptName);/*新增

删除

*/var editBtn= $("").addClass("btn btn-primary btn-sm edit_btn").append($(""))

.addClass("glyphicon glyphicon-pencil").append("编辑");

editBtn.attr("edit-id", item.empId);

var delBtn= $("").addClass("btn btn-danger btn-sm delete_btn").append($(""))

.addClass("glyphicon glyphicon-trash").append("删除");

delBtn.attr("del-id", item.empId);

var btnTd= $("

").append(editBtn).append(" ").append(delBtn);

$("

").append(checkBoxTd)

.append(empIdTd)

.append(empNameTd)

.append(genderTd)

.append(emailTd)

.append(deptNameTd)

.append(btnTd)

.appendTo("#emps_table tbody");

});

}//显示分页信息

function build_page_info(result) {//清空数据

$("#page_info_area").empty();//alert("hello");

$("#page_info_area").append("当前 " +result.extend.pageInfo.pageNum+ " 页，总 " +result.extend.pageInfo.pages+ " 页，总 " +result.extend.pageInfo.total+ " 条记录");

totalRecord=result.extend.pageInfo.total;

currentPage=result.extend.pageInfo.pageNum;

}//显示分页条，点击分页要有动作

function build_page_nav(result) {//清空数据

$("#page_nav_area").empty();//page_nav_area

var ul = $("

").addClass("pagination");

var firstPageLi= $("

").append($(" ").append("首页").attr("href","#"));

var prePageLi= $("

").append($(" ").append("«"));if(result.extend.pageInfo.hasPreviousPage == false) {

firstPageLi.addClass("disabled");

prePageLi.addClass("disabled");

}else{//为元素添加点击翻页事件//添加首页、前一页的点击

firstPageLi.click(function() {

to_page(1);

});

prePageLi.click(function() {

to_page(result.extend.pageInfo.pageNum- 1);

});

}

var nextPageLi= $("

").append($(" ").append("»"));

var lastPageLi= $("

").append($(" ").append("末页").attr("href","#"));if(result.extend.pageInfo.hasNextPage == false) {

nextPageLi.addClass("disabled");

lastPageLi.addClass("disabled");

}else{//添加末页、下一页的点击

nextPageLi.click(function() {

to_page(result.extend.pageInfo.pageNum+ 1);

});

lastPageLi.click(function() {

to_page(result.extend.pageInfo.pages);

});

}

ul.append(firstPageLi).append(prePageLi);

$.each(result.extend.pageInfo.navigatepageNums,function(index, item){

var numLi= $("

").append($(" ").append(item));if(result.extend.pageInfo.pageNum ==item) {

numLi.addClass("active");

}

numLi.click(function(){

to_page(item);

});

ul.append(numLi);

});

ul.append(nextPageLi).append(lastPageLi);

var navEle= $("").append(ul);

navEle.appendTo("#page_nav_area");

}