这里介绍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=)