当产品卡片被点击时，向服务器发送请求以获取产品详细页面。

Question

我正在创建一个产品页面，以卡片形式展示所有可用的产品。此图片展示了产品页面上产品如何展示。我希望实现一个功能：当用户点击任一产品卡片时，向服务器发送请求以打开包含完整产品详情的产品展示页面如本图所示所需渲染的文件。我尝试了一些方法来实现这一点，但都没有成功。

产品卡片的代码如下：


    
        
        <% for (let i=0; i < data.length; i++) { %>
            
                
                    
                
                
                    <%= data[i].p_name %>
                    Rs. <%= data[i].selling_price %>
                    M.R.P: Rs. <%= data[i].mrp %>
                    <%= data[i].mrp - data[i].selling_price %> off
                    Quality verified
                
            
        <% } %>

这段代码根据从数据库接收到的数据生成卡片。

之后，我编写了JavaScript代码来向服务器发送请求，以便在点击卡片时打开带有完整产品详情的产品展示页面。代码如下：

document.querySelectorAll('.product-card-c').forEach((div) => {
  div.addEventListener('click', function(event) {
    console.log(event.target.closest('.product-card-c').id);
    const selectedId = event.target.closest('.product-card-c').id;
    fetch(`/products/${selectedId}`)
      .then(response => console.log(response.text()))
  });
});

这段代码会将点击的卡片ID发送给服务器。服务器端处理这个请求的代码如下：

app.get('/products/:id', async function(req, res) {
  try {
    const selectedId = await db.query(`SELECT * FROM products WHERE id=${req.params.id}`);
    res.render("productshowcase.ejs", {product : selectedId.rows});
  } catch (err) {
    console.log(err);
  }
});

然而，当我点击卡片时，什么也没有发生。尽管当我直接在浏览器地址栏输入localhost:3000/products/2时，服务器确实会打开产品展示页面，但是该页面没有应用CSS样式，并且控制台报出大量错误，比如资源加载失败（404）和脚本执行被拒绝等。

我完全陷入了困境，不知道哪里出了问题。提前感谢任何能帮我找到错误的人。我已经尝试寻找正确的向服务器发送请求的方法，但未能找到正确的方式。

jjnguy · Answer

EJS 是一个服务器端的模板引擎，意味着HTML是在服务器上生成的，并通常作为HTTP响应发送回来。你尝试使用fetch请求获取那个已经渲染好的HTML，并通过response.text()将其存储为文本后，并没有进一步的操作。HTML不会自动附加到DOM或者替换页面上现有的HTML。

使用fetch通常是用来从服务器获取数据，通常是JSON格式，然后你可以遍历这些JSON数据的属性，并据此在DOM中添加或替换HTML元素。你需要编写这样的代码。或者，你可以直接从服务器返回一个URL作为响应，然后让浏览器重定向到新的URL。

如果你坚持使用EJS，我真诚的建议是：

选项1:
将每个卡片包装在一个带有产品ID的标签内，将其ID追加到href属性。这样，当用户点击卡片时，浏览器会发送一个标准的GET请求到/products/:id并进行适当的重定向。

这意味着你可以删除所有document.querySelectorAll('.product-card-c').forEach的代码。

示例代码如下：


   
      
      <% for (let i=0; i < data.length; i++) { %>
         
            
               
                  
               
               
                  
               
            
         
      <% } %>

选项2:
不改变任何HTML代码，而在你的click事件处理器中使用window.location.assign来导航到新URL：

document.querySelectorAll('.product-card-c').forEach((div) => {
  div.addEventListener('click', function(event) {
    console.log(event.target.closest('.product-card-c').id);
    const selectedId = event.target.closest('.product-card-c').id;
    window.location.assign(`http://localhost:3000/products/${selectedId}`); // 添加这一行
  });
});

siride · Answer

import express from "express";
import ejs from "ejs";
import bodyParser from "body-parser";
import pg from "pg";
import {dirname} from "path";
import { fileURLToPath } from "url";
const __dirname = dirname(fileURLToPath(import.meta.url))

const app = express(); // Create an express app
const port = 3000;

app.set('view engine', 'ejs'); // set ejs as view engine
// app.use(express.static("public")); // Define folder for static file "app.use is a middleware"
app.use(bodyParser.urlencoded({ extended: true })); // Help to get data from frontend

app.use(express.static(__dirname + '/public/'));
const db = new pg.Client({
    user: "postgres",
    host: "localhost",
    database: "greatvalue_db",
    password: "123456",
    port: 5432,
});

db.connect();

app.get("/", (req, res) => {
    res.render("index.ejs");
})

app.get("/user", (req, res) => {
    res.render("user.ejs");
})

app.get("/dealer-enquiry", (req, res) => {
    res.render("dealerEnquiry.ejs");
})

app.post("/dealer-enquiry", async (req, res) => {
    const entry = req.body;
    // console.log(entry);
    try {
        await db.query("INSERT INTO dealer_enquiry (fname, lname, email, pnumber, address, city,pincode,state,item1,item2,item3,item4,item5,item6,item7,enquiry) VALUES ($1,$2,$3,$4,$5,$6,$7,$8,$9,$10,$11,$12,$13,$14,$15,$16)",
            [entry.first_name, entry.last_name, entry.email_id, entry.phone_number, entry.address, entry.city, entry.pin_code, entry.state, entry.item1, entry.item2, entry.item3, entry.item4, entry.item5, entry.item6, entry.item7, entry.enquiry]);
            // res.sendStatus(200);
            res.redirect("/dealer-enquiry");
    } catch (err) {
        console.log(err);
    }
});

app.get("/about", (req, res) =>{
    res.render("about.ejs");
})

app.get("/career", (req, res) =>{
    res.render("career.ejs");
})

app.get("/contact", (req, res) => {
    res.render("contact.ejs");
})

app.get("/products", async (req, res) => {
    try {
        const cardValue = await db.query("SELECT id, images, p_name, selling_price, mrp FROM products");
            // res.sendStatus(200);
            // console.log(cardValue.rows);
            res.render("products.ejs", {data :cardValue.rows});
    } catch (err) {
        console.log(err);
    }
    
})

app.get('/products/:id', async function(req, res) {
    try {
        const selectedId = await db.query(`SELECT * FROM products WHERE id=${req.params.id}`);
            res.render("productshowcase.ejs", {product :selectedId.rows});
    } catch (err) {
        console.log(err);
    }
});

app.listen(port, () => {
    console.log(`Server started on port ${port}`);
})