JS前后端数据交互--简单登陆页面交互

最新推荐文章于 2024-08-05 23:16:18 发布

AYZXX

最新推荐文章于 2024-08-05 23:16:18 发布

阅读量9.7k

点赞数 5

分类专栏：ｊａｖａ java 文章标签： js 登陆前后端交互

本文链接：https://blog.csdn.net/ayzxx/article/details/89432402

版权

java 同时被 2 个专栏收录

13 篇文章 0 订阅

订阅专栏

ｊａｖａ

5 篇文章 0 订阅

订阅专栏

一直觉得js很难学，语法和java相识，却比java随意很多，自认是学java后台，js对我无甚重要，之前还是暑假学习js,把简单的入门书籍看来一遍，并没有桥书上代码。一年左右不使用js，几乎忘完，一个简单的登陆验证，却也不会编写，很是惭愧。中间还问了一下大佬，感觉自己太小白了。

先粘贴一下自己JSP代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>用户登录页面</title>
</head>
<body>
	<h2 align="center">
		<font color=red>用户登录页面</font>
	</h2>
	<form id = "message" method="post">
		<table align="center" border="1">
			<tr>
				<td>用户名:</td>
				<td><input type="text" name="studentId"></td>
			</tr>
			<tr>
				<td>密&nbsp;&nbsp;码:</td>
				<td><input type="text" name="password" ></td>
			</tr>
			<tr>
				<td><input type="button" value="登录" onclick="login()"></td>
				<td><input type="reset" value="重置" name="reset"></td>
			</tr>
		</table>
	</form>
</body>
<script src="http://apps.bdimg.com/libs/jquery/2.0.0/jquery.min.js"></script>
<script
	src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script
	src="${pageContext.request.contextPath}/resources/script/login.js"></script>

</html>

引入js文件：应该放在下面，不要放到上面，会报错，具体原因，忘记啦。

/**
 * 
 */

function login(){
	
	var verifyUrl = "/AYZXX-B/books/verify";
	//var message = document.getElementById("message");
	
	var studentId = document.getElementsByName("studentId");
	var password =  document.getElementsByName("password");
//	alert(studentId[0].value);
//	alert(password[0].value);
	var oError = "";
	var isError = true;
	if (studentId[0].value.length!=10) {
		oError = "学号请输入10位字符";
		isError = false;
	}
	if (password[0].value.length<=0){
		oError = "密码不能为空！";
	     isError = false;
	} 
	alert(verifyUrl);
    if(isError)
    {
    	var params={};
    	params.studentId=studentId[0].value;
		params.password=password[0].value;
		alert(params);
    	$.ajax({
			type:'post',
			url:verifyUrl,
			data:params,
			datatype:'josn',               //同步调用，保证先执行result=true,后再执行return result;
			success:function(data){
				if(data.result=='SUCCESS'){
					window.location.href="/AYZXX-B/books/list";
					//弹出登录成功！
					alert("登陆成功！");
				}else{
					alert("帐号错误，登陆失败！");
				}
			}
		});
    }else{
    	alert(oError);
    }
};

JS内里逻辑一目了然，login()相当一一个函数，登陆按钮中的监听就是添加此函数。document.getElementsByName();这个是js 获取前端信息的标志，可根据id和name获取，这个与JSP页面相同，不过在jsp 中所有的id都是不能重复的，name好像可以重复，为了严谨，建议使用id的获取方式，获取到的是一个数组（这个我就忘记，然后怎么都不对）。上面因为只有一个字符串，所以studentId[0].value格式获得每一个输入的值。得到两个值，把它们放到一个容器中，这个容器类型与map容器，不过类型不限制(js比较随意)。然后通过ajax把数据提交到后台进行判断，处理。从后台返回一个json字符串的形式，json也是键值对的形式，里面包函前后端约定好的一些形式。根据返回结构，提示信息。并跳转不同的页面。

1、编写前端页面时，应该前后端分离。

2、每一个前端展示页面对应一个js页面，不要为了省时，直接将js写在页面中。

3、一些接口规则前后需提前约定好。

js语法学习：

function login()：定义一个函数，可以调用，

document.getElementsByName();根据名字获取前端信息。返回是一个字符数组。

studentId[0].value可获取数组为0的字符串。

var params={};定义一个无比强大的容器，存储类型是键值对形式。

具体使用：

params.studentId=studentId[0].value;
params.password=password[0].value;

结语：js小白，慢慢学，一点点积累。