表单和ajax提交浅析

来源：互联网发布：法国富人税知乎编辑：程序博客网时间：2024/06/01 18:59

在网页中常用的数据提交提交有两种：表单和ajax提交。下面将简单介绍一下它们各自的特点及优缺点。

表单在网页中主要负责数据采集功能。一个表单有三个基本组成部分：

表单标签：<form></form>用于申明表单，定义采集数据的范围。这里面包含了处理表单数据所用CGI程序的URL以及数据提交到服务器的方法。

语法：

属性解释：

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

<divid="file_uploader" style="display: none;">
<iframe name='file_frm_uploader' allowTransparency='true'frameborder='0' src='about:blank'></iframe>
</div>

将该页面中form的target属性设置为target="file_frm_uploader"即可实现不刷新页面地提交表单。在表单处理完后，返回一段javascript代码，就可以回调该页面中的方法：

<scripttype="text/javascript">window.parent.uploadFileSuc()</script>

所以，两种提交方式各有优缺点，使用哪种就看你的需求了，但个人还是建议使用ajax来提交，响应速度快，用户体验好。

转自 http://wenku.baidu.com/link?url=TF648_Pi6Iy2XsbkDuVpFwRoLj3mo779RcC5oDsUMYQqCWzwln7VBz_YYhhEKF5xATuDBXLFAabfAx24P0kcORm_bR9yq7mJJ6f6jSbAeVG

0 0