JS——ajax login test
1.新建一个webproject，我用的是myeclipse10，建立如下的LoginServlet.java文件
2.编写java文件
import java.io.IOException;
import java.io.PrintWriter; import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse; public class LoginServlet extends HttpServlet{
private static final long serialVersionUID = 1L; @Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doPost(req, resp);
} @Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
resp.setCharacterEncoding("utf-8");
resp.setContentType("text/html"); String name = req.getParameter("name");
String pwd = req.getParameter("pwd"); PrintWriter out = resp.getWriter(); if(("test").equals(name)&&("123").equals(pwd)){
out.print("success");
}else{
out.print("fail");
}
out.flush();
out.close();
} }
3.编写javascript和html
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>"> <title>LoginJsp</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<script type="text/javascript">
var xmlHttp;
//创建XMLHttpRequest
function create_XMLHttpRequest(){
if(window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//支持火狐
}else{
xmlHttp = new XMLHttpRequest();
}
}
//改变状态函数
function change_state(){
if(xmlHttp.readyState==4){
if(xmlHttp.status==200){
//
if(xmlHttp.responseText=="success"){
document.getElementById("msg").style.color="green";
document.getElementById("msg").innerHTML = "登陆成功，您好 "+document.getElementById("name").value;
}else{
document.getElementById("msg").style.color="red";
document.getElementById("msg").innerHTML = "登陆失败,重新登陆"; document.getElementById("pass").value="";
document.getElementById("name").focus();
}
}
}
}
//调用函数
function start_request(){
var name=document.getElementById("name");
var pass=document.getElementById("pass");
if(name.value==""){
alert("用户名不能为空");
name.focus();
return false;
}
else if(pass.value==""){
alert("密码不能为空");
pass.focus();
return false;
}
//
var url = "http://localhost:8080/ajaxLogin/login?name="+name.value+"&pwd="+pass.value;
create_XMLHttpRequest();
//设置状态改变时多调用的函数
xmlHttp.onreadystatechange = change_state;
//设置对服务器的调用
xmlHttp.open("GET", url, true);
//发送请求
xmlHttp.send(null);
}
</script>
</head> <body>
<div style="width:570">
<div style="" id="login">
名字：<input type="text" maxlength="10" size="10" name="name" id="name"/> <br/>
密码：<input type="password" maxlength="10" size="10" name="pass" id="pass"/><br/>
<input type="submit" value="登陆" onclick="start_request();return false;"/>
</div>
<div style="float:right" id="msg"></div>
</div>
</body>
</html>
4.配置web.xml文件
<?xml version="1.0" encoding="UTF-8"?>
<web-app version="3.0"
xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_3_0.xsd">
<display-name></display-name>
<welcome-file-list>
<welcome-file>index.jsp</welcome-file>
</welcome-file-list> <servlet>
<servlet-name>loginServlet</servlet-name>
<servlet-class>LoginServlet</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>loginServlet</servlet-name>
<url-pattern>/login</url-pattern>
</servlet-mapping>
</web-app>
这样就写好了，看看运行结果
JS——ajax login test的更多相关文章
- js ajax post提交 ie和火狐、谷歌提交的编码不一致，导致中文乱码
今天遇到一个问题找了很久发现: 使用js ajax post提交 ie和火狐.谷歌提交的编码不一致,导致中文乱码 //http://www.cnblogs.com/QGC88 $.ajax({ url ...
- JavaScript学习总结【12】、JS AJAX应用
1.AJAX 简介 AJAX(音译为:阿贾克斯) = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技 ...
- 简单的前端js+ajax 购物车框架(入门篇)
其实,一直想把自己写的一些js给总结下,也许是能力有限不能把它完美结合起来.只能自己默默的看着哪些代码,无能为力. 今天在公司实在没有事做,突然就想到写下商城的购物车的前端框架,当然我这里只有购物车的 ...
- MVC3.0+knockout.js+Ajax 实现简单的增删改查
MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...
- js+ajax编码三级联动
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title> ...
- 注册页面手机验证码无跳转接收[html+js+ajax+php]
[学习笔记] 来源:注册时需要使用短信验证码,但是注册的时候,点击接收验证码时,会产生跳转(尼玛,这不是我想要的啊!o(╥﹏╥)o) 查询资料和看书之后,知道使用js+ajax可以实现,就从网上找了一 ...
- js ajax请求传token
js ajax请求传token 方法一: headers: { Authorization: "BasicAuth " + token } 方法二: beforeSend: fu ...
- js ajax设置和获取自定义header信息的方法总结
目录 1.js ajax 设置自定义header 1.1 方法一: 1.2 方法二: 2.js ajax 获取请求返回的response的header信息 3.js ajax 跨域请求的情况下获取自定 ...
- 原生js ajax与jquery ajax的区别
原生js ajax的调用: ajax({ type : "get", url : "02_ajax_get.txt", data : { "userN ...
随机推荐
- List对象排序的通用方法
转自 @author chenchuang import java.lang.reflect.InvocationTargetException;import java.lang.reflect.Me ...
- restful 注解
@Path @Path 注释被用来描述根资源.子资源方法或子资源的位置.value 值可以包含文本字符.变量或具有定制正则表达式的变量. @GET.@POST.@PUT.@DELETE.@HEAD @ ...
- Centos7 安装配置NFS
一.安装 NFS 服务器所需的软件包 # yum install -y nfs-utils 二.编辑exports文件 # vim /etc/exports /data/disk1/video *(a ...
- Hadoop之回收站
一.回收站简介: 在HDFS里,删除文件时,不会真正的删除,其实是放入回收站/trash,回收站里的文件可以快速恢复. 可以设置一个时间阀值,当回收站里文件的存放时间超过这个阀值或是回收站被清空时,文 ...
- js函数自执行
在javascript里,任何function在执行的时候都会创建一个执行上下文,因为function声明的变量和function有可能只在该function内部,这个上下文,在调用function的 ...
- two day python基础知识
1.调用功能 ---- -在同一个目录下,调用用户名密码登陆模块 2.创建文件夹 import os #os模块 os.mkdir ("new_dd3")# 创建文件夹 三元 3. ...
- Alarm(硬件时钟) init
http://blog.csdn.net/angle_birds/article/details/17302297 Alarm就是一个硬件时钟,前面我们已经知道它提供了一个定时器,用于把设备从睡眠状态 ...
- win7里边使用telnet命令提示telnet不是内部或外部命令
Win7默认没有安装telnet功能,所以你直接用telnet命令是用不了的: 你可以去“控制面板”-->“程序”(在左下角)--->“打开或关闭Windows功能”,勾上“telnet客 ...
- tomcat集群session共享
Tomcat集群配置其实很简单,在Tomcat自带的文档中有详细的说明( /docs/cluster-howto.html ),只不过是英语的,对我这样的人来说很难懂 . 下面根据说下怎么配置 ...
- js post提交页面
function post(URL, PARAMS) { var temp = document.createElement("form"); temp.action = URL; ...