AJAX:基本的步骤！
$.ajax({
type : “get”,//请求方式
url : “http://localhost:8081/getAllType”,//后台接口
dataType:‘json’, //预期的服务器响应的数据类型
data:{
tid:test1,
},//接口需要传入参数用此段代码
案例一
用AJAX+HTML实现根据ID查询
Controller层
TypeBean:
int tid
String type
// 根据id查，
@RequestMapping(value = "getAllType")
@ResponseBody
public String getAllType(Integer tid) {
TypeBean data = typeService.getAllTypeService(tid);
System.out.println("执行了改查询方法！");
// 将实体类类型转换成json数据格式
String jsonString = JSON.toJSONString(data);
return jsonString;
}
// 根据id查的访问路径
@RequestMapping("getAlltoPage")
public String getAlltoPage() {
return "listType";
}
前台页面显示
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引这个js需要网 -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<style>
#text{
border-collspace:collspace;
};
tr{
height:35px;
}
</style>
<body>
<button class="btn">查询</button>
<table id="text">
<!-- 规定这是个头 -->
<thead>
<tr>
<th>设备类型</th>
<th>设备Id</th>
</tr>
</thead>
<!-- 这里存放拼接好的值-->
<tbody id="content">
</tbody>
</table>
<from>
<input type="text" name="tid" id="tid" >
</from>
</body>
<script type="text/javascript">
//根据id查
$(".btn").on("click" , function() {
var test1=$("#tid").val();
$.ajax({
type : "get",//请求方式
url : "http://localhost:8081/getAllType",//后台接口
dataType:'json', //预期的服务器响应的数据类型
//接口需要传入参数用此段代码！
data:{
tid:test1,
},
success : function(data) { //如果请求成功，返回数据。
console.log(data);//在控制打印数据
var html = "";
html = "<tr>"+
"<td>"+data.tid+"</td>"+
"<td>"+data.type+"</td>"+
"</tr>";
$("#content").html("");
$("#content").append(html);
$("#test").html(html); //在html页面id=test的标签里显示html内容
}
})
})
</script>
</html>
案例二
用HTML+AJAX实现添加方法
判重名，添加成功返回提示信息
Controller层
// 添加类型
@RequestMapping(value = "addType")
@ResponseBody
public void addType(String type,HttpServletRequest req, HttpServletResponse resp) throws IOException {
resp.setCharacterEncoding("utf-8");
System.out.println("..." +type);
String info = "";
Map<String, String> map = new HashMap();
if (type!=null) {
//typeService.addTypeService(typeBean);
if(type.equals("A类"))
info = "该名称已存在";
else {
info="该名称可用";
}
} else {
info = "名字不可为空！";
}
map.put("info", info);
//异步
PrintWriter writer = resp.getWriter();
writer.print(JSON.toJSON(map));
writer.flush();
writer.close();
}
// 访问添加的页面
@RequestMapping(value = "addTypetoPage")
public String addTypetoPage() {
return "addType";
}
前台页面
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<!-- 引这个js需要网 -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
</head>
<style>
#text {
border-collspace: collspace;
}
;
tr {
height: 35px;
}
</style>
<body>
<button class="btn">添加</button>
<from> <input type="text" name="type" id="tid">
<table id="text">
<tbody id="content">
</tbody>
</table>
</from>
</body>
<script type="text/javascript">
//根据id查
$("#tid").on("blur" , function() {
var test1=$("#tid").val();
$.ajax({
type : "get",//请求方式
url : "http://localhost:8081/addType",//后台请求的数据
dataType:'json', //预期的服务器响应的数据类型
//接口需要传入参数用此段代码！
data:{
type:test1
},
success : function(data) { //如果请求成功，返回数据。
console.log(data);
// alert(data.info)
var html = "";
html = "<tr>"+
"<td>"+data.info+"</td>"+
"</tr>";
$("#content").html("");
$("#content").append(html);
$("#test").html(html); //在html页面id=test的标签里显示html内容
}
})
})
</script>
</html>
目前欠缺：
AJAX：
１.如何遍历后台集合
２.ｊｓ基础很薄弱。
