js和java后台交互 不用jsp_不用jsp怎么实现前后端交互？给萌新后端的ajax教程(1)...

众所周知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文件，如图

3.建立一个前端页面test.html 引入jQuery文件，可以去jQuery官网下载。

如图，src里写jQuery文件的路径

Title

如果不想每次打开tomcat都手动输入地址跳转到test.html，可以在web.xml里写上

test.html

给一些缺乏前端知识的萌新后端讲一些注意的点：

(1)关于jquery.js和jquery.min.js的区别：官网可以下载jquery.js和jquery.min.js两个文件的内容是一样的，不要认为带min的是简略版。带min的js文件体积较小，因为压缩了文件里多余的空格和换行符，但所有内容挤在一起阅读源码困难，当然作为初学者我们不看源码因此下哪个都是可以的

(2)这个引用jquery包的

(3)此外，引入jquery包的

4.引入解析json的maven依赖，不引入会报415错误，可以自己改一下版本。

com.fasterxml.jackson.core

jackson-databind

2.9.0

com.fasterxml.jackson.core

jackson-core

2.9.0

com.fasterxml.jackson.core

jackson-annotations

2.9.0

引入后记得在maven窗口点一下刷新，否则包引入不进去

五、开始教你写ajax

1.首先在body里写一个文本框和按钮

点击我

意思是按钮被点击时执行testajax()函数

2.接下来在

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.讲一下这段代码，第一句vartext=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路径写的不对，比如路径前面加了“/”之类的