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

最新推荐文章于 2024-05-30 15:31:25 发布

itcaixiangyu

最新推荐文章于 2024-05-30 15:31:25 发布

阅读量1w

点赞数 17

文章标签： java html ajax jquery javascript

本文链接：https://blog.csdn.net/weixin_44467131/article/details/106642020

版权

因为学习需求，需要实现一个简单的登录与注册界面，抓耳挠腮，搞了好久。我自己是做后台开发，所以后台的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部分的代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>

<body>
<p><input type="text" id="id" placeholder="请输入id"/></p>
<p><input type="text" id="username" placeholder="请输入用户名"/></p>
<p><input type="text" id="password" placeholder="请输入密码"/></p>
<p><input type="text" id="realname" placeholder="请输入用户名"/></p>

<input type="button" id="btn" value="点击提交">
</body>

<script src="/js/jquery-2.1.1.min.js"></script>
<script src="/js/registerscript.js"></script>

</html>

坑点：

（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
添加数据如下：
点击提交后后台输出结果如下：

完成了数据前后台的交互。
本人前端小白，有很多的地方可能讲的并不是非常的准确，有什么不正确的地方希望大家批评指正。感谢阅读我的博客。

itcaixiangyu

关注

17
点赞
踩
91

收藏

觉得还不错? 一键收藏
0
评论
一个简单的注册/登录页面，使用AJAX实现前后台数据交互

因为学习需求，需要实现一个简单的登录与注册界面，抓耳挠腮，搞了好久。我自己是做后台开发，所以后台的Service、Dao、Controller很快就编写完成了。被前台的代码恶心了很久，遇到了n个bug，各种查找资料，最终实现了简单的登录。这里我们不讲后台数据的交互逻辑，我重点讲讲如何通过AJAX来实现前后台的数据交互的。大家都知道的，coding这种事情就是为了写bug的，所以我这篇文章中虽然提到了很多坑，但是也不一定你就会遇到，多种尝试后，也可以多多打开浏览器的控制台看看是哪里报错了。也不要因为写的和别
复制链接

扫一扫