简单登录页面

最新推荐文章于 2023-10-19 20:48:44 发布

小痞孩i

最新推荐文章于 2023-10-19 20:48:44 发布

阅读量1.1k

点赞数

文章标签： javascript

本文链接：https://blog.csdn.net/weixin_50394817/article/details/123782163

版权

项目场景：

前端登录请求

问题描述

前端向后端发情数据请求，如何通过最简单得AJAX实现

function get() {
    var name = document.getElementById('user').value;
    var password = document.getElementById('pass').value;

    //var name = prompt("请输入你的用户名","")
    if (name == '' || password == '') {
        alert('用户名和密码不能为空');
        //document.getElementById('user').focus();
        return false;
    } else {
        $.ajax({
            type: 'POST', // 向后端发起得请求格式
            url: "'后端服务器IP'/‘接口名’", // 路由
            data: {
                "user_name": name,
                "user_pass": password
            }, // 向后端请求得数据
            success: function (res) {
                console.log(res.status);
                if (res.status == 2000) {
                    window.location.href = "add_page.html"; //跳转到add_page这个页面
                } else {
                    alert('账号或密码错误！请重新输入');
                    document.getElementById("user").value = "";
                    document.getElementById("pass").value = "";
                }
            },
            error: function (XMLHttpRequest, textStatus, errorThrown) {
                alert('网络或服务器错误');
                console.log(errorThrown);
            },
            dataType: "json", // 返回得数据格式
            async: false
        })
    }
};

function myFunction() {
    if (event.keyCode == 13) {
        get();
    }
} // 回车实现登录

前端代码：

<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>车辆管理系统</title>
	<link rel="stylesheet" href="css/login_page.css">
	<link rel="shortcut icon" href="img/car.png">
	<script type="text/javascript" src="js/login_page.js"></script>
	<script src="./jquery/jquery.min.js"></script>
</head>

<body>
	<div class="logo_box">
		<!-- <img class="logo_img" src="img/c.jpg"> -->
	</div>
	<div class="login_box">
		<h1 class="title">欢迎登录</h1>
		<input class="input_box" type="text" id="user" onfocus="javascript:this.value=''" placeholder="用户名">
		<input class="input_box" type="password" id="pass" placeholder="密码" onkeydown="myFunction()">
		<input class="button_box" type="button" onclick="get()" value="登录" onkeydown="myFunction()">
	</div>

</body>

</html>