Nodejs不知道是不是遇到bug了，求大家帮忙

Nodejs不知道是不是遇到bug了，求大家帮忙

html代码 <html>

<body>

<form name=“input” action="/review" method=“post”>

I have a bike:

<input type=“checkbox” name=“demo” value=“46” checked=“checked” />

<br />

I have a car:

<input type=“checkbox” name=“demo” value=“14” />

<br />

I have an airplane:

<input type=“checkbox” name=“demo” value=“67” />

<br /><br />

<input type=“submit” value=“Submit” />

</form>

<p>如果您点击 “Submit” 按钮，您将把输入传送到名为 html_form_action.asp 的新页面。</p>

</body>

</html>

接下来是我的node.js 服务器端代码

if(method === ‘post’){ photos = req.body.demo;

	console.log('length' + photos.length);

console.log('--------------------------');

console.log(req.body);

console.log(req.body.demo);



console.log('error data'  + photos[1]);

}

打印信息 length2

{ demo: ‘46’ } 46 error data6

当我提交一个复选框的时候，竟然出现长度2的值， 理论上来说，我选上一个，就这认一个才对，希望各位能帮帮忙。

photos[1]的时候，理论上，只有一个值，这个值，应该是未定义才对哇。。。


4 回复

根据你提供的问题描述，你的HTML表单中有一个复选框组，它们的name属性都设置为demo。当你提交表单时，Node.js后端接收到的数据看起来有些异常。具体来说，req.body.demo应该是一个数组，但似乎被处理成了一个字符串。

让我们通过一些示例代码来理解并解决这个问题。

HTML 表单

首先，确认你的HTML表单代码没有问题。以下是修正后的HTML代码：

<html>
<body>
<form name="input" action="/review" method="post">
I have a bike:
<input type="checkbox" name="demo" value="46" checked="checked" />
<br />
I have a car:
<input type="checkbox" name="demo" value="14" />
<br />
I have an airplane:
<input type="checkbox" name="demo" value="67" />
<br /><br />
<input type="submit" value="Submit" />
</form>
<p>如果您点击 “Submit” 按钮，您将把输入传送到名为 review 的新页面。</p>
</body>
</html>

Node.js 服务器端代码

为了正确处理复选框数组，你需要使用支持解析表单数据的中间件，比如 express 和 body-parser。以下是一个完整的示例代码：

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

const app = express();

// 使用 body-parser 中间件来解析表单数据
app.use(bodyParser.urlencoded({ extended: true }));

app.post('/review', (req, res) => {
    const photos = req.body.demo;
    
    console.log('length: ' + (Array.isArray(photos) ? photos.length : 0));

    console.log('--------------------------');

    console.log(req.body);

    if (Array.isArray(photos)) {
        console.log(photos);
    } else {
        console.log(photos);
    }

    if (Array.isArray(photos)) {
        console.log('error data: ' + photos[1]);
    } else {
        console.log('error data: undefined');
    }

    res.send('Form submitted successfully');
});

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

解释

  1. HTML 表单：确保所有复选框的 name 属性相同（例如 demo），这样它们会被作为数组发送到服务器。
  2. Node.js 服务器端代码：
    • 使用 bodyParser.urlencoded({ extended: true }) 来解析表单数据，并将其转换为对象。
    • 检查 req.body.demo 是否是一个数组。如果是数组，则可以访问数组中的元素；如果不是数组，则输出 undefined。

输出示例

假设你只选中了“自行车”复选框，服务器日志可能如下所示：

length: 1
--------------------------
{ demo: '46' }
46
error data: undefined

如果同时选中了“自行车”和“汽车”，则日志可能如下所示：

length: 2
--------------------------
{ demo: [ '46', '14' ] }
[ '46', '14' ]
error data: 14

通过这种方式，你可以正确地处理复选框数组，并避免之前的误解。


只是一个思维误区而已 因为typeof photos == 'string', photos='46'，所以photos.length=2, photos[1]=6 当checkbox单选，浏览器发送的http请求是：demo=46，express无法区分这是来自text控件还是checkbox控件的值，于是保守点将demo设为字符串46 当checkbox多选，浏览器发送的http请求是：demo=46&dmeo=14，express一看就明白，哦，应该将demo设为数组[‘46’,‘14’]

可能是吧，我现在的写法修改了 写成 photos = [] photos.push(req.body.demo)

这样，基本算是解决了我刚才遇到的问题，谢谢你的回答

从你提供的信息来看，问题可能出在 req.body 的解析方式上。在使用 Express 和 body-parser 中间件时，默认情况下，如果表单中只有一个同名的字段（如你的例子中的 demo），那么 req.body.demo 将会是字符串类型而不是数组。

示例代码

首先，确保你在 Express 应用中正确地使用了 body-parser 中间件：

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

const app = express();

// 使用 body-parser 中间件
app.use(bodyParser.urlencoded({ extended: true }));

app.post('/review', (req, res) => {
    const photos = req.body.demo;

    console.log('length ' + (Array.isArray(photos) ? photos.length : 1));
    console.log('--------------------------');
    console.log(req.body);
    console.log(req.body.demo);

    if (Array.isArray(photos)) {
        console.log('error data ' + photos[1]);
    } else {
        console.log('error data undefined');
    }

    res.send('Data received');
});

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

解释

  1. 使用 bodyParser.urlencoded:

    • 确保你使用了 body-parser 并且设置了 { extended: true }，这样可以处理类似数组的请求体。

  2. 检查 req.body.demo 是否为数组:

    • 如果你只选择了一个复选框，req.body.demo 将会被解析为字符串。
    • 如果选择了多个复选框，req.body.demo 将会被解析为数组。

  3. 处理逻辑:

    • 在日志输出中，我们检查 req.body.demo 是否为数组，如果不是，则将其视为单一值处理。

测试结果

  • 当只选择一个复选框时：

    length 1
--------------------------
{ demo: '46' }
46
error data undefined

  • 当选择多个复选框时：

    length 2
--------------------------
{ demo: ['46', '14'] }
['46', '14']
error data 14

通过这种方式，你可以更好地处理单个和多个复选框的情况。

回到顶部