AJAX登录

最新推荐文章于 2023-05-22 23:12:02 发布

探索者日记

最新推荐文章于 2023-05-22 23:12:02 发布

阅读量3.1k

点赞数 3

分类专栏：【Web】【Java】文章标签： ajax javascript import string input parameters

本文链接：https://blog.csdn.net/xudepeng0813/article/details/8028711

版权

【Web】同时被 2 个专栏收录

11 篇文章 0 订阅

订阅专栏

【Java】

8 篇文章 2 订阅

订阅专栏

AJAX即“AsynchronousJavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，它是指一种创建交互式网页应用的网页开发技术。可以说AJAX已成为Web开发的重要武器！

prototype.js 是Sam Stephenson写的一个非常优雅的javascript基础类库，对javascript做了大量的扩展，而且很好的支持Ajax，国内外有多个基于此类库实现的效果库，也做得很棒。我现在所在的公司就一直引用这个类库实现AJAX的调用，感觉非常的不错。下面做个登录Demo和大家分享一下

1. Login.jsp：登录页面

<html>
  <head>
    <base href="<%=basePath%>">
    
    <title>登录页面</title>
    
	<script type="text/javascript" src="prototype.js"></script>
	
	<script type="text/javascript" src="login.js"></script>
	
  </head>
  
  <body>
    用户名：<input name="username" id="username" type="text"/><br>
    密码：<input name="password" id="password" type="password"/><br>
   
    <input name="btn" id="btn" type="button" value="提交" onClick="deal()"/>
  </body>
</html>

2. Login.js：登录的js处理，这里有关键的AJAX

function deal(){
	alert("ajax");
	var url = 'deal.jsp';
	var pars = "operator=login&username=" + $("username").value+"&password="+ $("password").value;
	var myAjax = new Ajax.Request(
		url,
		{
			method: 'post',
			parameters: pars,
			onComplete: afterDeal
		}
	);
}

function afterDeal(originalRequest){
	//获取deal.jsp文件中业务逻辑处理过的标记
	var valuestr= originalRequest.responseText;
	alert(valuestr);
	if(valuestr=="0"){
		alert("用户名密码错误");
	}else{
		window.location="success.jsp";
	}
}

3. deal.jsp：进行业务逻辑处理，虽然是jsp页面，但是都是写的java代码进行处理，这个也可以写到java类文件中，通过servlet关联起来

<%@ page language="java" import="java.util.*" pageEncoding="GBK"%>
<%@page import="org.jdom.output.XMLOutputter"%>
<%@page import="org.jdom.Element"%>
<%@page import="java.io.PrintWriter"%>

<%
	String operator = request.getParameter("operator"); //操作标示
	//DataChangeToXml dctx = new DataChangeToXml();	
	String strFlag="";	
	//根据指定的参数执行相应的代码，login则进行登录的业务逻辑处理，真实的是从数据库中获取数据
	if (operator.equals("login")) {
		//获取AJAX中的参数pars信息
		String username=request.getParameter("username");
		String password=request.getParameter("password");
		
		//进行业务逻辑处理，正确的用户名做一个标记1，错误的标记为0
		if(username.equals("xdp") && password.equals("123")){
			strFlag="1";
		}else{
			strFlag="0"; 
		}
		
		//输出标记，AJAX的回调函数获取这个标记信息
		PrintWriter writer = response.getWriter();
		writer.println(strFlag);
		writer.close();
	}
	
	
	
 %>

4. success.jsp：登录成功展示页面！

<html>
  <head>
    <base href="<%=basePath%>">
    <title>登录成功</title>
  </head>
  
  <body>
    <br>
    登录成功！！！！！！！！！
  </body>
</html>

探索者日记

关注

3
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX登录

AJAX即“AsynchronousJavaScript and XML”（异步JavaScript和XML)，AJAX并非缩写词，它是指一种创建交互式网页应用的网页开发技术。可以说AJAX已成为Web开发的重要武器！ prototype.js 是Sam Stephenson写的一个非常优雅的javascript基础类库，对javascript做了大量的扩展，而且很好的支持
复制链接

扫一扫