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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/AYZXX/article/details/89432402

一直觉得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小白 ,慢慢学,一点点积累。

 

展开阅读全文

没有更多推荐了,返回首页