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

Question

我对网站开发非常陌生，目前遇到了这个问题。

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

我已经创建了 Node 端，我可以通过查询数据库获得所需的结果，但是当我尝试使用新结果渲染页面时，它就像刷新到默认状态一样。

如有任何帮助，我们将不胜感激:)

下面是我的 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 函数来避免回调 hell 。

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