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 ...
随机推荐
- Android的init过程（二）：初始化语言（init.rc）解析【转】
转自:http://www.cnblogs.com/nokiaguy/p/3164799.html Android的init过程(一) 本文使用的软件版本 Android:4.2.2 Linux内核: ...
- linux中的优先搜索树的实现--prio_tree【转】
转自:http://blog.csdn.net/bailyzheng/article/details/8041943 linux中的优先搜索树的实现--prio_tree prio_tree在linu ...
- Java中多线程使用匿名内部类的方式进行创建3种方式
/* * 匿名内部类的格式: */ public class ThreadDemo { public static void main(String[] args) { // 继承thread类实现多 ...
- WinCE Show App Icon
找个图片,例如背景透明的jpg或png,上http://www.pic2icon.com/smartphone_wince_icon_generator.php这个网站转换下. 在项目属性中,设为图标 ...
- std的find和reverse_iterator联合使用
上代码: // test2013.cpp : 定义控制台应用程序的入口点. // #include "stdafx.h" #include <stdlib.h> #in ...
- 什么情况下用+运算符进行字符串连接比调用StringBuffer/StringBuilder对象的append性能好
如果在编写代码的过程中大量使用+进行字符串评价还是会对性能造成比较大的影响,但是使用的个数在1000以下还是可以接受的,大于10000的话,执行时间将可能超过1s,会对性能产生较大影响.如果有大量需要 ...
- Struts输出流向jsp页面写入图片乱码
通过Struts2输出字节流将图片写到jsp页面上,之前用jquery的div对象的html()方法接收一直显示乱码,查了很多网页都找不到解决办法,不是说contentype="multip ...
- tomcat 启动时参数设置说明
使用Intellij idea 其发动tomcat时会配置启动vm options :-Xms128m -Xmx768m -XX:PermSize=64M -XX:MaxPermSize=512m. ...
- java从命令行接收多个数字，求和之后输出结果
设计思想:获取输入数的个数,然后将要相加的数字转换成为浮点型进行相加,最后进行输出 源代码: package Add; import java.util.Scanner; // 严羽卿 2015. ...
- c#之线程池优先级
using System; using System.Threading; namespace ConsoleApplication1 { class Program { static void Ma ...