html 和jsp 引入jquery_不用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文件，如图

<!-- 设置静态资源不过滤 -->
<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路径写的不对，比如路径前面加了“/”之类的

html 和jsp 引入jquery_不用jsp怎么实现前后端交互？给萌新后端的ajax教程(1)相关推荐

jsp引入css失败,jsp加载css失败的原因
jsp加载css失败的原因:1.css文件语法写错:2.css文件编码出错:3.加载css文件路径不对:4.设置了过滤器:其解决办法:1.检查css语法:2.将css文件保存为UTF8格式:3.设置正 ...
jsp引入页面，即包含文件的两种方法介绍
最近在练手做一个小Demo中,比较多的用到了jsp引入另一个jsp的例子,感觉很简单,但是不幸出现了错误500,于是查找了一些资料来了解一下关于jsp包含的方法,这里分享出来,个人总结,可能不够完善, ...
JSP引入CSS文件无法生效的问题
JSP引入CSS文件无法生效的问题开发工具与关键技术:eclipse.Java 作者:幻奏撰写时间:2020.8.8 不知道你们有没有碰到这个问题,就是css文件在jsp中无法生效,看解决办法的可 ...
jsp引入其它页面的两种方式
熟悉jsp的知道,有两种include其他页面的方法,一种是说明标签<%@ include file="xxx.jsp"%>,一种是动作标签<jsp:includ ...
jsp如何引入html样式,jsp怎么引入css样式？
jsp怎么引入css样式?下面本篇文章就来给大家介绍一下jsp引入css样式的方法.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. JSP页面引入CSS样式有三种方法,且其优先级不同 ...
一个JSP页面引入另一个JSP页面
JSP文件中引入另一个JSP JSP include 指令 JSP include 动作静态导入与动态导入 1.什么是静态导入 2.什么是动态导入总结指令与动作: 静态导入和动态导入区别附:当 ...
jsp mysql中文乱码,jsp中文乱码 jsp mysql 乱码的解决方法
jsp中文乱码 jsp mysql 乱码的解决方法 jsp中文乱码 jsp mysql 乱码要servlet里面支持中文的方法: 在dopost或者doget的第一句加上: request.setCh ...
大数据WEB阶段（十三）JSP（二）JSP标签、EL表达式、JSTL
JSP标签.EL表达式.JSTL (一)JSP标签技术一.JSP标签技术概述 jsp本质上是一种动态web资源开发技术 , 看起来像是html , 但其中可以写java代码 , 非常方便用来开发动态 ...
JSP webshell免杀——JSP的基础
唉,每次开启JSP都要好一会儿. 话说我也不知道为啥,我的每次开启条件一次比一次苛刻.一开始必应就可以打开,再后来只能由谷歌打开,现在可好了得开着代理用谷歌才能进去. 一个JSP页面可由5种元素组合而 ...

html 和jsp 引入jquery_不用jsp怎么实现前后端交互？给萌新后端的ajax教程(1)

html 和jsp 引入jquery_不用jsp怎么实现前后端交互？给萌新后端的ajax教程(1)相关推荐

最新文章

热门文章