Ajax、模态框简与后台传值的简单应用

今天写页面，遇到个模态框，说实话以前很少写，今天就记录下，方便以后查看。
下面是个很简单的input输入框及保存按钮的小栗子：

<div class="modal fade" id="nameModal" tabindex="-1" role="dialog" aria-labelledby="nameModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title">新增服务器</h4>
            </div>          
            <div class="modal-body" style="margin:0 auto;">
                <form class="form-horizontal form"  id="itemForm">
                <input type="hidden" id="Controlid"  name="Controlid"/>
            <label for="lastname" class="col-sm-2 control-label">Upstream<font color="red">*</font></label>
            <div class="col-sm-4"><input type="text" class="form-control" name="upstream" placeholder="请输入“Upstream”" maxlength="50" ></div>    

    <label for="lastname" class="col-sm-2 control-label">服务器名称<fontcolor="red">*</font></label>
            <div class="col-sm-4"><input type="text" class="form-control" name="name" placeholder="请输入“服务器名称”" maxlength="50" ></div>               
                    <div class="form-group">
                        <div class="col-sm-offset-3 col-sm-6" style="padding-left :200px; padding-top :20px">
        <button type="submit" class="btn btn-primary" id="itemSave" >保存</button>
        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    </div>

在当前页面引入js文件即可，js中这么写：

$(function() {
//添加服务详情    
    $("#itemSave").on("click",function(){
        $.post(base_url +"/jobinfo/addItem",$("#itemForm").serialize(),function(data){
            $('#nameModal').modal({backdrop: false, keyboard: false}).modal('hide');
            });
    });

});

itemSave为保存button的id
itemForm为模态框内的form表单id
data为后台Controller传回来的数据
nameModal’为模态框的id
hide为点击保存按钮后，隐藏模态框

以上就简单的实现了模态框内置form表单，向后台传值

Ajax、模态框简与后台传值的简单应用

猜你喜欢