最基本的

我想实现这样一个效果,当点击网页上的添加按钮后,在网页上弹出一个添加信息的 form,然后填写该 form,点击确认后把表单信息发送至服务器。

jquery-confrim 是一款对话框插件,可以实现在网页上弹出一个对话框,我再用 form 来填充这个对话框就可以完成上面的效果啦。

思路:

在 html 页面上写一个 form,并且设置为 隐藏,然后用 jquery-confrim 在弹出提示框的时候,用该 form 来填充。

隐藏可以这样写:

<form hidden>
</form>

先贴代码。

// 新增
function addJob() {
    $.confirm({
        type: 'dark',
        animationSpeed: 300,
        title: '手动添加 Job',
        content: $('.createDialog').html(),//这里就是用 html 来填充对话框
        buttons: {
            confirm: {
                text: '确认',
			   btnClass: 'waves-effect waves-button',
                action: function () {
                    $.ajax({
                        url:"/admin/addJob",
                        method:"post",
                        data : $(".dialog:last").serializeArray() ,
                        dataType:"json",
                        success:function(data){
                            if(data.state=="success"){
                                $.alert('新增成功');
                            }
                        },
                        error:function(){
                            $.alert('新增失败');
                        }
                    });
                },
            },
                cancel: {
                    text: '取消',
                    btnClass: 'waves-effect waves-button'
                }
            }

	});
}

假设我们的表单 id 为 addForm。

然后运行。

遇到一个大大问题:$("#addForm").serializeArray() 该代码一直执行不成功。

这行代码是为了序列化表单,即选取一个标签,把标签内部的表单元素序列化,返回 json 格式的数据。

折腾了好久,这一步得到的数据始终为空。

尝试直接用 document.getElementById().value,报错document.getElementById(...) is null

这说明调用 js 的时候表单还没加载。

先看上面的代码,有这么一行。

content: $('.createDialog').html(),

这个的意思就是用 jquery-confrim 的时候,弹出的对话框用后面参数的内容来填充。

再审查这个对话框,原来这个插件把我之前隐藏的 form 复制了一份,贴在了网页的最后。

我之前想当然地以为它工作的方式是把隐藏的 form 直接展现出来…(想想也不可能)

我就以为是因为 js 出现在新的 form 的上面,所以 js 抓不到数据。

然而并不是这么回事

## 原因

因为 jquery-confrim 复制了一份表单,那么现在网页上就有两个相同的表单了,所以就不能用$("#addForm").serializeArray() 这种方式。

因为$("#addForm") 会取到两个表单…

由此可见,给 form 定一个 id 也是不太合理的…

毕竟同一个id 在 html 内只能出现一次。

那就通过 class 来取。

data : $(".dialog:last").serializeArray() ,

这行代码的意思就是取最后一个表单(也就是插件复制的那个表单)的值序列化。

毕竟 jquery-confrim 新增的表单始终跟在网页最后(靠近</body>)。