這裡介紹3種
jQuery.get( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] )
jQuery.post( url, [ data ], [ success(data, textStatus, jqXHR) ], [ dataType ] )
jQuery.ajax( url, [ settings ] )
第三種是我最常用的，看個人習慣了，其實都OK
第一種不支援中文，要用中文就得轉碼，用中文一般用post，也就是第二種，表單送出也一般使用post；第三種可以了解為前面兩種的一個綜合。
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<!-- ajax示範 -->
<script type="text/javascript" src="<c:url value='/js/jquery-3.3.1.js'/>"></script>
<script type="text/javascript">
/* get方式 */
function get(){
var url = "<c:url value='/GetServlet'/>";
$.get(
url,
{
name:"jack",
age:"23"
},
function(data, textStatus, jqXHR){
alert(data);
}
);
}
/* post方式 */
function post() {
var url = "<c:url value='/GetServlet'/>";
$.post(
url,
{
name:"中文",
age:"23"
},
function (data){
alert(data);
}
);
}
/* Ajax */
$(function(){
$("#ajax").click(function () {
$.ajax({
url:"<c:url value='/GetServlet'/>",
data:{
name:"老幹爹",
age:"55"
},
type:"POST",
dataType:"JSON",
success: function(data){
alert(data.name+","+data.age);
},
error: function(){
alert("出錯啦");
}
});
});
});
</script>
</head>
<body>
<button onclick="get()">get方式通路背景</button><hr>
<button onclick="post()">post方式通路背景</button><hr>
<input type="button" value="ajax方式" id="ajax"/>
</body>
</html>
servlet代碼
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html>
<head>
<!-- ajax示範 -->
<script type="text/javascript" src="<c:url value='/js/jquery-3.3.1.js'/>"></script>
<script type="text/javascript">
/* get方式 */
function get(){
var url = "<c:url value='/GetServlet'/>";
$.get(
url,
{
name:"jack",
age:"23"
},
function(data, textStatus, jqXHR){
alert(data);
}
);
}
/* post方式 */
function post() {
var url = "<c:url value='/GetServlet'/>";
$.post(
url,
{
name:"中文",
age:"23"
},
function (data){
alert(data);
}
);
}
/* Ajax */
$(function(){
$("#ajax").click(function () {
$.ajax({
url:"<c:url value='/GetServlet'/>",
data:{
name:"老幹爹",
age:"55"
},
type:"POST",
dataType:"JSON",
success: function(data){
alert(data.name+","+data.age);
},
error: function(){
alert("出錯啦");
}
});
});
});
</script>
</head>
<body>
<button onclick="get()">get方式通路背景</button><hr>
<button onclick="post()">post方式通路背景</button><hr>
<input type="button" value="ajax方式" id="ajax"/>
</body>
</html>
///--以下為補充内容--//
1. w3s的線上jQuery中文文檔：http://www.w3school.com.cn/jquery/jquery_reference.asp
2. jquery中文網：https://www.jquery123.com/
3.jquery官網：https://jquery.com/
4.jQuery離線手冊、源碼：https://download.csdn.net/download/qq_38238041/10720563
![SpringMVC(六) | 前後端互動之ajax與jsonjsonajax[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)