利用Ajax传递数据实现在SpringBoot前后端分离项目中的登录功能

每天都得开风扇

已于 2022-12-05 16:33:53 修改

阅读量3.6k

点赞数 8

分类专栏： SpringBoot笔记杂货铺文章标签： ajax spring boot java jquery javascript

于 2021-12-18 14:48:26 首次发布

本文链接：https://blog.csdn.net/Xia13225498444/article/details/122010948

版权

前言:

当时要做一个管理系统,在做到实现登录功能的时候,由于我基础知识掌握的不够牢固,一直在原地打转,后来在公司前辈的指导下实现了该功能.运用到了SpringBoot,Ajax,html.JS,JQuery,等技术.

总流程:

1.前端页面login.html

1.1导入JQuery

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>login</title>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
    //在这里导入jquery
    </script> 
        
</head>
<body>
</body>
</html>

因为我们在后面需要从前端获取到用户输入的数据并利用jquery获取input输入框中的值的方法将其

传递到后台.

1.2写一段input标签来获取用户输入的账号密码

 账号:<input type="text" id="userAccount" name = "userAccount"> <br>
 密码:<input type="password" id = "password" name = "password"> <br>

    <button type="submit" id="button" style="margin-top:10px;" onclick="login()">提交</button>

这里的<button>中,有一个鼠标点击事件:οnclick="login()" 这个事件是指在点击该按钮时会执行这个login()方法,该方法的功能是登录(从上面两个input中获取数据并通过Ajax传递到后台做验证后再返回验证结果,并使Ajax根据不同的比对结果执行不同的操作:跳转页面/错误提示)

下面有具体的说明.

在此之前先来介绍一下,如何利用jquery获取input输入框中的值.

1.3如何利用jquery获取input输入框中的值:示例

如何用javascript获取input输入框中的值，js/jq通过name、id、class获取input输入框中的value

先准备一段 HTML

1

<input type="text" id="CN_NAME" name="CN_NAME" class="CN_NAME">

jquery获取input文本框中的值

通过 name

var name = $('input[name="CN_NAME"]').val();

通过 id

var name = $('#CN_NAME').val();

通过 class

var name = $('.CN_NAME').val();

javascript获取input输入框中的值

通过 name

document.getElementsByName("CN_NAME")[0].value

通过 id

var name = document.getElementById("CN_NAME").value

通过 class

document.getElementsByClassName("CN_NAME")[0].value

ps：下面看下jQuery获取各种input输入框的值

1.获取一组radio单选框的值（name属性为一组的radio的name属性）

1

var q1 = $("input[name=element_name]:checked").val();

2.获取select下拉框的值

var

最低0.47元/天解锁文章

每天都得开风扇

关注

8
点赞
踩
38

收藏

觉得还不错? 一键收藏
1
评论
利用Ajax传递数据实现在SpringBoot前后端分离项目中的登录功能

重点:1: 利用jquery获取input输入框中的值2: 利用Ajax将数值传递到后台3: Service既要传递从前台来的输入数据,又要返回作比较后的结果难点:1. 利用Ajax将数值传递到后台2. Service既要传递从前台来的输入数据,又要返回作比较后的结果的功能的实现3. 理解整个过程的信息传递流程
复制链接

扫一扫