如何使用 jQuery 将按钮值从 ejs 发送到 for 循环中的服务器？
我有一些数据集，包括加密货币名称、符号等。 当我单击按钮时，我希望在控制台中看到硬币符号。第一个是好的，但其他的不起作用。我看空了我想在单击详细信息时查看所有带有名称或符号的匹配数据。我的错误在哪里？
我的 ejs
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<table style="width:850px; margin:15px; text-align: center;">
<caption>
<h1>Coins</h1>
</caption>
<thead style="font-size: 20px;">
<tr style="border:2px solid">
<td>Name</td>
<td>Slug</td>
</tr>
</thead>
<tbody>
<% for (i=0; i<100; i++){ %>
<tr>
<td> <%= cName[i] %> </td>
<td> <%= symbol[i] %> </td>
<td>
<form method="post" id="form" action="/">
<input id="hiddeninput" name="hiddeninput" type="hidden" />
<button id="coinName" value="<%= symbol[i] %>" name="buttonname">Detail</button> </td> //Here comes from Mongo like BTC,ETH..
</form>
//and some td's
</tr>
<% } %>
</tbody>
<tfoot>
</tfoot>
</table>
<script>
$('#coinName').on('click', function(){
$('#hiddeninput').val($(this).val());
});
</script>
</body>
</html>
Ejs 看起来像
| Name | Slug | Detail |
|---|---|---|
| Bitcoin | BTC | DetailButton |
| Ethereum | ETH | DetailButton |
Server.js
const bodyParser = require('body-parser');
const express = require('express');
const app = express();
const MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/";
app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine', 'ejs');
const name = [];
const symbol = [];
const price = [];
const date = [];
app.get("/", (req, res) => {
MongoClient.connect(url, function (err, db) {
if (err) throw err;
var dbo = db.db("cryptoDb");
dbo.collection("coinTable").find({}).toArray(function (err, finds) {
if (err) throw err;
for (i = 0; i < finds[0].result.length; i++) {
name.push(finds[0].result[i].name);
symbol.push(finds[0].result[i].symbol);
price.push(finds[0].result[i].price);
date.push(finds[0].result[i].date);
}
res.render('index', {
cName: name,
symbol: symbol,
len: finds[0].result.length,
cPrice:price,
cDate:date
});
db.close();
});
});
})
app.post('/', (req, res) => {
console.log(req.body.hiddeninput);
//Here is my function, fetch all datas from Mongo where matches hiddeninput
})
var server = app.listen(3000, function () {
console.log(`port: ${server.address().port}`);
}
)
提前非常感谢！
I have some dataset includes crypto coin names, symbols etc.
When I clicked the button, I expect to see coin symbol in console. First one is okey but others did not work. I see empty. I want to see all matching datas with name or symbol when clicked the details. Where is my mistake ?
My ejs
<html>
<head>
<script src="https://code.jquery.com/jquery-3.5.0.js"></script>
</head>
<body>
<table style="width:850px; margin:15px; text-align: center;">
<caption>
<h1>Coins</h1>
</caption>
<thead style="font-size: 20px;">
<tr style="border:2px solid">
<td>Name</td>
<td>Slug</td>
</tr>
</thead>
<tbody>
<% for (i=0; i<100; i++){ %>
<tr>
<td> <%= cName[i] %> </td>
<td> <%= symbol[i] %> </td>
<td>
<form method="post" id="form" action="/">
<input id="hiddeninput" name="hiddeninput" type="hidden" />
<button id="coinName" value="<%= symbol[i] %>" name="buttonname">Detail</button> </td> //Here comes from Mongo like BTC,ETH..
</form>
//and some td's
</tr>
<% } %>
</tbody>
<tfoot>
</tfoot>
</table>
<script>
$('#coinName').on('click', function(){
$('#hiddeninput').val($(this).val());
});
</script>
</body>
</html>
Ejs looks like
| Name | Slug | Detail |
|---|---|---|
| Bitcoin | BTC | DetailButton |
| Ethereum | ETH | DetailButton |
Server.js
const bodyParser = require('body-parser');
const express = require('express');
const app = express();
const MongoClient = require('mongodb').MongoClient;
var url = "mongodb://localhost:27017/";
app.use(express.static('public'));
app.use(bodyParser.urlencoded({ extended: true }));
app.set('view engine', 'ejs');
const name = [];
const symbol = [];
const price = [];
const date = [];
app.get("/", (req, res) => {
MongoClient.connect(url, function (err, db) {
if (err) throw err;
var dbo = db.db("cryptoDb");
dbo.collection("coinTable").find({}).toArray(function (err, finds) {
if (err) throw err;
for (i = 0; i < finds[0].result.length; i++) {
name.push(finds[0].result[i].name);
symbol.push(finds[0].result[i].symbol);
price.push(finds[0].result[i].price);
date.push(finds[0].result[i].date);
}
res.render('index', {
cName: name,
symbol: symbol,
len: finds[0].result.length,
cPrice:price,
cDate:date
});
db.close();
});
});
})
app.post('/', (req, res) => {
console.log(req.body.hiddeninput);
//Here is my function, fetch all datas from Mongo where matches hiddeninput
})
var server = app.listen(3000, function () {
console.log(`port: ${server.address().port}`);
}
)
Thanks a lot in advance!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（1）
ID 必须是唯一的。只要有一种形式。提交按钮名称和值将提交被单击的按钮，
无需脚本
IDs must be unique. Just have one form. The submit button name and value will submit the button that is clicked
No need for script