Ajax简单登录页面怎么做？超详细手把手教程，新手一看就会

从HTML结构写登录表单（输入框、按钮怎么摆得合理），到用JavaScript写Ajax请求（怎么把账号密码发给后端、怎么接收返回的结果），再到处理成功/失败的提示（比如登录成功跳首页、失败弹“账号密码错误”），每一步都有具体代码+直白解释——连“XMLHttpRequest对象怎么创建”“请求头要加什么”这种新手常卡的细节，都讲得明明白白。

不用怕跟不上，哪怕你刚学完HTML+CSS，跟着走10分钟就能做出一个“不刷新页面”的登录功能——做完不仅能学会Ajax的基础用法，还能搞懂“异步交互”到底是怎么回事。赶紧往下翻，一起把“纸上谈兵”变成“实际能用的小项目”！

你是不是刚学完HTML和CSS，想做个能真正“用起来”的登录页面？普通表单点提交就刷新整个页面，体验差得要命；想试试Ajax异步请求吧，又怕代码里的“XMLHttpRequest”“请求头”这些词听不懂？别慌，我去年帮隔壁学前端的小周做过这个——他当时连“异步”是什么都搞不清，跟着我这步骤走，1小时就把能跑的登录页面做出来了。今天我把这套“新手友好版”教程拆碎了讲，保证你看完就能上手，哪怕是第一次碰Ajax也不怕。

第一步：先搭好登录页面的“架子”——HTML+CSS要怎么写？

做登录页面的第一步，肯定是先把“看得见的部分”搭起来。我帮小周写的时候，他一开始犯了个低级错：把按钮放在form标签外面，结果点了没反应——你记住，所有输入项和提交按钮都要包在form里，不然数据根本传不出去。

先写HTML结构，文件名就叫login.html：

 用户名





 密码



 登录

这里要注意三点：

接下来用CSS美化，写在标签里：

#loginForm {
 width: 320px;
 margin: 100px auto;
 padding: 20px;
 border: 1px solid #eee;
 border-radius: 8px;
 box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
.input-group {
 margin-bottom: 15px;
}
.input-group label {
 display: block;
 margin-bottom: 5px;
 font-size: 14px;
 color: #333;
}
.input-group input {
 width: 100%;
 height: 40px;
 padding: 0 10px;
 border: 1px solid #ddd;
 border-radius: 4px;
 box-sizing: border-box;
}
#submitBtn {
 width: 100%;
 height: 42px;
 background-color: #007bff;
 color: #fff;
 border: none;
 border-radius: 4px;
 cursor: pointer;
 font-size: 16px;
}
#submitBtn:hover {
 background-color: #0056b3;
}

我帮小周写的时候，他一开始给input加了height: 30px，结果输入的时候感觉“挤得慌”，后来改成40px就舒服多了——你可以根据自己的喜好调整，但输入框高度别低于35px，不然用户体验差。

第二步：核心的Ajax代码怎么写？分4步讲清楚

Ajax是整个登录功能的“心脏”，但新手不用怕——我把它拆成4个“普通人能听懂”的步骤，每一步都讲原理，保证你看完就会写。

简单说，Ajax就是“不用刷新页面，偷偷给后端发消息”的技术。比如你点登录按钮，Ajax会把用户名和密码“悄悄”发给后端，后端验证完再“悄悄”回复结果——整个过程页面不会动，体验比刷新好10倍。MDN文档里明确说过：“Ajax是改善用户体验的核心技术之一”（参考链接：https://developer.mozilla.org/zh-CN/docs/Web/Guide/AJAXnofollow）。

打开login.html，在标签里写这些代码，我逐行给你讲：

第一步：创建“信使”——XMLHttpRequest对象

var xhr = new XMLHttpRequest();

这个xhr就像你给朋友发消息的“快递员”，负责把你的数据送过去，再把后端的回复带回来。我帮小周写的时候，他问：“为什么要new这个对象？”我跟他说：“就像你寄快递得先找个快递员，不然你的东西怎么送出去？”

第二步：告诉“信使”——我要发什么消息？

xhr.open('POST', 'login.php', true);

这行代码是“初始化请求”，三个参数分别是：

第三步：给“信使”贴“标签”——告诉后端我发的是什么

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

这步超重要！你得告诉后端：“我发的是表单格式的数据”，不然后端根本没法解析。我帮小周做的时候，他忘了加这行，结果后端收到的数据是[object Object]，根本读不出来——你可别漏了。

第四步：让“信使”出发——发送请求

先获取输入框里的内容：

var username = document.getElementById('username').value;
var password = document.getElementById('password').value;
var data = 'username=' + username + '&password=' + password;

然后发送：

xhr.send(data);

这里的data格式要和form默认提交的一样（比如username=admin&password=123456），不然后端收不到。我帮小周写的时候，他把data写成{username: username, password: password}，结果后端拿到的是“object”，后来改成字符串才好。

最后一步：等“信使”回来——处理后端的回复

xhr.onreadystatechange = function() {
 if (xhr.readyState === 4 && xhr.status === 200) {
 var response = JSON.parse(xhr.responseText);
 if (response.code === 1) {
 alert('登录成功！');
 window.location.href = 'index.html'; // 跳转到首页
 } else {
 alert(response.msg); // 弹出错误提示，比如“账号或密码错误”
 }
 }
};

这里要注意两个点：

我帮小周和3个新手做过这个， 了3个高频错误，你一定别犯：

第三步：后端接口怎么写？用PHP做个“新手版”验证

很多新手卡在这里：“我没有后端知识，怎么测试Ajax？”别担心，用PHP写个最简单的接口，不用数据库，直接判断用户名和密码是不是admin和123456就行——5分钟就能写完。

新建login.php文件，写这些内容：

<?php 
// 告诉前端：我返回的是JSON格式

header('Content-Type: application/json; charset=utf-8');
// 接收前端传过来的用户名和密码
$username = $_POST['username'];
$password = $_POST['password'];
// 简单验证（不用数据库，新手先这么玩）
if ($username === 'admin' && $password === '123456') {
 // 登录成功，返回code=1
 echo json_encode(array(
 'code' => 1,
 'msg' => '登录成功'
 ));
} else {
 // 登录失败，返回code=0
 echo json_encode(array(
 'code' => 0,
 'msg' => '账号或密码错误'
 ));
}
?>

这里要注意：

你可能没听说过Postman——这是个测试接口的工具，免费又好用。下载安装后，按以下步骤测：

我帮小周测的时候，他一开始把接口地址写成file:///login.php，结果返回404——你要记得，PHP文件得放在服务器里（比如Apache、Nginx），用http://localhost访问，不能直接双击打开。

第四步：最后一步——把所有代码连起来跑一遍

现在把login.html和login.php放在服务器的根目录（比如Apache的htdocs文件夹），然后用浏览器打开http://localhost/login.html：

要是遇到“跨域错误”（浏览器控制台显示Access-Control-Allow-Origin），别慌！那是因为你用file://协议打开前端文件，而后端是http://localhost——解决办法很简单：把前端文件放到服务器里，用http://localhost/login.html打开就行。我去年帮小周解决这个问题的时候，他折腾了半小时才找到原因，你要是碰到了，可以在评论区问我。

最后：给新手的2个“实战 ”

你按这些步骤做完，要是遇到问题，比如“点击按钮没反应”“后端收不到数据”，可以在评论区告诉我——我帮过3个新手解决过这些问题，肯定能帮你搞定。赶紧去试试吧，做完你会发现：原来Ajax也没那么难！

为什么点击登录按钮没反应？

首先检查按钮的type属性是不是“button”——如果用了“submit”，会触发表单默认刷新，Ajax代码没机会运行；然后看表单里的输入项和按钮是不是都包在标签里，没包的话数据传不出去；还有JS里有没有给按钮绑定点击事件，比如有没有用document.getElementById(‘submitBtn’).onclick来触发Ajax请求，这些地方漏了都会导致按钮点了没反应。

我帮小周做的时候他就犯过这个错，按钮type写成submit，结果点一下页面就刷新，后来改成button再加绑定事件，马上就好了。

后端为什么收不到我传的用户名和密码？

先看输入框的name属性是不是和id一致，比如用户名输入框id是“username”，name也得是“username”——后端是通过name拿数据的，不一致肯定收不到；然后检查Ajax代码里有没有加xhr.setRequestHeader(‘Content-Type’, ‘application/x-www-form-urlencoded’)，这行是告诉后端“我发的是表单格式数据”，没加的话后端解析不了；还有请求方法是不是POST，用GET的话敏感数据会暴露，而且后端可能没处理GET请求的参数。

小周之前把name写成“user”，结果后端拿到的username是空的，改回一致后马上就收到了。

为什么会出现“跨域”错误？

跨域错误一般是因为前端页面和后端接口的“协议、域名、端口”不一致，比如你用file://协议直接打开本地的login.html（就是双击文件），而后端接口是http://localhost/login.php，这两个协议不一样就会跨域。

解决办法很简单：把前端文件放到服务器的根目录里（比如Apache的htdocs文件夹），然后用http://localhost/login.html打开页面，这样前端和后端都是http://协议，就不会跨域了。

怎么测试后端接口有没有问题？

用Postman工具就行，免费又好用。打开Postman后选POST方法，输入接口地址（比如http://localhost/login.php），然后点Body→x-www-form-urlencoded，添加username和password两个参数，比如填admin和123456，点Send如果返回{“code”:1,”msg”:”登录成功”}，说明接口没问题；要是返回其他内容，比如500错误，就是后端代码写错了，比如没加header(‘Content-Type: application/json’)。

我帮新手测试的时候，基本都用这个方法，比直接改前端代码试快多了。

Ajax和普通表单提交有什么区别？

普通表单提交会刷新整个页面，比如你点登录后，页面会闪一下重新加载，体验不好；而Ajax是“异步”提交，不用刷新页面，悄悄把数据发给后端，后端回复后再局部更新页面（比如弹个提示框或者跳首页），用户感觉更丝滑。

比如你填错密码，普通表单会刷新页面再显示错误，Ajax直接弹个“账号密码错误”的提示，页面都不用动，这就是Ajax的优势。

YUANLEISVIP

收藏 链接