在网页中常用的数据提交提交有两种:表单和ajax提交。下面将简单介绍一下它们各自的特点及优缺点。
表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分:
表单标签:<form></form>用于申明表单,定义采集数据的范围。这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。
语法:
<form id="form1"method="post" action="tw_upgrade.cgi"enctype="multipart/form-data" target="file_frm_uploader"></form>
属性解释:
Id 是表单的标识符,用于区分不同表单;
method=get或post指明提交表单的HTTP方法.可能的值为: post:POST方法在表单的主干包含名称/值对并且无需包含于action特性的URL中. get:不赞成。GET方法把名称/值对加在action的URL后面并且把新的URL送至服务器.这是往前兼容的缺省值.这个值由于国际化的原因不赞成使用.
action=url指定用来处理提交表单的格式.它可以是一个URL地址(提交给程式)或一个电子邮件地址.在BCM 11AC项目中为broadcom.c文件中的mime_handlers表里的一个接口。
enctype属性为编码方式,常用有两种:application/x-www-form-urlencoded和multipart/form-data,默认为application/x-www-form-urlencoded,不能用于文件上传;只有使用了multipart/form- data,才能完整的传递文件数据,且传递的数据为二进制,用request就会传递不成功。
target ="..."指定提交的结果文档显示的位置: _blank :在一个新的、无名浏览器窗口调入指定的文档; _self :在指向这个目标的元素的相同的框架中调入文档; _parent :把文档调入当前框的直接的父FRAMESET框中;这个值在当前框没有父框时等价于_self; _top :把文档调入原来的最顶部的浏览器窗口中(因此取消所有其它框架);这个值等价于当前框没有你框时的_self.
表单域:包含了文本框、密码框、隐藏域、多行文本框、复选框、单选框、下拉选择框和文件上传框等,用于采集用户的输入或选择的数据。 提交时浏览器将为我们把表单里的数据解析为名/值对的形式。所以name属性必须唯一。
表单按钮:包括提交按钮、复位按钮和一般按钮;用于将数据传送到服务器上的CGI脚本或者取消输入,还可以用表单按钮来控制其他定义了处理脚本的处理工作。代码格式:<input type="submit" name="..."value="...">。
提交、复位、一般的type分别为:submit/reset/button。
Ajax提交是通过js来提交请求,请求与响应均由js引擎来处理,页面不会刷新,用户感觉不到实际上浏览器发出了请求。采用jquery的ajax,具有更好的封装性,简单易用。语法:
$.post(url,[data],[callback],[type]);
参数解释:
urlString
发送请求地址。
data(可选)Map
待发送 Key/value 参数。
callback(可选)Function
发送成功时回调函数。
type(可选)String
返回内容格式,xml, html, script,json, text, _default。
下面列出两种提交方式的几点区别:
1. Ajax在提交、请求、接收时,都是异步进行的,网页不需要刷新;
Form提交则是新建一个页面,哪怕是提交给自己本身的页面,也是需要刷新的;
2. Ajax在提交时,是在后台新建一个请求;
Form却是放弃本页面,而后再请求;
3. Ajax必须要使用JS来实现,不启用JS的浏览器,无法完成该操作;
Form却是浏览器的本能,无论是否开启JS,都可以提交表单;
4. Ajax在提交、请求、接收时,整个过程都需要使用程序来对其数据进行处理;
Form提交时,却是根据你的表单结构自动完成,不需要代码干预。
有时候我们需要用表单提交,但又不想刷新页面怎么办?下面将介绍一个提交表单但不刷新页面的方法:
在页面中定义一个隐藏的div和iframe
将该页面中form的target属性设置为target="file_frm_uploader"即可实现不刷新页面地提交表单。在表单处理完后,返回一段javascript代码,就可以回调该页面中的方法:
<scripttype="text/javascript">window.parent.uploadFileSuc()</script>
所以,两种提交方式各有优缺点,使用哪种就看你的需求了,但个人还是建议使用ajax来提交,响应速度快,用户体验好。