登录页面是我们最常见的操作，但是并不是所有的登录都可以通过表单来完成。
下面我们完成一个登录操作使用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>
73
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
