我在同一页面上有一个表格和表格，如何使用表格来更新表格。 Express / Node.js

Question

我对网站开发非常陌生，目前仍停留在此问题上。

我想做的是为网站创建搜索页面。 我想使用该表单允许用户选择位置或类别，然后使用结果更新同一页面。

我已经创建了节点端，可以通过查询数据库来获得所需的结果，但是当我尝试用新结果呈现页面时，它会刷新为默认状态。

任何帮助，将不胜感激 ：）

以下是我的html或.ejs页面

 <form method="post" action="/search" enctype="multipart/form-data" id="newListingForm"> <label>Keyword</label> <br> <input type ="text" name="searchKeyword"> <br> <label>Location</label> <br> <select name="searchLocation"> <option value="Default">Default</option> <option value="Auckland">Auckland</option> <option value="Wellington">Wellington</option> <option value="Christchurch">Christchurch</option> <option value="Test">Test</option> </select> <br> <label>Catergory</label> <br> <select name="searchCategory"> <option value="Default">Default</option> <option value="Landscaping">Landscaping</option> <option value="Construction">Construction</option> <option value="Automotive">Automotive</option> <option value="Test">Test</option> </select> <br> <input type="submit" value="Submit"> </form> <table> <% for(var i = 0; i < listingResults.length; i++) { %> <tr> <td> <%= listingResults[i].name %> </td> <td> <%= listingResults[i].serviceid %> </td> <td> <%= listingResults[i].category %> </td> <td> <%= listingResults[i].location %> </td> <td> <%= listingResults[i].description %> </td> <td> <%for (var image in listingResults[i].imageFiles){%> <img src="/temp/<%= listingResults[i].imageFiles[image] %>" alt="" height="100"> <%}%> </td> </tr> <% } %> </table> 

这就是我在搜索路线中所说的

 router.get('/search', (req, res) => { let listingResults = []; const singleListing = { serviceid: 0, name: 'asd ', // Selected in step 3 location: ' asd', category: ' asd', description: ' asd', imageFiles: [], // Create empty array for holding filenames for the images }; listingResults.push(singleListing); res.render('search.ejs', { listingResults }); }); router.post('/search', findServices, renderSearchPage, (req, res) => {}); function findServices(req, res, next) { console.log(req); const searchParamaters = { location: req.body.searchLocation, category: req.body.searchCategory, keywords: req.body.searchKeywords, }; console.log('search params', searchParamaters); let condition = []; const queryLocationService = `Location='${searchParamaters.location}'`; condition.push(queryLocationService); const queryCategoryService = `Category='${searchParamaters.category}'`; condition.push(queryCategoryService); condition.join(' AND '); let conditionString = condition.join(' AND '); console.log(conditionString); let sql = `SELECT * FROM website_user.Service WHERE ${conditionString}`; console.log(sql); connection.query(sql, (err, results) => { console.log(results); req.services = results; return next(); }); } function renderSearchPage(req, res) { let listingResults = []; let count = 0; // console.log('req length', req.services.length); req.services.forEach((service) => { // Step 4) Create a statement that will gather all the photos that are related to a aervice const queryPhotos = `SELECT * FROM Photo WHERE Service_ID = ${service.Service_ID}`; connection.query(queryPhotos, (err4, results4) => { // Create a singleListing object that holds the information required const singleListing = { serviceid: service.Service_ID, name: service.Title, // Selected in step 3 location: service.Location, category: service.Category, description: service.Description, imageFiles: [], // Create empty array for holding filenames for the images }; results4.forEach((element) => { // For each result of the photo query (results3): const filename = `${uuid()}.${element.Extension}`; // Create a filename singleListing.imageFiles.push(filename); // Add filename to array in singleListing object // Write the file to the temp directory fs.writeFile(`app/public/temp/${filename}`, element.Photo_Blob, (err5) => { if (err5) throw err5; }); }); listingResults.push({ singleListing }); // console.log('listing results', listingResults); count += 1; if (count === req.services.length) { // Once all the services has been looped through and added console.log('hit render ', listingResults); res.render('search.ejs', { listingResults }); // Must be rendered in this step otherwise it wont work for some reason.. } }); }); } 

Answer 1

看起来您在“ forEach（）”循环内调用了“ res.render（）”。 这是错误的方法。 您只需一次调用“ res.render（）”。 您收到1个请求，并通过'res.render（）'发送1个响应。

更新。 抱歉，我想念您写了一个条件来解决我以前写的问题。

我想，您应该在“ forEach”之后而不是在内部调用“ res.render（）”。 它将澄清代码。 而且您将不会错过任何条件问题。

再次更新。

现在我有回调是为什么在forEach中使用res.render的原因。 我通常使用async / await函数来避免回调地狱。

如果没有可用的服务或发生错误，您会发回什么？