AJAX实现登录跳转和一些基本

首先，创建一个新的项目
在这里插入图片描述

准备工作做好了，接下来就要开始写代码了：
1、首先了解一下AJAX的一些基本的知识：在index写入:

2、在web下面创建一个data的包，在创建一个userlist.txt的文本文件，写入数据：

3、创建一个getUserList的HTML文件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function loadUserList() {
            //声明请求对象
            var xmlhttp;
            if (window.XMLHttpRequest){
                //IE7+，Firefox，Chrome，Opera，Safari浏览器里执行代码
                xmlhttp = new XMLHttpRequest();
            } else {
                //IE5，IE6浏览器里执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

            }
            //监听请求状态变化，一旦有变化，执行相应的回调函数
            xmlhttp.onreadystatechange = function(){
                //判断请求是否成功，响应是否完成
                if (xmlhttp.status == 200 && xmlhttp.readyState == 4){
                    //利用响应文本修改页面元素内容
                    document.getElementById("users").innerHTML = xmlhttp.responseText;
                }

            }
            //新建HTTP请求，采用GET方式，请求采用异步方式
            xmlhttp.open("GET","/AjaxDemo/data/userlist.txt",false);
            //发送HTTP请求,不传递参数
            xmlhttp.send(null);
        }
    </script>
</head>
<body>
<h3>用户列表</h3>
<div id="users"></div>
<hr>
<button type="button" onclick="loadUserList()">获取用户列表</button>
</body>
</html>

在这里插入图片描述

以上就是AJAX的一些元素应用和实现在这里插入图片描述
现在我们来实现登录功能：
创建一个登录页面实现登录功能，然后创建一个登录成功和一个失败的页面为页面跳转提供页面`

用户登录

<table border="1" cellpadding="10" style="margin: 0px auto">
    <tr>
        <td align="center">用户名</td>
        <td><input type="text" id="username"/></td>
    </tr>
    <tr>
        <td align="center">密&nbsp;码</td>
        <td><input type="password" id="password"/></td>
    </tr>
    <tr align="center">
        <td colspan="2">
            <button type="submit" onclick="login()">登录</button>
            <button type="reset" onclick="reset()">重置</button>
        </td>
    </tr>
</table>

获取简单的用户信息实现登录：如获取用户名和密码，在请求在这里插入图片描述判断是否正常跳转：如果正常则跳转判断用户输入的是否是正确的再实现跳转：实现下面的重置清空输入框的数据：创建一个Java文件，LoginServlet类,创建一个登录处理器的功能

登录成功和失败页面：接下来就可以来看一下效果了：在这里插入图片描述

来源：CSDN

作者：清❤

链接：https://blog.csdn.net/loveqingqingqing/article/details/103234808

标签

ajax

xmlhttp