Nodejs + express怎么实现Ajax方式及其简单功能。

Nodejs + express怎么实现Ajax方式及其简单功能。

刚刚学nodejs，想用ajax实现登录的功能，实在没什么概念。 前端代码

$(function(){
		$("#submit").click(function(){
			var params ={
    			username: $("#username").val(),
    			password: $("#password").val()
    		};
    		$.ajax({
    			data: params,
    			url: 'http://127.0.0.1:3000/',
    			dataType: 'json',
    			cache: false,
    			timeout: 5000,
    			success: function(data){
    				var data = $.parseJSON(data);
    				alert(data.message);
    			},
    			error: function(jqXHR, textStatus, errorThrown){
    				alert('error ' + textStatus + " " + errorThrown);  
    			}
    		});
		});
		
	});

后端要怎么写呢?我只想做后端获得数据就行了。

module.exports = function(app){
app.get('/',function(req,res){
	console.log(req.body['username']);
	res.render('index',{
		title: 'ajax'
	});
});
}

获得的却是undefine，且路径都发生了变化。

刚刚学习nodejs，求指教


11 回复

好的，下面是关于如何使用 Node.js 和 Express 实现简单的 Ajax 登录功能的详细解答。我们将分前后端两个部分来讲解。

前端代码

前端使用 jQuery 发送 Ajax 请求到服务器，并处理响应。以下是前端代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Login with Ajax</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <form id="loginForm">
        <label for="username">Username:</label>
        <input type="text" id="username" name="username"><br>
        <label for="password">Password:</label>
        <input type="password" id="password" name="password"><br>
        <button type="button" id="submit">Login</button>
    </form>

    <script>
        $(document).ready(function() {
            $("#submit").click(function(event) {
                event.preventDefault(); // Prevent the form from submitting normally
                var params = {
                    username: $("#username").val(),
                    password: $("#password").val()
                };

                $.ajax({
                    url: '/login', // URL to send the request to
                    method: 'POST', // HTTP method
                    data: params,
                    dataType: 'json',
                    success: function(response) {
                        alert(response.message);
                    },
                    error: function(xhr, status, error) {
                        alert('Error: ' + error);
                    }
                });
            });
        });
    </script>
</body>
</html>

后端代码

在后端，我们需要使用 Express 来创建一个路由处理登录请求，并返回相应的 JSON 数据。以下是后端代码：

首先确保你已经安装了 Express：

npm install express body-parser

然后创建 server.js 文件：

const express = require('express');
const bodyParser = require('body-parser');

const app = express();
const port = 3000;

// Middleware to parse JSON bodies
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// Route to handle login requests
app.post('/login', (req, res) => {
    const { username, password } = req.body;
    console.log(`Received username: ${username}, password: ${password}`);

    if (username === 'admin' && password === 'password') {
        res.json({ message: 'Login successful!' });
    } else {
        res.status(401).json({ message: 'Invalid credentials' });
    }
});

// Serve the HTML file
app.get('/', (req, res) => {
    res.sendFile(__dirname + '/index.html');
});

app.listen(port, () => {
    console.log(`Server running on http://localhost:${port}`);
});

解释

  1. 前端:

    • 使用 jQuery 的 $.ajax 方法发送 POST 请求到 /login 路径。
    • 在 success 回调中处理成功响应，在 error 回调中处理错误。
    • 阻止表单的默认提交行为 (event.preventDefault()).

  2. 后端:

    • 使用 body-parser 中间件解析请求体中的 JSON 数据。
    • 创建一个 POST 路由 /login 来处理登录请求。
    • 检查用户名和密码是否正确，然后返回相应的 JSON 响应。
    • 创建一个 GET 路由 / 来提供 HTML 表单页面。

这样，你就完成了使用 Node.js 和 Express 实现简单的 Ajax 登录功能。希望这对你有帮助！


我昨天问的同样的问题，后端是，res.json({“data”:“1”});括号内是你想要传的json数据。我前端用的$。post()

我按照你的方法加上去了，但是还是不行。我需要一个demo。。。谢谢

前端修改

$.ajax({
	......
	url: '/login',
	type:'post',
	......
})

后端增加

app.post('/login',function(req,res){
	if(req.body.username=='...'&&req.body.password=='...'){
		res.json({success:1});
	}
});

有兴趣的话看看angularjs

提供一个我React里面的一个例子: componentDidMount: function() { //ajax请求 var xmlhttp; if(window.XMLHttpRequest) { xmlhttp = new XMLHttpRequest(); }else if(window.ActiveXObject) { xmlhttp = new ActiveXObject(‘Microsoft.XMLHTTP’); }else { alert(‘必须提高浏览器版本才能浏览!’); return false; } //回调 xmlhttp.onreadystatechange = function(){ if(xmlhttp.readyState == 4) { if(xmlhttp.status == 304 || (xmlhttp.status >= 200 && xmlhttp.status < 300)) { var renderMessage = JSON.parse(xmlhttp.responseText); if(this.isMounted()){ this.setState({ data: renderMessage, }); } } } }.bind(this); //请求 xmlhttp.open(‘post’,’/photo.list.server’,true); xmlhttp.setRequestHeader(“Content-Type”,“application/x-www-form-urlencoded;charset=utf-8”); xmlhttp.send(null); } 以上是前端的代码。

后台其实逻辑如下: var mongoose = require(‘mongoose’); var PhotoList = mongoose.model(‘PhotoList’); module.exports = function(req, res, next) { PhotoList.find({}, function(err, docs) { if(err) { res.end(‘Error’); return next(); } res.send(JSON.stringify(docs)); }); }

来个完整的,国内目前应该不会有比这个更完整的入门demo了 https://github.com/jinwyp/AngularJS-Learning-Demo/blob/master/app%2Froutes%2Fapi.js

https://github.com/jinwyp/AngularJS-Learning-Demo/blob/master/app%2Fcontrollers%2Fuser%2Fuser.js

楼主用的什么浏览器？

body-parser安了么

mark

为了实现一个简单的登录功能，你需要确保前端发送的数据能够被后端正确接收。这里展示如何使用Express和Node.js来处理AJAX请求，并获取前端传递的数据。

前端代码（jQuery）

你已经使用了jQuery的$.ajax方法来发送POST请求。这非常好。你需要确保将请求类型设置为POST，因为登录操作通常涉及敏感信息，更适合通过POST发送。

$(function() {
    $("#submit").click(function() {
        var params = {
            username: $("#username").val(),
            password: $("#password").val()
        };
        $.ajax({
            type: 'POST', // 修改为POST
            data: params,
            url: 'http://127.0.0.1:3000/login', // 更改URL以匹配后端路由
            dataType: 'json',
            cache: false,
            timeout: 5000,
            success: function(data) {
                alert(data.message);
            },
            error: function(jqXHR, textStatus, errorThrown) {
                alert('error ' + textStatus + " " + errorThrown);
            }
        });
    });
});

后端代码（Express）

你需要在后端定义一个处理POST请求的路由来接收和处理这些数据。使用Express中间件如body-parser来解析请求体。

首先安装body-parser：

npm install body-parser

然后，在你的Express应用中添加以下代码：

const express = require('express');
const bodyParser = require('body-parser');

const app = express();

// 使用body-parser中间件来解析请求体
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// 处理登录请求
app.post('/login', (req, res) => {
    const { username, password } = req.body;
    console.log(`Received login attempt for user ${username}`);
    
    // 检查用户名和密码
    if (username === 'admin' && password === 'password') {
        res.json({ message: 'Login successful!' });
    } else {
        res.status(401).json({ message: 'Invalid credentials' });
    }
});

// 渲染首页
app.get('/', (req, res) => {
    res.render('index', {
        title: 'AJAX Login Example'
    });
});

const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
    console.log(`Server is running on port ${PORT}`);
});

这个例子展示了如何使用Express处理AJAX POST请求来验证用户名和密码。如果验证成功，则返回成功的消息；否则，返回错误消息。

回到顶部