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的更多相关文章

  1. js ajax post提交 ie和火狐、谷歌提交的编码不一致，导致中文乱码

    今天遇到一个问题找了很久发现: 使用js ajax post提交 ie和火狐.谷歌提交的编码不一致,导致中文乱码 //http://www.cnblogs.com/QGC88 $.ajax({ url ...

  2. JavaScript学习总结【12】、JS AJAX应用

    1.AJAX 简介 AJAX(音译为:阿贾克斯) = Asynchronous JavaScript and XML(异步的 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技 ...

  3. 简单的前端js+ajax 购物车框架(入门篇)

    其实,一直想把自己写的一些js给总结下,也许是能力有限不能把它完美结合起来.只能自己默默的看着哪些代码,无能为力. 今天在公司实在没有事做,突然就想到写下商城的购物车的前端框架,当然我这里只有购物车的 ...

  4. MVC3.0+knockout.js+Ajax 实现简单的增删改查

    MVC3.0+knockout.js+Ajax 实现简单的增删改查 自从到北京入职以来就再也没有接触MVC,很多都已经淡忘了,最近一直在看knockout.js 和webAPI,本来打算采用MVC+k ...

  5. js+ajax编码三级联动

    <!DOCTYPE html><html> <head>  <meta charset="UTF-8">  <title> ...

  6. 注册页面手机验证码无跳转接收[html+js+ajax+php]

    [学习笔记] 来源:注册时需要使用短信验证码,但是注册的时候,点击接收验证码时,会产生跳转(尼玛,这不是我想要的啊!o(╥﹏╥)o) 查询资料和看书之后,知道使用js+ajax可以实现,就从网上找了一 ...

  7. js ajax请求传token

    js  ajax请求传token 方法一: headers: { Authorization: "BasicAuth " + token } 方法二: beforeSend: fu ...

  8. js ajax设置和获取自定义header信息的方法总结

    目录 1.js ajax 设置自定义header 1.1 方法一: 1.2 方法二: 2.js ajax 获取请求返回的response的header信息 3.js ajax 跨域请求的情况下获取自定 ...

  9. 原生js ajax与jquery ajax的区别

    原生js ajax的调用: ajax({ type : "get", url : "02_ajax_get.txt", data : { "userN ...

随机推荐

  1. [转]bit与byte

    本文为转载,感谢博主的分享.原文地址:http://www.cnblogs.com/flyme/archive/2011/08/25/2153596.html bit意为“位”或“比特”,是计算机运算 ...

  2. json_decode和json_encode

    JSON出错:Cannot use object of type stdClass as array解决方法php再调用json_decode从字符串对象生成json对象时,如果使用[]操作符取数据, ...

  3. 160902、Ionic、Angularjs、Cordova搭建Android开发环境

    1.jdk 环境变量配置 path:C:\Program Files\Java\jdk1.7.0_79\bin 2.node.js 因为安装cordova时要用到node.js的npm 下载地址: h ...

  4. eclipse折叠快捷键

    之前按代码折叠快捷键的时候发现时而灵时而不灵,今天突然发现了问题所在: 按ctrl+/(小键盘)使代码左边出现折叠标志 然后再按ctrl+shift+/(折叠)   , ctrl+shift+*(展开 ...

  5. （个人）读取A.CSV修改它的某列，写入B.CSV

    #!/usr/bin/perl -wuse strict;use warnings;use Tie::File; open(IN_FILE,"<E:/Hzj_works/test1.c ...

  6. hobby

    如果把战争的原则凝缩为一个词,那就是集中. 人生有三把钥匙, 接受. 改变. 离开.不能接受,那就改变,不能改变,那就离开. 少问别人为什么,多问自己凭什么. 太平自古将军定,不许将军见太平

  7. Cacti Install

    一.Cacti简介 Cacti是通过snmpget来获取数据,使用RRDtool绘画图形,而且你完全可以不需要了解RRDtool复杂的参数.它提供了非常强大的数据和用户管理功能,可以指定每一个用户能查 ...

  8. jquery中用jqzoom实现放大镜效果

    使用的jqzoom 插件实现的放大镜的效果 jqzoom 里面的代码 : 直接copy就好 //**************************************************** ...

  9. Spring框架bean的配置（2）：SpEL：引用 Bean、属性和方法。。。

    将这些架包放入在工程目录下建立的lib文件夹里,并解压 commons-logging-1.1.1 spring-aop-4.0.0.RELEASE spring-beans-4.0.0.RELEAS ...

  10. 利用反射及jdbc元数据实现通用的查询方法

    ---------------------------------------------------------------------------------------------------- ...