說明：
開發環境: IntelliJ IDEA 2018.2.4 x64
java version: “1.8.0_111”
基於Spring-Boot框架
一、Html主要代碼：
<!DOCTYPE html>
<h1>地塊列表</h1>
<button id="btn">Click me</button>
<table>
<tr>
<td>地塊編號</td>
<td>地塊名</td>
<td>地塊權重</td>
</tr>
<tbody id="content">
</tbody>
</table>
<h1>地塊查詢</h1>
<label>請輸入地塊編號</label>
<input type="text" id="keyword">
<button id="search">查詢</button>
<br><br>
<p id="searchResult"></p>
<h1>地塊刪除</h1>
<label>請輸入地塊編號</label>
<input type="text" id="areaId">
<button id="delete">刪除</button>
<p id="deleteResult"></p>
<h1>地塊增添</h1>
<label>請輸入地塊名</label>
<input type="text" id="areaName">
<label>請輸入地塊權重</label>
<input type="text" id="priority">
<button id="insert">添加地塊</button>
<p id="addResult"></p>
<h1>地塊修改</h1>
<label>請輸入地塊名</label>
<input type="text" id="areaId1">
<label>請輸入地塊名</label>
<input type="text" id="areaName1">
<label>請輸入地塊權重</label>
<input type="text" id="priority1">
<button id="modify">修改地塊</button>
<p id="modifyResult"></p>
<script>
$(function () {
$("#btn").click(function () {
$.get("http://127.0.0.1:8080/demo/superadmin/listarea1", function (data) {
var html = "";
var json = JSON.parse(data);
console.log(json);
for (var val in json) {
html += "<tr>" +
"<td>" + json[val].areaId + "</td>" +
"<td>" + json[val].areaName + "</td>" +
"<td>" + json[val].priority + "</td>";
}
$("#content").html(html);
})
}),
$("#search").click(function () {
var x = new Number($("#keyword").val());
var url = "http://127.0.0.1:8080/demo/superadmin/getAreaById?areaId=" + x;
$.get(url, function (data) {
var html2 = "";
console.log(data);
var json = JSON.parse(data);
html2 += json.areaId + "  " +
json.areaName + "  " +
json.priority;
$("#searchResult").html(html2);
})
}),
$("#delete").click(function () {
var url = "http://127.0.0.1:8080/demo/superadmin/removearea";
$.get(url, {"areaId": $("#areaId").val()}, function (data) {
var html = "";
console.log(data);
html += data.success;
$("#deleteResult").html(html);
})
}),
$("#insert").click(function () {
$.ajax({
async: false,
type: "POST",
data: JSON.stringify({"areaName": $("#areaName").val(), "priority": $("#priority").val()}),
url: "http://127.0.0.1:8080/demo/superadmin/addarea",
contentType: "application/json",
dataType: "json",
success: function (data) {
var html = "";
console.log(data);
html += data.success;
$("#addResult").html(html);
}
})
}),
$("#modify").click(function () {
$.ajax({
async: false,
type: "POST",
data: JSON.stringify({"areaId":$("#areaId1").val(),"areaName": $("#areaName1").val(), "priority": $("#priority1").val()}),
url: "http://127.0.0.1:8080/demo/superadmin/modifyarea",
contentType: "application/json",
dataType: "json",
success: function (data) {
var html = "";
console.log(data);
html += data.success;
$("#modifyResult").html(html);
}
})
})
})
</script>
二、後臺接口
@CrossOrigin(origins = "*")
@RequestMapping(value = "listarea1",method = RequestMethod.GET)
private String listArea1() throws JsonProcessingException {
List<Area> list = areaService.queryArea();
return new ObjectMapper().writeValueAsString(list);
}
@CrossOrigin(origins = "*")
@RequestMapping(value = "getAreaById",method = RequestMethod.GET)
private String getAreaById(Integer areaId) throws JsonProcessingException {
Area area = areaService.queryAreaById(areaId);
return new ObjectMapper().writeValueAsString(area);
}
@CrossOrigin(origins = "*")
@RequestMapping(value = "addarea",method = RequestMethod.POST/*consumes="application/json; charset=UTF-8*/)
private Map<String,Object> addArea(@RequestBody Area area){
Map<String,Object> modelMap = new HashMap<String,Object>();
modelMap.put("success",areaService.insertArea(area));
return modelMap;
}
@CrossOrigin(origins = "*")
@RequestMapping(value = "modifyarea",method = RequestMethod.POST)
private String modifyArea(@RequestBody Area area) throws JsonProcessingException {
Map<String,Object> modelMap = new HashMap<String,Object>();
modelMap.put("success",areaService.updateArea(area));
return new ObjectMapper().writeValueAsString(modelMap);
}
@CrossOrigin(origins = "*")
@RequestMapping(value = "removearea",method = RequestMethod.GET)
private Map<String,Object> removeArea(Integer areaId){
Map<String,Object> modelMap = new HashMap<String,Object>();
modelMap.put("success",areaService.deleteArea(areaId));
return modelMap;
}