javaweb--ajax的应用

登录页面是我们最常见的操作，但是并不是所有的登录都可以通过表单来完成。

下面我们完成一个登录操作使用ajax技术

前端代码：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登录界面测试</title>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="js/jquery-1.8.3.js"></script>
<script type="text/javascript">
 $(function(){
    //登录
    $("#btn_login").click(function() {
        $.ajax({
            type: "post",
            url: "test?method=Login",
            data:{
              "email":$("#email").val(),
              "password":$("#password").val()
            },
            dataType: "text", //返回数据类型
            success: function(msg){
               if("loginError" == msg){
                    alert("消息提醒", "用户名或密码错误!", "warning");
                } else if("loginSuccess" == msg){
                    alert("登录成功");
                } else{
                    alert(msg);
                } 
            }
        });
    });
 });
</script>
</head>
<body>
    <div class="content">
        <div class="form sign-in">
            <h2>欢迎回来</h2>
            <label>
                <span>邮箱</span>
                <input type="email" id="email" name="email" />
            </label>
            <label>
                <span>密码</span>
                <input type="password" id="password" name="password" />
            </label>
            <p class="forgot-pass"><a href="javascript:">忘记密码？</a></p>
            <button type="button" class="submit" id="btn_login" name="btn_login">登 录</button>
        </div>
        <div class="sub-cont">
            <div class="img">
                <div class="img__text m--up">
                    <h2>还未注册？</h2>
                    <p>立即注册，发现大量机会！</p>
                </div>
                <div class="img__text m--in">
                    <h2>已有帐号？</h2>
                    <p>有帐号就登录吧，好久不见了！</p>
                </div>
                <div class="img__btn">
                    <span class="m--up">注 册</span>
                    <span class="m--in">登 录</span>
                </div>
            </div>
            <div class="form sign-up">
                <h2>立即注册</h2>
                <label>
                    <span>用户名</span>
                    <input type="text" />
                </label>
                <label>
                    <span>邮箱</span>
                    <input type="email" id="remail" name="remail" />
                </label>
                <label>
                    <span>密码</span>
                    <input type="password" id="rpassword" name="rpassword" />
                </label>
                <button type="button" class="submit" id="btn_re" name="btn_re">注 册</button>
            </div>
        </div>
    </div>
    <script src="js/script.js"></script>
</body>
</html>

 

 

后端的数据接收

import java.io.IOException;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class Test extends HttpServlet {
    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        String email=request.getParameter("email");
        String password=request.getParameter("password");
        System.out.println("email="+email+"password="+password);
        //给前端一个回应
        //response.getWriter().write("vcodeError");
    }
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        doGet(request, response);
    }

}

 

 

web.xml的配置

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
  <display-name>testweb</display-name>
  <welcome-file-list>
    <welcome-file>index.html</welcome-file>
    <welcome-file>index.htm</welcome-file>
    <welcome-file>index.jsp</welcome-file>
    <welcome-file>default.html</welcome-file>
    <welcome-file>default.htm</welcome-file>
    <welcome-file>default.jsp</welcome-file>
  </welcome-file-list>
  <servlet>
          <servlet-name>Test</servlet-name>
          <servlet-class>com.learn.test.Test</servlet-class>
  </servlet>
  <servlet-mapping>
          <servlet-name>Test</servlet-name>
          <url-pattern>/test</url-pattern>
  </servlet-mapping>
</web-app>
posted @ 2020-01-08 17:26  薄眠抛却陈年事。  阅读(315)  评论(0)  编辑  收藏  举报