Ajax
PPG007 ... 2021-12-26 About 2 min
# Ajax
# ajax 基本属性
$.ajax({
url:"/books/ajaxSelect",
data:{"bookName":bookName},//JSONObject或String
async:true,//Boolean类型，默认为true，所有请求为异步，若设置false，将使用同步请求，锁住浏览器，其他操作必须等待ajax执行完毕
type:"POST",//请求方式：POST、GET、DELETE、PUT
timeout:5000,//毫秒
cache:true,//默认为true，当dataType为script时默认false，false将不会从浏览器中加载请求信息
dataType:"json",//预期返回的数据类型
success:function (data){
$("#bookTable").html(refresh(data));
},
error:function (data){
console.log(data);
},
complete:function (){
console.log("complete");
},
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
dataType:
- xml：返回 XML 文档，可用 JQuery 处理。
- html：返回纯文本 HTML 信息；包含的 script 标签会在插入 DOM 时执行。
- script：返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 cache 参数。注意在远程请求时（不在同一个域下），所有 post 请求都将转为 get 请求。
- json：返回 JSON 数据。
- jsonp：JSONP 格式。使用 JSONP 形式调用函数时，例如 myurl?callback=?，JQuery 将自动替换后一个“?”为正确的函数名，以执行回调函数。
- text：返回纯文本字符串。
# ajax 处理前端
前端代码：
<table class="table table-hover table-striped">
<thead>
<tr>
<th>书籍编号</th>
<th>书籍名称</th>
<th>书籍数量</th>
<th>书籍详情</th>
</tr>
</thead>
<tbody id="bookTable">
<c:forEach var="book" items="${bookList}">
<tr >
<td>${book.bookId}</td>
<td>${book.bookName}</td>
<td>${book.bookCounts}</td>
<td>${book.detail}</td>
<td>
<a href="${pageContext.request.contextPath}/books/toUpdatePage?bookId=${book.bookId}">修改</a> |
<a href="${pageContext.request.contextPath}/books/delete?bookId=${book.bookId}">删除</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
通过 ajax 获取到数据后，调用拼接函数，注意拼接的位置(tbody)。
function refresh(data) {
let bookList=JSON.parse(data);
let html="";
for (let i=0;i<bookList.length;i++){
html+="<tr><td>"+bookList[i].bookId+"</td>"
+"<td>"+bookList[i].bookName+"</td>"
+"<td>"+bookList[i].bookCounts+"</td>"
+"<td>"+bookList[i].detail+"</td></tr>"
}
console.log(html);
return html;
}
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
# 后台处理
后台通过 @ResponseBody 注解或 @RestController 注解返回一个 json 字符串即可。