前端用户表性别字段不显示,Postman请求正常网页提交失效求助
问题现象
我创建了用户表,所有功能运行正常,仅性别字段无法正常填充:通过Postman发起POST请求时,性别可以按预期显示,但通过网站前端创建用户后,表格中仅展示邮箱、姓名、激活/禁用状态,性别位置为空,我无法定位问题所在,相关代码如下:
相关代码
update user.ejs
<!--include header--> <%- include('include/_header')%> <!--/include header--> <!-- Main Site --> <main id="site-main"> <div class="container"> <div class="box-nav d-flex justify-between"> <div class="filter"> <a href="/"><i class="fas fa-backward"></i>Visi Naudotjai</a> </div> </div> <div class="form-title text-center"> <h2 class="text-dark">Atnaujinti Naudotoja</h2> <span class="text-light">Naudokitės apačioja pateikta forma atnaujinant naudotoja</span> </div> <!-- add user form --> <!-- form handling --> <form method="POST" id="update_user"> <div class="new_user"> <div class="form-group"> <label for="name" class="text-light">Vardas</label> <input type="hidden" name="id" value="<%= user._id%>"> <input type="text" name="name" value="<%= user.name%>" placeholder="Vardenis"> </div> <div class="form-group"> <label for="email" class="text-light">Email</label> <input type="text" name="email" value="<%= user.email%>" placeholder="pavizdys@gmail.com"> </div> <div class="form-group"> <label for="Lytis" class="text-light">Lytis</label> <div class="radio inline"> <input type="radio" id="radio-2" name="Lytis" value="Vyras" <%= user.gender =='Vyras'? 'checked' :''%>> <label for="radio-2" class="radio-label">Vyras</label> </div> <div class="radio inline"> <input type="radio" id="radio-3" name="Lytis" value="Moteris" <%= user.gender =='Moteris'? 'checked' :''%>> <label for="radio-3" class="radio-label">Moteris</label> </div> </div> <div class="form-group"> <label for="Lytis" class="text-light">Statusas</label> <div class="radio inline"> <input type="radio" id="radio-4" name="status" value="Prisijunges" <%=user.status == 'Prisijunges'?'checked':''%>> <label for="radio-4" class="radio-label">Aktyvus</label> </div> <div class="radio inline"> <input type="radio" id="radio-5" name="status" value="Atsijunges" <%=user.status == 'Atsijunges'?'checked':''%>> <label for="radio-5" class="radio-label">Neaktyvus</label> </div> </div> <div class="form-group"> <button type="submit" class="btn text-dark update">Išsaugoti</button> </div> </div> </form> </div> </main> <!-- /Main Site -->
show.ejs
<%for(var i = 0; i <users.length; i++){%> <tr> <td><%= i + 1%></td> <td><%=users[i].name%></td> <td><%=users[i].email%></td> <td><%=users[i].gender%></td> <td><%=users[i].status%></td> <td> <a href="/update-user?id=<%=users[i]._id%>" class="btn border-shadow update"> <span class="text-gradient"><i class="fas fa-user-edit"></i></span> </a> <a class="btn border-shadow delete" data-id=<%=users[i]._id%>> <span class="text-gradient"><i class="fas fa-user-slash"></i></span> </a> </td> </tr> <%}%>
index.ejs
<!--include header--> <%- include('include/_header')%> <!--/include header--> <!-- Main Site --> <main id="site-main"> <div class="container"> <div class="box-nav d-flex justify-between"> <a href="/add-user" class="border-shadow"> <span class="text-gradient">Naujas Vartotojas<i class="fas fa-user-plus"></i></span> </a> </div> <!-- form handling --> <form action="/" method="POST"> <table class="table"> <thead class="thead-dark"> <tr> <th>ID</th> <th>Vardas</th> <th>@Email</th> <th>Lytis</th> <th>Statusas</th> <th>Būsena</th> </tr> </thead> <tbody> <%- include('include/_show')%> </tbody> </table> </form> </div> </main> <!-- /Main Site --> <!--include footer--> <%- include('include/_footer')%> <!--/include footer-->
router.js
const express = require('express'); const route = express.Router() const services = require('../services/render') const controller = require('../controller/controller') /** * @description Root Route * @method GET/ */ route.get('/',services.homeRoutes) /** * @description add users * @method GET/ add-user */ route.get('/add-user',services.add_user) /** * @description for update user * @method GET/ update-user */ route.get('/update-user',services.update_user) // API route.post('/api/users',controller.create); route.get('/api/users',controller.find); route.put('/api/users/:id',controller.update); route.delete('/api/users/:id',controller.delete); module.exports = route
前端index.js
$('#add_user').submit(function(event){ alert("Informacija išsaugota!") }) $('#update-user').submit(function(event){ event.preventDefault(); let unindexed_array =$(this).serializeArray(); let data = {} $.map(unindexed_array,function(n,i){ data[n['name']]= n['value'] }) console.log(data) let request = { "url" : `http://localhost:3000/api/users/${data.id}`, "method" : "PUT", "data" : data } $.ajax (request).done(function(response){ alert("Naudotojas Atnaujintas!") }) }) if(window.location.pathname == "/"){ $ondelete=$(".table tbody td a.delete"); $ondelete.click(function(){ let id = $(this).attr("data-id") let request = { "url" : `http://localhost:3000/api/users/${id}`, "method" : "DELETE", } if(confirm("Ar tikrai norite ištrinti įraša?")){ $.ajax (request).done(function(response){ alert("Naudotojas ištrintas!") location.reload() }) } }) }
问题原因及解决方案
问题核心为字段名不匹配:
表单里性别单选框的name属性设置为Lytis(立陶宛语“性别”的意思),但数据库存储、后端接口接收以及表格渲染用的字段名是gender。Postman请求时直接传了gender字段,所以能正常入库显示,但前端提交表单时,提交的是Lytis字段,后端接口没有对应处理这个字段,所以性别数据没有被存入数据库,表格渲染时自然为空。
修复步骤:
- 修改
update user.ejs里两个性别单选框的name属性,把Lytis改为gender:
<input type="radio" id="radio-2" name="gender" value="Vyras" <%= user.gender =='Vyras'? 'checked' :''%>> <input type="radio" id="radio-3" name="gender" value="Moteris" <%= user.gender =='Moteris'? 'checked' :''%>>
- 找到新增用户页面
add-user.ejs,同样把性别单选框的name属性从Lytis改为gender即可。
内容的提问来源于stack exchange,提问作者Sidas Vidūnas
相关产品推荐
相关产品推荐

