当前位置 : 主页 > 网页制作 > html >

from表单发送请求方式

来源:互联网 收集:自由互联 发布时间:2021-06-12
1,直接用表单的action属性跳转路由,此方法必须各节点的name属性和 Javabean 实体类属性相对应,并且onsubmit 属性不为false。 优点:快速,简单跳转路由。 缺点:返回数据不好处理,前后

1,直接用表单的 action 属性跳转路由,此方法必须各节点的name属性和 Java bean  实体类属性相对应,并且onsubmit 属性不为false。

优点:快速,简单跳转路由。

缺点:返回数据不好处理,前后台交互繁琐。

 <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" 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})            }        })    }}
上一篇:qunee 流动的关系
下一篇:EasyUI
网友评论