form 表单提交ajax请求

2019独角兽企业重金招聘Python工程师标准>>>

第一步

需要引入的js: 

<script type="text/javascript" src="/js/jquery/jquery.form.js"></script> 

第二步:

创建form表单:

<form action="<%=request.getContextPath()%>/user/customer" method="post" id="form1">
                <select class="mg-b" name="intention">
                    <option value="2">买房意向</option>
                    <option value="1">租房意向</option>
                </select><br/>

                <label>
                    <span class="ls2">姓</span>名：
                </label>
                <input class="long" type="text" value="" placeholder="请输入您的姓名" name="customerName"/><br/>

                <label>联系电话：</label>
                <input class="long" type="text" onkeypress="return onlyNumber(event)" maxlength="11" value="" name="phone" placeholder="请输入您的手机号码"/><br/>

                <label>意向位置：</label>
                <input class="long" type="text" value="" name="location" placeholder="请输入当前位置"/><br/>

                <label>意向楼盘：</label>
                					<input class="input0" type="" name="" id="project" value="" placeholder="请输入意向楼盘名称" />
                <div>
                    <label>
                        <span class="ls2">价</span>位：
                    </label>
                    <input class="money" type="text" onkeypress="return onlyNumber(event)" name="price" value="" placeholder="请输入价格"/><span id="price">万元</span><br/>
                </div>

                <div id="ros">
                    <label class="fl">付款方式：</label>
                    <div class="one-choce">
                        <input class="select" type="radio" name="payMode" id="" value="1"/>全款
                        <input class="select" type="radio" name="payMode" id="" value="2"/>按揭
                    </div>
                </div>
                <br/>


                <div id="fiveRoom">
                    <label>客源户型：</label>
                    <input onkeypress="return onlyNumber(event)" maxlength="1" index1="1" id="fiveFirst" style="width: 40px;" type="text" name="room" />室
                    <input onkeypress="return onlyNumber(event)" maxlength="1" index1="2" style="width: 40px;" type="text" name="office" />厅
                    <input onkeypress="return zeroNumber(event)" maxlength="1" index1="3" style="width: 40px;" type="text" name="toilet" />卫<br/>
                    <br/>

                    <label>意向补充：</label><br/>
                </div>
                <textarea name="comment" rows="2" cols="50" placeholder="请填写您的房源环境"></textarea>
                 <button class="usebut usebutchange">提交意向</button>
            </form>

第三步

提交表单的js:

 $("form").ajaxSubmit({
            	
           
            
                beforeSubmit: function () {

                     //参数校验
                    layer.msg('正在保存', {icon: 16, shade: [0.3, '#000'], time: 0});
                },
                success: function (rep) {
                    layer.closeAll('dialog');
                    if (rep.status == 200) {
                        layer.msg('保存成功', {icon: 16, shade: [0.3, '#000'], time: 0});
                        setTimeout(function () {
                            window.location.href = BASE_PATH + "/user/customer/list";
                        }, 500);
                    } else {
                        layer.alert("保存失败");
                    }
                },
                error: function (rep) {
                    layer.closeAll('dialog');
                    layer.alert("保存失败");
                }
            })

 

转载于:https://my.oschina.net/jamescasta/blog/752239