<form id="form1" action="${pageContext.request.contextPath}/ProductUpd">
    <input type="hidden" name="id" id="id1">
    <div class="input-group offset-1 col-10">
        <div class="input-group-prepend">
            <span class="input-group-text">编号</span>
        </div>
        <input type="number" class="form-control" name="product_no" id="bianhao">
        <div class="input-group-prepend">
            <span class="input-group-text">名称</span>
        </div>
        <input type="text" class="form-control" name="product_name" id="mingcheng">
    </div>
    <div class="input-group offset-1 col-10">
        <div class="input-group-prepend">
            <span class="input-group-text">类型</span>
        </div>
        <input type="text" class="form-control" name="product_type" id="leixing">
        <div class="input-group-prepend">
            <span class="input-group-text">状态</span>
        </div>
        <select class="form-control" name="status" id="zhuantai">
            <option value="1">有效</option>
            <option value="2">无效</option>
        </select>
    </div>
</form>

上面表单的提交

$(function(){
    $("#submit1").click(function(){
        $.ajax({
            url: "${pageContext.request.contextPath}/ProductUpd",
            type: "post",
            data: $("#form1").serialize(),　　//为了记录这个
            success: function(result){
                if(result==1){
                    alert("产品信息修改成功！");
                }
            },
            error: function(){
                alert("异常！");
            }
        });
    });
});

 

<style type="text/css">
    .father{
        width: 300px;
        height: 300px;
        background-color: black;
        position: absolute;
        top:50%;
        left:50%;
        margin-top: -150px;
        margin-left: -150px;
    }
    .son{
        /* 相对于父级元素相对后的位置进行定位，父级元素需要relative(通常)或absolute或fixed*/
        width: 100px;
        height: 100px;
        background-color: pink;
        position: absolute;
        left:0;
        top:0;
    }

</style>


<div class="father">
   <div class="son"></div>
</div>

 

<!-- 添加图标，另外font-awesome使用的时候，不能只用font-awesom，需要带着所有文件 -->

<style type="text/css">    /* 用font-awesome添加图标，4.3后好像就不用这样了，改成自带 */
    .valid-feedback.feedback-icon,
.invalid-feedback.feedback-icon {
    position: absolute;
    width: auto;
    bottom: 10px;
    right: 10px;
    margin-top: 0;
}
</style>

<div class="container">
    <div class="form-group position-relative">
        <label for="input2">Valid with icon</label>
        <input type="text" class="form-control is-valid" id="input2">
        <div class="valid-feedback feedback-icon">
            <i class="fa fa-check"></i>
        </div>
    </div>
    <div class="form-group position-relative">  
        <label for="input3">inValid with icon</label>
        <input type="text" class="form-control is-invalid" id="input3">
　　　　　<!-- 一个icon对应于一个父级的position-relative，
　　　　　是relative在起作用不是form-control -->
        <div class="invalid-feedback feedback-icon">
            <i class="fa fa-times"></i>
        </div>
    </div>
</div>