当涉及DOM时,如何在多个文件之间传输变量?



我试图将一些数据存储到mysql中。流程是这样的:首先,在我的table.js中生成如下表:

function tableBody() {
let tr; //table <tr>
let td; //table <td>
let tblBodyContent = document.getElementById('tableBodyContent');
for (let i = 0; i < 10; i++) {
tr = document.createElement('tr')
for (let col = 0; col < 6; col++) { 
if (col === 5 && i > 5) break; 
td = document.createElement('td')
td.innerHTML = 'cell value here';
let cellID = Math.floor(Math.random() * 100);
td.setAttribute('id', cellID);
td.addEventListener('click', cellClick);
tr.appendChild(td)
}
tblBodyContent.appendChild(tr);
}}
function cellClick() {
let tableCellId = this.id;
window.open("./form.html")}

表格中的每个单元格都是可点击的,当一个单元格被点击时,它将打开form.html,form.html代码如下:

<body>
<div class="container">
<div id="test">
<p>desplay the cellID</p>
</div>
<form action="user_input" method="POST">
<label for="inputname">Name</label>
<div class="form-group col-md-6">
<input type="name" class="form-control" id="inputfistname" name="inputfistname" placeholder="Firstname">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div></body>

当点击提交按钮时,我想将两段数据存储到mySql中,代码storeData.js如下:

const mysql = require('mysql');
const express = require('express');
const morgan = require('morgan');
const { prohairesis } = require('prohairesis');
const bodyParser = require('body-parser');
const mysqlConnect = require('./mysqlConnect')
const app = new express();
const port = process.env.PORT || 8000;
app
.use(morgan('short'))
.use(bodyParser.urlencoded({ extended: false }))
.use(express.static('./'))
.post('/user_input', (req, res) => {
const cellId = ''; //I'm stucked here: tableCellId from test.js
const firstName = req.body.inputfistname;
const queryString = 'INSERT INTO userinfo VALUE (?,?)';
mysqlConnect.connection.query(queryString, [firstName, cellId], (err, rows, fields) => {
if (err) {
console.log(`the error is ${err}`)
res.send(500);
throw err;
}
})
})
.listen(port, () => {
console.log(`server listening on port ${port}`)
})

我被困在这里,因为一个数据cellId是在table.jscellClick函数tableCellId中生成的随机数,因为我的table.js包含DOM元素,所以我不能在我的storeData.js中使用require('./table.js'),是否有一种方法,我可以在我的storeData.js中从table.js调用这个变量?我可以把它存到mySql里吗?

是。LocalStorage。首先,像这样设置cellClick函数:

function cellClick() {
let tableCellId = this.id;
window.localStorage.setItem('cell_id', tableCellId);
window.open("./form.html")
}

稍后,当form.html加载时。将LocalStorage cell_id的值加载到隐藏输入

<form action="user_input" method="POST">
<label for="inputname">Name</label>
<div class="form-group col-md-6">
<input type="name" class="form-control" id="inputfistname" name="inputfistname" placeholder="Firstname">
<input type="hidden" name="input_cell_id" value="">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
<script>
document.querySelector('input[name="input_cell_id"]').value = window.localStorage.getItem('cell_id');
</script>

在你的node.js中,你得到的值和名字的方式是一样的。

const cellId = req.body.input_cell_id;

最新更新