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

最新推荐文章于 2024-02-27 12:00:00 发布

为你谓我

最新推荐文章于 2024-02-27 12:00:00 发布

阅读量220

点赞数

文章标签： html 和jsp 引入jquery

本文链接：https://blog.csdn.net/weixin_34675395/article/details/113626734

版权

众所周知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路径写的不对，比如路径前面加了“/”之类的

为你谓我

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
html 和jsp 引入jquery_不用jsp怎么实现前后端交互？给萌新后端的ajax教程(1)

众所周知jsp是已经入土的技术，虽然仍有不少老项目在用，但已经不值得花时间学习了，当然了解一下也是可以的。如果你是一位萌新后端，不想了解jsp，或者想做一个前后端分离的项目，想在纯html网页上实现前后端交互，不妨看看这篇文章。一、Q/A1.什么是ajax 请自行谷歌/百度，反正我复制粘贴在这你也不会看。2.ajax可以做什么可以实现不刷新整个网页来更新网页的数据，也可以直接拿来做前后端...
复制链接

扫一扫