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

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

举个小例子:


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


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

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

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

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

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


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


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

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

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


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


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


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

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

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

且听下回分解。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容