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 ...
随机推荐
- iOS发布条款检查表
序号 分类 条款编号 条款 案例 1 功能 2.1 崩溃的程序将会被拒绝 2 2.2 有错误的程序将会被拒绝 点击版本升级无反应/点击版本升级,在线版本和当前版本都是2.0.3 3 2.3 跟开发者宣 ...
- Table Properties [AX 2012]
Table Properties [AX 2012] 1 out of 2 rated this helpful - Rate this topic Updated: July 20, 2012 Ap ...
- Hibernate，get()和load()区别
最主要区别在于,检索策略不同. 无论get和load,首先都会去session缓存中看有没有现成的数据.没有的话,get会采用立即检索策略.即:将对象从数据库检索出来并返回,不使用代理类.load的话 ...
- WWDC 2016 总结
一年一次的WWDC,是开发者充值信仰的时刻,今天你的信仰充值了吗?欢迎在本文下面留言吐槽. 有外媒称,这届WWDC苹果将“fun”伪装成“innovation”,的确,看看另两家老对手,微软有黑科技H ...
- Swoole 遇上 PHP会是怎样的结果呢
一直想写点Swoole的东西,毕竟它重新定义了php,却一直不知道怎么下手写 Swoole涉及的知识点非常多,互为表里,每次想写都发现根本理不出一个头绪 Swoole是一个php的扩展,它的核心目的就 ...
- HTML5与CSS3权威指南
第一章:Web时代的变迁 HTML5放心使用的理由: 兼容性:HTML5在老板本的浏览器上也可以正常运行: 实用性:HTML5内部并没有封装什么很复杂的,不切实际的功能,而只是封装了简单实用的功能: ...
- ACM题目————最短路径问题
Description 给你n个点,m条无向边,每条边都有长度d和花费p,给你起点s终点t,要求输出起点到终点的最短距离及其花费,如果最短距离有多条路线,则输出花费最少的. Input 输入n,m,点 ...
- SQL Server 索引和表体系结构（二）
转自:http://www.cnblogs.com/chenmh 非聚集索引 概述 对于非聚集索引,涉及的信息要比聚集索引更多一些,由于整个篇幅比较大涉及接下来的要写的“包含列的索引”,“索引碎片”等 ...
- 为开发者准备的9个实用PHP代码片段
一．查看邮件是否已被阅读 当你发送邮件时,你肯定很想知道你的邮件是否已被对方查看.下面的代码就能实现记录阅读你邮件的IP地址,还有实际的阅读日期和时间. error_reporting(0);Head ...
- Poj(3259)，SPFA，判负环
题目链接:http://poj.org/problem?id=3259 Wormholes Time Limit: 2000MS Memory Limit: 65536K Total Submis ...