Mustache模板表单提交仅传首个词汇至数据库的修复问询

核心问题分析 #

你遇到的多词汇餐厅名称仅首个词存入数据库的问题，本质是表单提交时没有完整传递餐厅名称参数。从你提供的视图代码来看，当前表单里只有提交按钮（图片类型的input），并没有将{{restaurant.name}}作为一个完整的表单字段提交给后端。当浏览器处理这类表单时，要么没有传递名称参数，要么后端在接收时错误地按空格分割了参数值。

具体修复步骤 #

• 在表单中添加隐藏字段传递完整餐厅名称
  修改你的表单代码，加入一个hidden类型的input，把餐厅名称完整存入这个字段：

  {{#allRestaurantsData}}
  <div class="listing">
    <form action="/restaurants" method="post">
      <h2> {{restaurant.name}} </h2>
      <!-- 添加隐藏字段，完整传递餐厅名称 -->
      <input type="hidden" name="restaurantName" value="{{restaurant.name}}">
      <input type="image" src="../wishlisticon.png" alt="Add to wishlist" />
      <img id="image"...
    </form>
  </div>
  {{/allRestaurantsData}}
  

  这里的关键是用type="hidden"的input来包裹完整的{{restaurant.name}}，并给它设置明确的name属性（比如restaurantName），这样表单提交时会把整个名称作为一个参数传递。

• 后端接收参数时确保完整读取
  在你的后端代码中，要通过你设置的name属性完整读取参数值，不要对参数进行不必要的分割处理。举个Express的例子：

  app.post('/restaurants', (req, res) => {
    // 完整获取餐厅名称，不要按空格拆分
    const restaurantName = req.body.restaurantName;
    // 后续存入数据库的逻辑
    db.query('INSERT INTO your_table (name) VALUES (?)', [restaurantName], (err, result) => {
      // 处理结果
    });
  });
  

  注意：如果你的后端框架默认对表单参数做了特殊处理（比如自动分割空格），要确保关闭这类行为，或者直接读取原始的参数值。

• 额外验证：确保模板渲染时没有转义问题
  如果你的模板引擎（比如Handlebars）自动转义了特殊字符，要确认{{restaurant.name}}渲染出来是完整的字符串（比如New York而不是New%20York或者被转义的其他形式）。如果有转义问题，可以使用模板引擎的不转义语法，比如Handlebars的{{{restaurant.name}}}（三重花括号）：

  <input type="hidden" name="restaurantName" value="{{{restaurant.name}}}">
  

问题根源复盘 #

如果之前你是通过URL参数或者其他方式传递名称（比如把名称放在表单action里的URL路径），浏览器会把空格解析为分隔符，后端如果直接按空格分割取第一个部分，就会导致只存New而丢失York。用隐藏字段传递是最可靠的方式，因为它会把整个字符串作为一个完整的参数值提交。

内容的提问来源于stack exchange，提问作者jenlearnsdev