前端有两个带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 回复

同一个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 这在后台怎么判断呢?

举个例子 对表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不同地址方法解决了

回到顶部