Nodejs&ajax; 实例 前端向后端传值方式

Nodejs&ajax; 实例 前端向后端传值方式

1.求node.js 结合ajax 的完整实例 2.页面的参数怎样从前端传递到node.js后端进行处理（除了用表单提交，然后后端用req.body.xx提取之外） 例如若demo是个连接的话，连接demo页面会跳转，但怎样将demo这个值传回后端，进行相关处理了？

6 回复

Node.js & AJAX 实例：前端向后端传值方式

在Web开发中，使用AJAX技术可以让前端与后端进行异步通信，从而实现更流畅的用户体验。本文将通过一个简单的例子展示如何在Node.js中使用AJAX来从前端向后端传递数据。

示例需求

假设我们有一个网页，用户可以在输入框中输入一些信息，然后通过点击按钮将这些信息发送到后端进行处理。后端接收到这些信息后，可以做一些操作，比如保存到数据库或者进行一些计算。

前端代码

首先，我们创建一个简单的HTML文件，包含一个输入框、一个按钮以及用于显示结果的<div>元素。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX Example</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <input type="text" id="info" placeholder="Enter some information here">
    <button id="send">Send to Server</button>
    <div id="result"></div>

    <script>
        $(document).ready(function() {
            $('#send').click(function() {
                var info = $('#info').val();
                
                $.ajax({
                    url: '/processInfo',  // 后端处理接口
                    method: 'POST',
                    data: {data: info},  // 要传递的数据
                    success: function(response) {
                        $('#result').text('Server response: ' + response);
                    },
                    error: function(error) {
                        console.log('Error:', error);
                    }
                });
            });
        });
    </script>
</body>
</html>

在这个示例中，当用户点击“Send to Server”按钮时，会触发一个AJAX请求，将输入框中的内容发送到服务器上的/processInfo接口。

后端代码

接下来，我们使用Express框架搭建一个简单的Node.js服务器，并处理来自前端的请求。

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

const app = express();

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

// 定义处理信息的路由
app.post('/processInfo', (req, res) => {
    const data = req.body.data;
    console.log('Received data:', data);

    // 对接收到的数据进行处理，这里简单地返回接收到的数据
    res.send(`You sent: ${data}`);
});

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

在这个示例中，后端通过监听/processInfo路径的POST请求，接收前端发送过来的数据。通过req.body.data获取到数据后，进行相应的处理并返回响应给前端。

总结

以上就是使用Node.js结合AJAX从前端向后端传递数据的一个简单示例。通过这种方式，我们可以实现前后端之间的异步交互，提升应用的响应速度和用户体验。


var req = new XMLHTTPRequest();
req.onload = function () {
    console.log(req.status);  // 响应码
    console.log(req.responseText);  // 响应字符
};
req.open('POST', true);
req.setRequestHeader('请求头名', '请求头值');
req.send('HTTP请求体字符');

JSON.parse(STRING) => OBJECT

JSON.stringify(OBJECT) => STRING

楼主是想用封装好的ajax吧… 我写个一个帖子是jq的ajax,可以看看 http://my.oschina.net/l3ve/blog/281084

前端用的是jquery,请求代码如下:

$.ajax({
			type: 'GET',
			dataType: 'html',
			url: '/views/main.html',
			data: { type: "getself",username:getCookie("username")},
			success: function (data) {
				$("#user_msg").append(data);
			},error:function(XMLHttpRequest, textStatus, errorThrown){
				console.log(XMLHttpRequest.status);
				console.log(XMLHttpRequest.readyState);
				console.log(textStatus);
			}
		});

这里的url 写的是/views/main.html.这里的/views 指向的是我项目根目录下的views 文件夹(后台要配置一下) 然后后端相应请求的代码

app.post('/views/main.html',function(req,req){
//执行逻辑;
});

也可以这样写,把回调函数封装起来

app.post('/views/main.html',user.list);

user.list 是我user.js 下的list 方法

之前有提到 后台配置一下的问题 我的配置如下

app.engine('.html', ejs.__express);
app.set('view engine','html');
app.set('views',__dirname+"/views");
app.set('view option',{layout:false});

你的问题完全是因为你还没了解nodejs。错应该说还没了解后端语言的机制。用不用表单不是”后端“决定，而且前端使用什么方式，AJAX就是解决form的问题。 但你的问题说是demo判断连接其实和form应该没太多关系，如:<a href="/user?username=2b"/>用户姓名</a>这个连接是连接到一个"/user"的路由连接。带了一个username参数 后端获取： app.get(’/user’,function(req,res){ var username = req.query.username <–后段取得username的值"2b" if(username==‘2b’){ res.send(‘恭喜通过2b测试’) //下一步执行的 }else{ res.redirect(’/’) //返回刚才的页面 【"/"路由是首页】 } })

要实现前端通过AJAX向Node.js后端传递值，可以使用XMLHttpRequest对象或现代的fetch API。以下是一个完整的示例，展示如何从前端向后端传递数据并处理。

示例代码

前端代码 (HTML + JavaScript)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX Example</title>
</head>
<body>
    <button id="sendData">Send Data to Server</button>

    <script>
        document.getElementById('sendData').addEventListener('click', function() {
            const data = { demo: 'exampleValue' };

            fetch('/process', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json'
                },
                body: JSON.stringify(data)
            })
            .then(response => response.json())
            .then(data => {
                console.log('Success:', data);
            })
            .catch((error) => {
                console.error('Error:', error);
            });
        });
    </script>
</body>
</html>

后端代码 (Node.js + Express)

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

app.use(express.json()); // 用于解析JSON格式的数据

app.post('/process', (req, res) => {
    const receivedData = req.body;
    console.log(receivedData); // 输出接收到的数据

    // 处理数据
    res.json({ message: 'Data received successfully', receivedData });
});

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

解释

  1. 前端：

    • 使用fetch API发送一个POST请求到/process。
    • data对象中的demo字段值被转换为JSON字符串并通过请求体发送。

  2. 后端：

    • 使用Express框架监听POST请求到/process路径。
    • 使用express.json()中间件来解析请求体中的JSON数据。
    • 从req.body中获取传递过来的数据，并打印出来。
    • 返回一个JSON响应给前端，表示数据已成功接收。

这种方法避免了页面跳转，实现了前后端的数据交互。

回到顶部