前言:
当时要做一个管理系统,在做到实现登录功能的时候,由于我基础知识掌握的不够牢固,一直在原地打转,后来在公司前辈的指导下实现了该功能.运用到了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 q2 = $("#element").val();
3.获取几个下拉框组合的值