个人向的前端的坑坑洼洼的记录（2）

弹出模块框的实现

项目要让用户能自行选择在展示页面需要展示的内容，基本思路为用复选框列出一些属性让用户选择，用户选择完毕后能将所选的属性提交后台处理。此处考虑与原来配置界面的整合，选择了将其放在弹出的模态框中实现。在实际实现的过程中选择使用了Bootstrap 的模态框（Modal）插件，需要引入boostrap.js文件。

模态框绑定有两种方法：
可以通过在触发器上设置data属性：data-toggle=”modal”，data-target=”#myModal” 来指定要触发的模态框。
也可以通过javascript方式：

$('#myModal').modal(options)

此处用了第一种方法：

<!--点击按钮触发模块框-->
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myModal">修改展示信息</button>
<p id="addtrdiv">
    <!--模态框-->
    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
                    <h4 class="modal-title" id="myModalLabel">选择需要展示的内容</h4>
                </div>
                <div class="modal-body">
                    <label for="name">请选择需要展示的信息</label>
                    <div>
                        <p>
                            <label class="checkbox-inline">
                        <input type="checkbox" id="inlineCheckbox1" value="load">Cluster Load</label>
                        </p>
                        <p>
                            <label class="checkbox-inline">
                        <input type="checkbox" id="inlineCheckbox2" value="memory">Cluster Memory</label>
                        </p>
                        <p>
                            <label class="checkbox-inline">
                        <input type="checkbox" id="inlineCheckbox3" value="cpu">Cluster CPU</label>
                        </p>
                        <p>
                            <label class="checkbox-inline">
                        <input type="checkbox" id="inlineCheckbox4" value="network">Cluster Network</label>
                        </p>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" onclick="save_show()">提交更改</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
</p>

模态框的属性还是挺多的，也有许多定制窗口的选项，用得上的时候再仔细看吧…

在点击提交更改后，选中的选项将会通过jquery的$.post()方法发送给后台处理。前后端交互数据使用的是jQuery封装的AJAX方法，额下面会说。

效果大概这样：

与后台进行数据的交互

在前后端分离之下，选择了使用jQuery封装的AJAX进行了与后台的数据的交换。

jQuery的AJAX家族有许多方法，常用的有$.get()方法、$.post()方法，这些是jQuery的ajax方法的简单易用的高层实现。ajax的底层实现有$.ajax()方法，用来操作一些不常用的选项以获得更多的灵活性，这里老样子用不上…

此处用上的$.post()方法格式：

$.post(URL,data,callback);

三个参数为请求的url地址（一般是.php文件、.asp文件或者是servlet文件？），连同请求一起发送的数据，请求成功后进行的操作。
$.get()方法相比$.post方法，在发起请求的时候少了data参数。

此处需要提交选中的复选框的值，所以选用了$.post()方法。点击“提交更改”按钮后，选中的复选框的值将会被打包成文本形式的字符串通过$.post()传给后台进行处理：

function save_show() {
    var show_array = new Array();
    $('input:checkbox').each(function() {
        if($(this).is(':checked')) {
            show_array.push($(this).val());
        }
    });
    var showstr = show_array.join(',');
    $.post("<!--URL-->", showstr,
        function(data, status) {
            alert(status);
        });
}

上一篇所获取的时间日期的值与动态表单所需要提交的内容也都是通过./$/post()方法向后台服务器进行提交的。