众所周知jsp是已经入土的技术，虽然仍有不少老项目在用，但已经不值得花时间学习了，当然了解一下也是可以的。如果你是一位萌新后端，不想了解jsp，或者想做一个前后端分离的项目，想在纯html网页上实现前后端交互，不妨看看这篇文章。
一、Q/A
1.什么是ajax
请自行谷歌/百度，反正我复制粘贴在这你也不会看。
2.ajax可以做什么
可以实现不刷新整个网页来更新网页的数据，也可以直接拿来做前后端交互。
3.这里讲的是是原生ajax实现吗？后端是php还是Java？
不是，是jQuery的ajax实现，后端是Java的SpringMVC框架。
三、前置知识要求
1.SpringMVC的基本了解
2.认识基础html的写法以及了解基本标签的作用
3.了解maven的使用
四、环境准备
1.IDEA2019.3.1，JDK13
2.SpringMVC基本环境
注意xml配置文件中的拦截器设置，不要拦截html文件和js文件，如图
<!-- 设置静态资源不过滤 -->
<mvc:resources location="/css/" mapping="/css/**" />
<mvc:resources location="/images/" mapping="/images/**" />
<mvc:resources location="/js/" mapping="/js/**" />
<mvc:resources location="/html/" mapping="/html/**" />
3.建立一个前端页面test.html 引入jQuery文件，可以去jQuery官网下载。
如图，src里写jQuery文件的路径
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/jquery.min.js"></script>
</head>
如果不想每次打开tomcat都手动输入地址跳转到test.html，可以在web.xml里写上
<welcome-file-list>
<welcome-file>test.html</welcome-file>
</welcome-file-list>
给一些缺乏前端知识的萌新后端讲一些注意的点：
(1)关于jquery.js和jquery.min.js的区别：官网可以下载jquery.js和jquery.min.js两个文件的内容是一样的，不要认为带min的是简略版。带min的js文件体积较小，因为压缩了文件里多余的空格和换行符，但所有内容挤在一起阅读源码困难，当然作为初学者我们不看源码因此下哪个都是可以的
(2)这个引用jquery包的<script>标签放在body中也可以，但如果放在body中的话应该放在你写的代码的<script>标签的最上面，以免需要用到函数时还没有加载这个包。
(3)此外，引入jquery包的<script>标签内部不要写你的js程序，在内部写你的语句会失效，请另开一个<script>标签
4.引入解析json的maven依赖，不引入会报415错误，可以自己改一下版本。
<!--json-->
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-databind</artifactId>
<version>2.9.0</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-core</artifactId>
<version>2.9.0</version>
</dependency>
<dependency>
<groupId>com.fasterxml.jackson.core</groupId>
<artifactId>jackson-annotations</artifactId>
<version>2.9.0</version>
引入后记得在maven窗口点一下刷新，否则包引入不进去
五、开始教你写ajax
1.首先在body里写一个文本框和按钮
<input id="txt" type="text">
<button id="btn" onclick="testajax()">点击我</button>
意思是按钮被点击时执行testajax()函数
2.接下来在<script>标签内写一个叫testajax的函数
function testajax(){
var text=document.getElementById("txt").value;
$.ajax({
type:"post",
url:"test",
contentType:"application/json;charset=UTF-8",
data:JSON.stringify({
"k":"123",
"heihei":text
}),
//dataType:"json",
success:function(data){
alert("执行成功！")
}
});
}
3.讲一下这段代码，第一句var text=document.getElementById("txt").value;的意思是定义一个叫text的变量，JavaScript中的变量是不分类型的，一律用var定义，text的值等于什么呢？
docment.getElementById(“xxx”)是固定写法，意思是得到某个id为xxx的元素，由于输入框的id是txt，因此我们就获得了输入框。”.value”的意思是这个输入框里的内容，也就是你给输入框输入的东西。当然你也可以用jQuery里的选择器，直接写$(“#txt”).value，效果是等同的。
然后我们向下看，$.ajax是固定写法，$是jQuery的缩写，因此写jQuery.ajax效果是一样的，意思是要用ajax了，注意写法，里面的值是被包裹在$.ajax({…});里面的，不能忘记最后的”;”标点符号。
$ajax({…});里面包裹的是各种设置,设置之间用逗号隔开，最后一个属性之后不需要加逗号。
type的意思是用什么方式发送数据，此处我们使用post方式；
url是发送/接收ajax请求的路径，一会儿我们会在controller里用@RequestMapping设置该路径对应的方法。
contentType是你要给后端发送什么格式的请求，这里我们设置json，并且设定编码为UTF-8.
data是你要发送请求的内容，用键值对（key-value）的方式表示。不同键值对之间用逗号隔开，同理最后一个键值对后面不需要加逗号。因为我们需要发送json，因此我们用JSON.stringfy()函数把里面的内容变成json字符串。我们发送的第一对键值对，key是”k”，value是”123”，我们发送的第二对键值对，key是”heihei”，值是text。注意这里的text没有被双引号包裹，原因是这是我们之前定义的变量——输入框中的内容。
datatype是ajax从后端接收的数据的类型，这里我们设置为json，但是这里我们先注释掉，原因后续再讲
succes里是ajax请求成功后要执行的函数，括号里的变量起什么名字都可以，我起名为data，data里是从后端返回的json.
4.由于我们返回了两对键值对，我们把它封装成一个对象。
在domain层创建TestDomain.java这个类，里面刚好是我们的两个键值对的键：
public class TestDomain {
private String k;
private String heihei;
省略get/set方法……
省略toString方法……
}
5.然后我们在controller层来写一个TestController.java这个类，如下
@Controller
public class TestController {
@RequestMapping("/test")
public @ResponseBody String testAJAX(@RequestBody TestDomain t){
System.out.println(t.getHeihei());
System.out.println(t.getK());
System.out.println(t);
return "ok";
}
}
@Controller和@RequestMapping注解不作解释。
关于@ResponseBody，是为了把我们返回的数据转化为json，同时如果你不加这个注解，return “ok”会被认为是跳转到ok这个路径，因此使用了ajax后return就失去了重定向的功能。
@RequstBody用来把我们接收到的json封装到TestDomain类中。
可是既然我们现在不需要返回数据，能不能把String改成void呢？答案是不可以的，ajax需要发送请求和接收请求两个过程才可以视为请求成功，如果你改成void不返回任何东西给ajax是会报错的。当然String改成int之类的随便什么都是可以的。
return里可以随便返回一个字符串，不一定得是“ok”;
6.运行项目
点击按钮，我们可以看到它弹出窗口并且正确输出了
没有正确输出的小伙伴请检查一下自己的代码，右键浏览器窗口，点击检查可以看看控制台报了什么错
7.测试一下向前端传值
我们把success函数里的alert(“执行成功”);改成alert(data);看看结果如何，注意不要加引号
再运行项目，点击按钮，可以看见弹窗变成了
说明我们传值成功
四、一些报错
1.“‘$’is undefined”，这是引入jquery的js文件失败导致的，一些项目的路径比较诡异，自己多研究一下;
2.“参数是必选项”，这是指定了要发送json类型的数据给后端，但是没有通过JSON.stringfy（）进行转换导致的；
3.415错误，常见原因：没有引入json的解析依赖，或者没有设置contentType为“application/json”
4.找不到路径，常见原因：url路径写的不对，比如路径前面加了“/”之类的
网友评论