js 通用表单提交3-action和data的处理

89 阅读2分钟

书接上回,在form中action作为提交表单的接收地址,在有些时候可以省略,那就代表提交到当前地址,这个时候我们通过js获取是无法获取到的:

举个小例子:

这里能获取到的就是个空白(里面引用了一个外部的jquery,不要在意这些细节),那么这个时候我们需要增加判断,那么这个时候需要这样做:

通过上面的操作我们终于把真正的提交url找到了。

然后我们要解决一个新的问题:那就是如何获取表单中的数据?

我们用两种方法解决(突然想到回字的四种写法,不,那不重要):

1、jquery下有一个用来序列化表单数据的方法serialize()

这个方法可以序列化表单数值,然后用标准url的方式转化为字符串,有一个注意事项那就是表单项需要有name属性并且不能用js和jquery等的关键字命名,上效果:

我们增加了两个文本框,分别填写好了内容,我们看一下结果:

这是标准的url的写法,而且key=value的形式进行了格式化。

如上,我们就用第一种方法得到了表单的数值。

2、第二种那就是根据不同类型进行处理,这种的更精细化一些,同时可以处理一些特殊情况,如下图:

我们增加了一个方法,用来获取并序列化表单的数值,看看效果:

实际得到的数值又是怎样的呢?如图:

也就是殊途同归,也是url形式的字符串。

以上我们解决了两个问题,那么下面我们该做什么了呢,那就是:

如何通过ajax提交data到action中?

且听下回分解。