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

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

先粘贴一下自己JSP代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>







	

		用户登录页面
	
	

		

			

				
用户名:
				

			
			

				
密  码:
				

			
			

				

				

			
		
	

引入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小白 ，慢慢学，一点点积累。