一个简单的注册/登录页面，使用AJAX实现前后台数据交互

2023-12-28 11:36| 来源: 网络整理| 查看: 265

因为学习需求，需要实现一个简单的登录与注册界面，抓耳挠腮，搞了好久。我自己是做后台开发，所以后台的Service、Dao、Controller很快就编写完成了。被前台的代码恶心了很久，遇到了n个bug，各种查找资料，最终实现了简单的登录。这里我们不讲后台数据的交互逻辑，我重点讲讲如何通过AJAX来实现前后台的数据交互的。代码源码我放在github上了代码，可以自行clone。有时间可以自己敲一下，看看有哪些坑。大家都知道的，coding这种事情就是为了写bug的，所以我这篇文章中虽然提到了很多坑，但是也不一定你就会遇到，多种尝试后，也可以多多打开浏览器的控制台看看是哪里报错了。也不要因为写的和别人的一模一样但还是运行不了二崩溃，就算自己写的代码一模一样有时候导入的jar包版本不一样也可能会出现bug。如果一定要和别人的代码比对，介绍一个文件对比工具给大家使用，Beyond Compare，会节省大家很多时间，对于刚入门的小白帮助很大。首先给大家说一下我所使用的技术：后台框架是基于Springboot 2.3.0.RELEAS、Mybatis搭建的，前台我用到了AJAX、HTML、JS、Jquery。 1.先放出我们注册的JS代码，即registerscript.js文件中的代码

/** * Created by Intellij IDEA. * @Author CAIXIANGYU * @Date 2020/06/09 * @Comment 获取用户提交的数据并返回给后台 */ //注意绑定事件的方式与直接在HTML中绑定onclick事件的差别 $("#btn").bind("click", function () { $.ajax({ //向后台请求数据的方式 type: 'get', //请求后台的地址可以简写 url: "http://localhost:8080/test/registerUser5", //data中的数据默认用 id=1&username=zs&password=123%realname=zhangsan传递到后台，我们可以根据contentType来指定数据的传递的格式 data: { id: $("#id").val(), username: $("#username").val(), password: $("#password").val(), realname: $("#realname").val() }, //成功调用后台方法后的回调函数 success: function (response) { console.log(response); }, }); });

在这里我们引入了Jquery 坑点：

$("#btn").bind("click", function () {});

注意AJAX绑定事件的方式与未引入Jquery直接在HTML中的绑定方式是不同的。 **#**不能少

2.register.html中的代码这里是我们用到的是html部分的代码

Title

坑点：

（1）资源文件的引用位置，很多人**$**符号无法使用的问题大都是因为jquery引用地址的写错的问题。如果自己不能确定的话，就打开自己访问页面的源码，点击html文件中的引入jquery 的标签的超链接jquery-2.1.1.min.js能否跳转到自己存放jquery jar包的位置。（2）资源文件的引用位置，在registerscript.js文件中我们引用Jquery中的符号与事件绑定格式，因此在register.html引用registerscript.js之前必须先引用jquery-2.1.1.min.js。 3 后台代码

@Controller @RequestMapping("/test") public class UserController { //跳转到指定的HTML页面，register.html @RequestMapping("/test") public String test() { return "register"; } @RequestMapping("/registerUser5") @ResponseBody //responsebody可以直接返回一个json格式的数据，如果不适用的话返回的就是一个视图解析器，控制台就会报错 public void register5(HttpServletRequest request) { Integer id = Integer.parseInt(request.getParameter("id")); String username = request.getParameter("username"); String password = request.getParameter("password"); String realname = request.getParameter("realname"); System.out.println("id:" + id + ",username:" + username + ",password:" + password + ",realname:" + realname); } }

如果去除Responsebody注解

org.thymeleaf.exceptions.TemplateInputException: Error resolving template [test/registerUser5], template might not exist or might not be accessible by any of the configured Template Resolvers

这是因为在controller层请求处理完了返回时，没有使用@ResponseBody注解而返回了非json格式，这种情况下返回的数据thymeleaf模板无法解析，直接报错。 4.介绍一下项目的结构：前台代码：在这里插入图片描述后台代码： 5.代码执行输入网址：http://localhost:8080/test/test 添加数据如下：点击提交后后台输出结果如下：完成了数据前后台的交互。本人前端小白，有很多的地方可能讲的并不是非常的准确，有什么不正确的地方希望大家批评指正。感谢阅读我的博客。

【本文地址】

公司简介

联系我们