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 ...
随机推荐
- 有趣的insert死锁
昨天看到一个很有意思的死锁,拿来记录下: 环境:deadlock on 事务隔离级别: read commited 表结构: root::>show create table lingluo\G ...
- Android NDK开发（五）--C代码回调Java代码【转】
转载请注明出处:http://blog.csdn.net/allen315410/article/details/41862479 在上篇博客里了解了Java层是怎样传递数据到C层代码,并且熟悉了大部 ...
- 【python cookbook】【数据结构与算法】4.找到最大或最小的N个元素
问题:想在某个集合中找出最大或最小的N个元素 解决方案:heapq模块中的nlargest()和nsmallest()两个函数正是我们需要的. >>> import heapq &g ...
- 【原创】Nexus搭建Maven私服
前言: 公司一般都有个自己的私服来管理各种jar包,原因大概有这么3个,分别是: 1.有的公司不能访问外网,只能通过私服来管理jar包和插件: 2.公司网速比较慢,通过公司的私服来获取jar包比较快: ...
- sass初步认识2
sass可以使用变量,采用 $ 来进行变量声明,格式为: $highlight-color:#f90;(声明方式和css属性声明类似.使用的变量名可以更加语义化) 与js分为全局变量和局部变量类似,s ...
- 动态规划之LCS(最大公共子序列)
#include <stdio.h> #include <string.h> int b[50][50]; int c[50][50]; int length = 0; voi ...
- Django的第一个web程序及深入学习
本学习历程参照Practical Django Projects和http://djangobook.py3k.cn上翻译的内容进行 注:本例以本机加以说明: 根据Django的安装过程可知:在命令行 ...
- Argus
Argus Time Limit: 1000MS Memory Limit: 30000K Total Submissions: 10186 Accepted: 4801 Description A ...
- 实现multbandblend
一.首先实现 laplacian金字塔的分割和重构 #include "stdafx.h" #include <iostream> #include <vecto ...
- python-学习笔记之-Day5 双层装饰器 字符串格式化 python模块 递归 生成器 迭代器 序列化
1.双层装饰器 #!/usr/bin/env python # -*- coding: utf-8 -*- # author:zml LOGIN_INFO = False IS_ADMIN = Fal ...