前端有两个带POST功能按钮，express框架路由如何做出不同响应
发布于 2 个月前 作者 bykege 619 次浏览 来自 问答

在前端有两个submit按钮，都会向后台请求POST，如下 <button class="blue-btn" id="userTable_save" type="submit">保存</button> <button class="blue-btn" id="userTable_change" type="submit" >修改</button> <button type="button" class="blue-btn" id="userTable_reset">重置</button>

请问如何在路由的post方法中判断是哪个按钮传过来的事件然后做出不同的数据库操作呢？

16 回复
1

同一个form的submit事件应该是没法区分的，要想区分，只能用ajax的办法，点击提交时阻止默认的submit事件，然后在post的data中加个字段来区分，不知道是否能帮助你解决这个问题。

如果使用 jQuery 的话，可以使用 submit 事件，如果我没有记错的话。 可以在上传之前处理表单。加入一些验证信息。

当然如果只是想实现区分保存和修改的功能的话，建议还是在渲染页面的时候渲染一个隐藏域，加入必要的东西。

@iyuq 谢谢你的回答

@XGHeaven 我的主要关注点在前端按钮点击后，后台的POST方法如何区分是哪个按钮POST的。 还是感谢你

@bykege 如果你是写后台的，不想改变前端代码的话，就只能去数据库里查询，如果有这条数据，那么就是修改，否则就是添加。

当然你也可以jquery的方法来提交form表单，在form里面加个hidden field，点击不同按钮时将这个hidden field设置成不同的值，在提交表单。

@iyuq 那在路由的POST方法中如何取得form里面加的hidden field？

@XGHeaven 也是一种办法，我更想做的完美一点

已经有两个解决想法了 1.用ajax请求不同url，后台判断URL再做不同操作 $.ajax({ url:‘login’, type:‘POST’, data:data, }); app.post(’/login’,function(req,res)

2.加一个hid input <input class="text" id="hidden" name="hid" type="text"> 点击不同按钮用JS设置不同的值，后台判断其值做不同处理 router.post(’/’,function(req,res){ var hid = req.body[‘hid’]; console.log(hid); var test = req.body[‘reset’]; // console.log(test); if(hid==“reg”){ res.redirect(’/reg’); } else{ res.redirect(’/login’); } })

第二种比较蠢，但是可行，第一种还没有测试，但应该也可以

<input name="submit" type="submit" value="提交" />
<input name="submit" type="submit" value="修改" />

这样不就可以了吗？

@eyblog 这在后台怎么判断呢？

1

举个例子 对表user操作 修改应该是 app.put("/user/:id") 然后修改的数据放在body里 那增加应该是 app.post("/user") 然后增加的数据放在body里

前台两个按钮应该注册不同监听函数 请求上面的两个 URL即可

如果仅仅根据 前端给的标示 来判断是增加还是修改 后台代码就会有if else以后不好维护（我看了不舒服= =）

@gjc9620 在监听函数中用ajax请求后台吗？

10楼正解 通过 name 啊，如果是 post 就是 req.body.submit === ‘提交’

@bykege 两个不一样的按钮不一样的监听 不一样的"动作（put post）" 不一样的请求地址分别请求后台

感谢各位，最后还是用ajax设置post不同地址方法解决了

回到顶部