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函数来避免回调地狱。

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

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

1 个答案: