zoukankan      html  css  js  c++  java
  • form表单发送请求方式

    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" 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})
    }
    })
    }

    }

     

  • 相关阅读:
    标准差、方差、协方差的简单说明
    样本的均值和方差的无偏估计
    Network In Network——卷积神经网络的革新
    Rethinking the inception architecture for computer vision的 paper 相关知识
    VIM的自动补全
    substitute 命令与 global 命令
    两个月全马训练参照表
    初跑者秘诀
    python3入门教程
    使用Python3.x抓取58同城(南京站)的演出票的信息
  • 原文地址:https://www.cnblogs.com/zrboke/p/11559441.html
Copyright © 2011-2022 走看看