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. 怎样使用AutoLayOut为UIScrollView添加约束

    1.在ViewController中拖入1个UIScrollView,并为其添加约束 约束为上下左右四边与superview对齐 2.在scrollview中,拖入1个UIView,为了便于区分将其设 ...

  2. jython学习笔记3

    1.os.environ["HOME"] 为什么这句话在我的STS中打印不出东西,还报错 Method Description close() Close file fileno( ...

  3. 数字转表格标题 Excel Sheet Column Title

    #include<string>using namespace std;class Solution {public:   string convertToTitle(int n) {  ...

  4. Temporary TempDB Tables [AX 2012]

    Temporary TempDB Tables [AX 2012] 1 out of 4 rated this helpful - Rate this topic Updated: November ...

  5. MySQL Replication 优化和技巧、常见故障解决方法

    MySQL 主从同步错误(error)解决(转) sql_slave_skip_counter参数 附: 一些错误信息的处理,主从服务器上的命令,及状态信息. 在从服务器上使用show slave s ...

  6. ASP+Access UTF-8 网页乱码问题解决办法

    用ACCESS数据库和ASP做网站时用UTF-8编码有时会出现乱码,再者网页出错或者刷新页面后就是乱码,如果数据库取值乱码在开头加上<%@LANGUAGE="VBSCRIPT" ...

  7. ecshop发票不能使用出现flow.php on line 723等报错

    最模板给客户ecshop网站做编码转换出现个问题,网站在点结算页面出现Warning: Invalid argument supplied for foreach flow.php on line 7 ...

  8. function adapter（函数适配器）和迭代器适配器

    所谓function adapter(函数适配器)是指能够将不同的函数对象(或是和某值或某寻常函数)结合起来的东西,它自身也是个函数对象. 迭代器适配器  运用STL中的迭代器适配器,可以使得算法能够 ...

  9. HDU-1042 N！

    首先明白这是大数问题,大数问题大多采用数组来实现.如何进位.求余等.比如1047 (Integer Inquiry): 对于1042问题 计算10000以内数的阶乘,因为10000的阶乘达到35660 ...

  10. 杭电1170 Balloon Comes

    Problem Description The contest starts now! How excited it is to see balloons floating around. You, ...