Hqweay

很高兴遇见你

Jquery-Confrim

最基本的

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

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

思路:

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

隐藏可以这样写:

1
2
<form hidden>
</form>

先贴代码。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
// 新增
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>)。