form表单发送请求方式
1,直接用表单的 action 属性跳转路由,此方法必须各节点的name属性和 Java bean 实体类属性相对应,并且onsubmit 属性不为false。
优点:快速,简单跳转路由。
缺点:返回数据不好处理,前后台交互繁琐。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 | <form name= "mdShopuser.form" action= "/ShopUser/ShopUserGoin" method= "POST" autocomplete= "off" onsubmit= "return validate()" > <div class = "info-name" > <span>* 姓名</span> <input type= "text" name= "mdShopuser.Name" value= "" autofocus= "autofocus" > </div> <div class = "info-name" > <span>* 手机号</span> <input type= "text" value= "" name= "mdShopuser.Phone" > </div> <div class = "info-name" > <span>* 店铺名称</span> <input type= "text" value= "" name= "mdShopuser.ShopName" > <div class = "info-name" > <span>* 行业类别</span> <input type= "text" value= "" name= "mdShopuser.SalesPikd" > </div> <div class = "info-name" > <span>* 店铺地址</span> <input type= "text" value= "" name= "mdShopuser.ShopAddress" > </div> <div class = "info-name" > <span>详细地址</span> <input type= "text" value= "" name= "mdShopuser.DetailAddress" > </div> <div class = "reason" > <span>申请理由</span><br> <textarea type= "text" name= "" rows= "5" name= "mdShopuser.Application" ></textarea> </div> <div> <button type= "submit" >提交申请</button> </div> </div> </form> |
2. 第二种方式是表单序列化提交 此方式onsubmit=false:就是不允许使用action,===》此方式使用点击事件结合ajax 提交表单
优点:前后台交互方便,后台 给前台数据好处理。
缺点:需要结合ajax使用。
<form id="member_form" onsubmit="return false" method="POST">
<div class="login-info login-name">
<i class="fa fa-user-o"></i>
<input type="text" value="" autofocus="autofocus" name="member.number_id" placeholder="请输入账号" id="input_username">
</div>
<div class="login-info login-pwd">
<i class="fa fa-lock" aria-hidden="true"></i>
<input type="password" value="" name="member.password" placeholder="请输入密码" id="input_password">
<img src="/_view/_web/img/icon3.png" alt="" onclick="show()">
</div>
<div class="login-reg">
<span><a href="/_view/_web/register/notMemberRegister.html">免费注册</a></span>
</div>
<div class="login-btn">
<button onclick="btn()">登录</button>
</div>
</form>
// 提交表单前验证用户名密码不能为空
function btn() {
$.ajax({
type:"POST",
dataType:"json",
url:"/login/memberLogin",
data:$("#member_form").serialize(),
success:function (result) {
console.log(result.status)
if (result.status == "ok") {
window.location.href = "/login/tovip"
}else if(result.status == "false"){
layer.msg("该账号还未审核,暂时无法登录",{time:1000})
}else if (result.status == "false1"){
layer.msg("账号或密码错误",{time:1500})
}
},
error:function (err) {
layer.msg("账号或密码错误",{time:1000})
}
})
}
}
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· AI与.NET技术实操系列:基于图像分类模型对图像进行分类
· go语言实现终端里的倒计时
· 如何编写易于单元测试的代码
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 分享一个免费、快速、无限量使用的满血 DeepSeek R1 模型,支持深度思考和联网搜索!
· 25岁的心里话
· 基于 Docker 搭建 FRP 内网穿透开源项目(很简单哒)
· ollama系列01:轻松3步本地部署deepseek,普通电脑可用
· 按钮权限的设计及实现