代码:前端与数据库交互的登陆界面

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>登录</title>

</head>

<body>

<p>账号:<input type="text" id="user"></p>

<p>密码:<input type="text" id="pass"></p>

<button id="login">登录</button>

<button id="add">注册</button>

<script src="ajax.js"></script>

<!--

接口文档

method: get

url: './data/user.php'

参数:

type = login 登录

add 注册

user = 用户名

pass = 用户密码

返回:

{err:0,msg:'登录成功'}

-->

<script>

var login = document.querySelector('#login');

var add = document.querySelector('#add');

var user = document.querySelector('#user');

var pass = document.querySelector('#pass');

login.onclick = function (){

ajax({

type: 'get',

url: './data/user.php',

data: {

type: 'login',

user: user.value,

pass: pass.value

},

success: function (data){

var json = JSON.parse(data);

if (json.err == 0){

alert(json.msg);

}

}

});

}

add.onclick = function (){

ajax({

type: 'get',

url: './data/user.php',

data: {

type: 'add',

user: user.value,

pass: pass.value

},

success: function (data){

var json = JSON.parse(data);

if (json.err == 0){

alert(json.msg);

}

}

});

}

</script>

<?php

/*

接口文档

method: get

url: './data/user.php'

参数:

type = login 登录

add 注册

user = 用户名

pass = 用户密码

返回:

{err:0,msg:'登录成功'}

*/

header('Content-Type:text/html;charset=utf-8');

type = _GET'type';

user = _GET'user';

pass = _GET'pass';

if (type \&\& user && $pass) {

//连接数据库

$link = mysqli_connect('localhost','root','xiaoming','userlist');

if(!$link){

die('连接失败:'.mysqli_connect_error());

}

//设置编码

mysqli_set_charset($link,'utf8');

//判断要登录还是要注册

// 执行sql语句

if ($type === 'login'){

login_sql = "select \* from user where username='user' and password='$pass'";

login_res = mysqli_query(link,$login_sql);

login_arr = mysqli_fetch_all(login_res);

if (count($login_arr) > 0){

echo '{"err":0,"msg":"登录成功"}';

} else {

echo '{"err":-3,"msg":"账号或密码错误"}';

}

} else if($type === 'add') {

select_sql = "select \* from user where username='user'";

select_res = mysqli_query(link,$select_sql);

// print_r($select_res );

// die();

select_arr = mysqli_fetch_all(select_res);

if(count($select_arr) > 0){

die('{"err":-1,"msg":"用户名已被占用"}');

} else {

insert_sql = "insert into user (username,password) values ('user','$pass')";

insert_res = mysqli_query(link,$insert_sql);

if ($insert_res){

echo '{"err":0,"msg":"注册成功"}';

} else {

echo '{"err":-2,"msg":"注册失败"}';

}

}

} else {

die('{"err":-9,"msg":"参数错误"}');

}

mysqli_close($link);

} else {

echo '{"err":-9,"msg":"参数错误"}';

}

?>

相关推荐
德思特1 小时前
国产GNSS模拟器崛起:高端性能如何突破技术壁垒实现国产替代?
经验分享
roman_日积跬步-终至千里1 小时前
【算法五】从斐波那契到动态规划:自顶向下、自底向上与状态压缩
算法·动态规划
SelectDB技术团队2 小时前
Apache Doris 在内容 AI 生产链路中的实践:从内容打标到可追溯数据链路
大数据·人工智能·大模型·向量检索·混合搜索·ai 打标·内容分析
从零开始的嵌入式之旅2 小时前
day31
linux·c语言·经验分享·笔记·嵌入式硬件
云飞云共享云桌面2 小时前
机械设计研发成本优化:怎样用一台高性能服务器替代 10 台 SolidWorks 工作站?
大数据·运维·服务器·汽车·制造
维双云2 小时前
2026小程序自助搭建平台有哪些?零基础易上手工具与使用场景整理
大数据
wuyk5552 小时前
9.冒泡排序:像鱼缸泡泡一样的简单排序算法
开发语言·stm32·单片机·算法·排序算法
cetcht88882 小时前
深耕配电智能化升级 多场景项目落地筑牢电力运维安全防线
大数据·数据库·人工智能
无限码力4 小时前
8.26华为OD机试真题 新系统【字符串回文判断】
算法·华为od·华为od机考·华为od机试·华为od上机考试真题·华为od最新机试真题题解·华为od机试真题题库
挨踢诗人4 小时前
金蝶K3 WISE × 乐企平台 直连数电票集成解决方案(商贸企业开票自动化)
大数据·运维·自动化