在 “fetch POST” 请求 DOM 数据数组到 Node.js 后,重新渲染 “res.render” 的 URL。

huangapple go评论67阅读模式
英文:

Re-"res.render" URL after "fetch POST"-ing DOM data array to Node-js

问题

我明白,你想要的是代码部分的翻译。以下是翻译后的代码:

// 摘录的渲染代码 ////////////////////////////////////////////////
function render(file, url, contentdata) {
    app.get(url, async(_req, res, next) => {
        try {
            res.render(file, { data: await contentdata });
        } catch (err) {
            next(err);
        }
    });
}

render('time-picker', '/time-picker', timetablesthree)

// 摘录的新TIME-PICKER表格到数据库的部分
app.post("/time-picker-input", async(req, res) => {    

    for(i=0; i<=167; i++) {        
        let inputFieldId = req.body[i].fieldid;
        let inputFieldValue = req.body[i].fieldvalue;
        // console.log(inputFieldId);  

    await ttupdate(inputFieldValue, inputFieldId, 'timetablesthree');
    };
    res.json({ message: 'Success' });
 });

如果你还需要其它翻译,请继续提供。

英文:

Even after reading many related questions, I am uncertain as to what exactly is the best approach to render a URL after JS frontend collects DOM data and fetch POSTs it to an express server POST URL.

  • I am aware of the fact that fetch POST does not ask for rendering
  • at this point I am not asking for an alternative POST method (XML / FORM etc.). I would ask a seperate question if this current approach is not valid
  • I am thankful for replies on how to instantly "refresh" the URL as well, this is however predominantly asking about having the URL rendered for the next browser GET request
  • I am "presuming" to understand that my app only renders the URL once at server start and that this is the problem

How can I call the function render after the fetch POST and the MYSQL query "ttupdate" have completed?

// snippet render code ////////////////////////////////////////////////
function render(file, url, contentdata) {
    app.get(url, async(_req, res, next) =&gt; {
        try {
            res.render(file, { data: await contentdata });
        } catch (err) {
            next(err);
        }
    });
}


render(&#39;time-picker&#39;, &#39;/time-picker&#39;, timetablesthree)

Where and how in the following snippet would you implement it?

// snippet new TIME-PICKER table to DB 
app.post(&quot;/time-picker-input&quot;, async(req, res) =&gt; {    
   
    for(i=0; i&lt;=167; i++) {        
        let inputFieldId = req.body[i].fieldid;
        let inputFieldValue = req.body[i].fieldvalue;
        // console.log(inputFieldId);  

    await ttupdate(inputFieldValue, inputFieldId, &#39;timetablesthree&#39;);
    };
    res.json({ message: &#39;Success&#39; });
 });

Additional information on my setup:

let express = require(&#39;express&#39;)
let bodyParser = require(&#39;body-parser&#39;)
let app = express()
app.set(&#39;view engine&#39;, &#39;ejs&#39;)
let path = require(&#39;path&#39;)
app.set(&#39;views&#39;, path.join(__dirname, &#39;views&#39;))
app.use(express.static(path.join(__dirname, &#39;public&#39;)));
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
    extended: true
}))
app.use((err, req, res, next) =&gt; {
    console.error(err.stack)
    res.status(500).send(&#39;Sorry - something broke...&#39;)
})
app.listen(3000, (req, res) =&gt; {
    console.log(&quot;App is running on port 3000&quot;)
})

let { singledbentry, refresh, refreshTwo, ttupdate } = require(&quot;./database.js&quot;)
let activetime = require(&#39;./activetime.js&#39;);

let mysql = require(&#39;mysql2&#39;)

答案1

得分: 0

以下是您要翻译的内容:

"Background: A lot of endpoints rendered correctly and also rendered correctly with updated data after a FORM action POST.

The only endpoint not rendering properly, unless after server restart, was using fetch POST. So I was mislead to believing the obvious cause to be the different behavior of fetch POST (like not requesting rendering like a browser).

However none of the endpoints rendered correctly after reloads. This was just not visible, as they always displayed the correct data through express POST res.render.

Edit:

For future readers: I took the route out of the function and passed the information for "timetablesthree" directly to prove that is was an issue of variable scope.

The following code works fine:

app.get('/time-picker', async(_req, res, next) => {
try {
timetablesthree = refresh('SELECT ttfield, ttfieldvalue FROM timetablesthree')
res.render('time-picker', { data: await timetablesthree });
console.log(timetablesthree);
} catch (err) {
next(err);
}
});"

英文:

It was a matter of variable scope.

Background: A lot of endpoints rendered correctly and also rendered correctly with updated data after a FORM action POST.

The only endpoint not rendering properly, unless after server restart, was using fetch POST. So I was mislead to believing the obvious cause to be the different behavior of fetch POST (like not requesting rendering like a browser).

However none of the endpoints rendered correctly after reloads. This was just not visible, as they always displayed the correct data through express POST res.render.

Edit:

For future readers: I took the route out of the function and passed the information for "timetablesthree" directly to prove that is was an issue of variable scope.

The following code works fine:

app.get(&#39;/time-picker&#39;, async(_req, res, next) =&gt; {
    try {
        timetablesthree = refresh(&#39;SELECT ttfield, ttfieldvalue FROM timetablesthree&#39;)
        res.render(&#39;time-picker&#39;, { data: await timetablesthree });
        console.log(timetablesthree);
    } catch (err) {
        next(err);
    }
});

huangapple
  • 本文由 发表于 2023年4月20日 01:40:18
  • 转载请务必保留本文链接:https://go.coder-hub.com/76057404.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定