Nodejs+express+ajax实现用户登录无刷新验证的问题，求指导？

Nodejs+express+ajax实现用户登录无刷新验证的问题，求指导？

我用nodejs,express,做的后台，现在想要实现用户登录或者注册的无刷新验证，正好就是用$.ajax()或者$.post()了，但是没有成功，列出前台和后台代码，请大家指点下： 前台：$("#txtUsername").blur(function(){ $.post("…/login_verify", {“username”:$("#txtUsername").val(), “password”:$("#txtPassword").val()}, function(data){ alert(data); if (data == 1) { $("#username.info").html(""); flag1 = true; return true; } else { $("#username.info").css(“color”, “red”); $("#username.info").html(“用户名错误！”); flag1 = false; return false; } }); }); 后台：User.get(req.body.username, function(err, user) { if(err){ console.log(err); } if (user) res.write(“0”); else res.write(“1”); res.end(); });

User.get(req.body.username, function(err, user) {
	if (user.password != password) {
	res.wirte("0");
	}else {
	res.write("1");
	}
res.end();
});

错误时：db object already connecting, open cannot be called multiple times

求指导，大三学生


5 回复

好的，让我们来解决这个问题。首先，我们需要确保前端和后端的代码都正确地处理了AJAX请求。下面是改进后的代码示例：

前端代码

$("#txtUsername").blur(function(){
    var username = $("#txtUsername").val();
    var password = $("#txtPassword").val();

    $.ajax({
        url: "/login_verify",
        type: "POST",
        data: {username: username, password: password},
        success: function(data) {
            if (data === "1") {
                $("#username.info").html("");
                flag1 = true;
            } else {
                $("#username.info").css("color", "red");
                $("#username.info").html("用户名或密码错误！");
                flag1 = false;
            }
        },
        error: function() {
            alert("请求失败，请检查网络连接或服务器状态！");
        }
    });
});

后端代码（Express）

const express = require('express');
const User = require('./models/User'); // 假设你有一个User模型
const app = express();

app.use(express.json()); // 中间件，解析JSON请求体

app.post('/login_verify', (req, res) => {
    const { username, password } = req.body;

    User.findOne({ username: username }, function(err, user) {
        if (err) {
            console.error(err);
            res.status(500).send('服务器错误');
            return;
        }

        if (!user) {
            res.send("0"); // 用户不存在
            return;
        }

        if (user.password !== password) {
            res.send("0"); // 密码错误
            return;
        }

        res.send("1"); // 登录成功
    });
});

app.listen(3000, () => {
    console.log('服务器运行在 http://localhost:3000');
});

解释

  1. 前端:

    • 使用$.ajax()代替$.post()，这样可以更好地处理请求失败的情况。
    • 在AJAX请求中传递username和password作为数据。
    • 成功回调函数根据返回的数据更新页面上的信息。

  2. 后端:

    • 使用express.json()中间件来解析请求体中的JSON数据。
    • 使用User.findOne()方法查找数据库中的用户。如果用户存在，则比较密码；否则，直接返回错误信息。
    • 返回"1"表示登录成功，"0"表示登录失败。

注意事项

  • 确保你的数据库连接只打开一次，避免重复连接问题。
  • 在实际应用中，不要明文存储密码，应使用哈希算法加密密码。

希望这些示例代码和解释能帮助你解决问题！


res.json({error:0}); 返回json这样写！多看下express的帮助文档！ 接受的时候 data.error === 0

虽然我的可以传过去字符串，但是我也试试你的写法，我的功能还没有成功啊，哎

从报错看，好像是你数据库那里出错了，跟你的登录流程没什么关系

根据你的描述和代码，存在一些问题需要修正。以下是改进后的示例代码，包括前端和后端的修改。

前端代码

首先，确保你的前端代码正确地发送异步请求，并且能够处理返回的数据。

$("#txtUsername").blur(function() {
    $.ajax({
        url: "/login_verify", // 确保路径正确
        type: "POST",
        data: {
            username: $("#txtUsername").val(),
            password: $("#txtPassword").val()
        },
        success: function(data) {
            if (data === '1') { // 检查返回数据
                $("#username.info").html(""); // 清空信息
                flag1 = true; // 设置标志
            } else {
                $("#username.info").css("color", "red");
                $("#username.info").html("用户名错误！");
                flag1 = false;
            }
        },
        error: function(xhr, status, error) {
            console.error("AJAX Error: ", status, error);
        }
    });
});

后端代码

确保你的Express后端代码正确处理数据库查询和响应。

const express = require('express');
const User = require('./models/User'); // 假设你有一个User模型
const app = express();

app.use(express.json()); // 中间件解析JSON请求体

app.post('/login_verify', (req, res) => {
    const { username, password } = req.body;

    User.findOne({ username }, (err, user) => {
        if (err) {
            console.error(err);
            res.status(500).send('服务器错误');
            return;
        }

        if (!user || user.password !== password) {
            res.send('0'); // 用户名或密码错误
        } else {
            res.send('1'); // 登录成功
        }
    });
});

// 其他路由和中间件

app.listen(3000, () => {
    console.log('Server is running on port 3000');
});

解决错误 db object already connecting, open cannot be called multiple times

确保你只初始化一次数据库连接。可以在应用启动时进行连接：

const mongoose = require('mongoose');

mongoose.connect('mongodb://localhost/mydatabase', {
    useNewUrlParser: true,
    useUnifiedTopology: true
}).then(() => console.log('Connected to MongoDB'))
  .catch(err => console.error('Failed to connect to MongoDB', err));

这样可以避免重复连接数据库的问题。希望这些示例代码和解释能帮助你解决问题！

回到顶部