国庆前(2013)无聊,就在铁道部的12306上“逛”了下下。

PS:原来之所以叫12306,是因为其客服号码是12306,好吧,我很无知……

首先是被“逛”的页面:票价查询

之所以去逛,是因为一直听闻该网站在节假日期间抢票慢、难,而国内浏览器厂商等开发抢票插件等等,这让我有些心动,于是便去瞧了瞧“传说”中的12306。

对于该页面的第一反应是,功能应该可以的,不然大家抢不到票了,不过美观的角度就不怎么样了。

本以为该页面会是用Ajax方式提及获取数据(因点查询后页面并无刷新迹象,且余票查询是Ajax请求方式的),于是通过Firebug观察提交的方式及返回的内容,发现是以POST方式的表单提交,而返回的内容居然是如下形式的代码:

<script>
parent.document.getElementById("randCode").value="";
parent.document.getElementById("img_rrand_code").src="passCodeActi0n.do?rand=rrand"+'?'+Math.random(); parent.document.getElementById("stationDIV").innerHTML="<strong>北京</strong>→<strong>上海</strong>列车票价信息暂无";
parent.document.getElementById("stationDIV2").innerHTML="<strong>上海</strong>→<strong>北京</strong>列车票价信息暂无";
<!-- =====================================================返程========================================================== -->
parent.document.getElementById("stationDIV2").style.display='none';
parent.document.getElementById("gridbox2").style.display='none';
</script>

返回的这个信息让人非常不解,一般POST提交都是会“跳转”页面的,而这里返回了似乎是html代码的script标签,内部是含有返回数据的js代码。(代码和数据这两家伙,这么亲密-_-!)

对此我有两个疑问:

1)表单提交返回了这个代码,但是页面怎么没刷新呢?

2)很明显返回的代码起了作用,因为查询结果出现在了页面上,咋回事?

细心的人可能注意到了上面的代码中一个明显的地方(我表示当时我没注意这个-.-),即parent.document字样,这个是在iframe嵌套时,调用父iframe中window的操作,明显这里有蹊跷,当前页面提交后,返回的代码中居然是通过parent.document字样的js代码来操作页面的。

另外,页面中表单标签的代码如下:

<form action="iframeTicketPriceByStation.jsp"
method="post" name="ticketPriceByStationform"
target="iframeName1">
<!-- 此处略去x行代码 -->
</form>

这里的target属性让我感到可疑,特别是搜索target的值“iframeName1”后,在页面中有如下iframe代码,该iframe隐藏了:

<iframe name="iframeName1" id="iframeID1" src="" width="0" height="0"
frameborder="0" />

初步猜测表单提交后返回的页面加载到该iframe中了,对form的target做些调查后便能确定下来了。

查询w3school上的介绍:target 属性规定在何处打开 action URL。

不过对于该属性的使用上却有些“兼容性”的问题:

在 HTML 4.01 中,不赞成使用 form 元素的 target 属性;在 XHTML 1.0 Strict DTD 中,不支持该属性。(链接

在 HTML5 中 target 属性不再是被废弃的属性。(链接

通过查看XHTML 1.0 Strict DTD对form的定义,已经没有target属性了:

<!ATTLIST form
%attrs;
action %URI; #REQUIRED
method (get|post) "get"
enctype %ContentType; "application/x-www-form-urlencoded"
onsubmit %Script; #IMPLIED
onreset %Script; #IMPLIED
accept %ContentTypes; #IMPLIED
accept-charset %Charsets; #IMPLIED
>

但在XHTML 1.0 Transitional DTD中还保留着:

<!ATTLIST form
%attrs;
action %URI; #REQUIRED
method (get|post) "get"
name NMTOKEN #IMPLIED
enctype %ContentType; "application/x-www-form-urlencoded"
onsubmit %Script; #IMPLIED
onreset %Script; #IMPLIED
accept %ContentTypes; #IMPLIED
accept-charset %Charsets; #IMPLIED
target %FrameTarget; #IMPLIED
>

看来该属性一度有被遗弃的现象,虽然在HTML5中已能正常使用了,但对于该属性的使用我还是不怎么习惯,总觉得有些另类哈……

以上介绍已经明了,该属性指定在何处打开表单提交的url,按照我们平时的使用可推测,默认情况是在当前页面。

参考对Target属性的介绍,它可以有如下值,这些值应该是很熟悉的了,涉及到链接的时候,都会有这几个出现:

描述
_blank 在新窗口/选项卡中打开。
_self 在同一框架中打开。(默认)
_parent 在父框架中打开。
_top 在整个窗口中打开。
framename 在指定的框架中打开。

很明显,票价查询页面上用的是framename这类型的值,起初在看该页面中的iframe标签属性是还让人有点迷糊,因为这里给iframe加了相同的id和name,这是一种习惯,但也让人疑惑target中放入的到底是id还是name?

以下是我的测试代码:

1)主页面:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>The Target of Form</title>
</head> <body>
<form action="js.html" method="post" target="iframeName1">
<input type="submit" value="test1" />
</form>
<iframe name="iframeName1" id="iframeID1" src="" width="0" height="0" frameborder="0" >
</iframe> <form action="js.html" method="post" target="iframeName2"> <!-- 指定name,如果不存在,这个name作为新开窗口的window.name -->
<input type="submit" value="test2" />
</form>
<iframe id="iframeID2" src="" width="0" height="0" frameborder="0" >
</iframe>
</body>
</html>

2)表单提交的页面(虽然可以只写script标签的代码就行了,但总觉得不规范……):

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>The Target of Form</title>
<script>
alert(123);
</script>
</head>
<body>
</body>
</html>

PS: 当target指定的name不存在时(这个涉及到window.name属性了),那么会新开一个window.name为该name值的窗口。之后的每次提交都会到这个窗口来,如果关闭了此窗口,那么再次提交时还是会新开启窗口的。

PPS: 关于重复表单提交(点击刷新按钮),似乎对于新开窗口方式,无重复提交现象出现(感觉这种方式就是以POST形式新开窗口-_-)。而针对内嵌的iframe方式,则会有重复表单提交现象(IE8、Firefox如此,但Chrome除外),具体如何我就不进行测试了,这是题外话了,问题无处不在,有新的东西就有新的问题,有兴趣的朋友自己试试。

最后吐槽下,该页面http://dynamic.12306.cn/map_zwdcx/CCCX.jsp的验证码是js生成的数字,不禁让我回想起去年写过的类似代码,只是这里的代码兼容性真是差呢,也就ie下能运行了。

参考资料:

  http://www.12306.cn/mormhweb/tlkytst/

  http://zhidao.baidu.com/link?url=ER04KXHiSYmxCZ7ptQCbFYIDIpUFPlcG35xSVHxX-YchSYT4Mi7uU8jeeJsnhbg4ckm_W310ePpa-TC5y6G9Na

  http://www.w3school.com.cn/tags/att_form_target.asp

  http://www.w3school.com.cn/html5/att_form_target.asp

  http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd

  http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd

话说Form标签的target属性-----无刷新表单提交的更多相关文章

  1. DWZ框架Ajax无刷新表单提交处理流程

    DWZ框架Ajax无刷新表单提交处理流程是: 1.       ajax表单提交给服务器 2.       服务器返回一个固定格式json结构 3.       js会调函数根据这个json数据做相应 ...

  2. js实现无刷新表单提交文件,将ajax请求转换为form请求方法

    最近在做项目的时候遇到一个需要上传文件的需求,因为ajax请求是无法上传二进制文件流的,所以只能用form表单提交,而form提交有一个问题就是会使页面刷新,本文解决了form表单提交文件时页面刷新的 ...

  3. ajax+FormData+javascript实现无刷新表单信息提交

    ajax+FormData+javascript实现无刷新表单信息提交 原理: dom收集表单信息,利用FormData快速收集表单信息  ,实例化表单数据对象 同时收集fm的表单域信息. var f ...

  4. ajax+FormData+javascript 实现无刷新表单注册

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 使用jquery form插件进行异步带文件的表单提交

    引入form插件与jquery 的js文件后 获取表单的jq对象 然后.ajaxSubmit提交表单即可 实现添加品牌的异步表单提交 function addBarandImg(formId) { $ ...

  6. a标签指定的url,在表单提交前进行js验证的实现

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  7. Ajax 使用formdata 实现 无刷新表单上传

    FormData对象的作用就类似于这里的serialize()方法,不过FormData是浏览器原生的,且支持二进制文件 1.这里实现一个无刷新上传图片,成功后页面显示 点击button 触发隐藏的 ...

  8. HTML <form> 标签的 method 属性(20161028)

    HTML <form> 标签的 method 属性 HTML <form> 标签 实例 在下面的例子中,表单数据将通过 method 属性附加到 URL 上: <form ...

  9. form表单提交target属性使用

    通过form表单提交刷新iframe <form action="doctor/selPackage" target="projectlistframe" ...

随机推荐

  1. (四)Java 基础语法

    Java 基础语法 一个Java程序可以认为是一系列对象的集合,而这些对象通过调用彼此的方法来协同工作.下面简要介绍下类.对象.方法和实例变量的概念. 对象:对象是类的一个实例,有状态和行为.例如,一 ...

  2. 【bzoj1406】[AHOI2007]密码箱

    x2 ≡ 1 mod n => x2 = k * n + 1 => n | (x + 1) * (x - 1) 令n = a * b,则 (a | x + 1 且 b | x - 1) 或 ...

  3. shell如何查看单个或多个文件的行数或总行数

    shell如何查看单个或多个文件的行数或总行数_百度经验 https://jingyan.baidu.com/article/cbf0e500b8470f2eab28937d.html 单个文件   ...

  4. 依赖注入【转自知乎 PHP】

    第一章:小明和他的手机 从前有个人叫小明 小明有三大爱好,抽烟,喝酒…… 咳咳,不好意思,走错片场了.应该是逛知乎.玩王者农药和抢微信红包 <img src="https://pic1 ...

  5. Cordova 开发 App

    Cordova 是一个开源的移动开发框架.允许你用标准的 Web 技术——HTML5,CSS3 和 JavaScript 做跨平台开发.应用在每个平台的具体执行被封装了起来,并依靠符合标准的 API ...

  6. 自定义的Notification

    要创建一个自定义的Notification,可以使用RemoteViews.要定义自己的扩展消息,首先要初始化一个RemoteViews对象,然后将它传递给Notification contentVi ...

  7. linux线程相关函数接口

    以下内容转自网络 索引:1.创建线程pthread_create2.等待线程结束pthread_join3.分离线程pthread_detach4.创建线程键pthread_key_create5.删 ...

  8. 聚类-----KMeans

    package Spark_MLlib import org.apache.spark.ml.clustering.KMeans import org.apache.spark.sql.SparkSe ...

  9. Java多线程系列五——列表类

    参考资料: http://xxgblog.com/2016/04/02/traverse-list-thread-safe/ 一些列表类及其特性  类 线程安全 Iterator 特性 说明 Vect ...

  10. vue父组件访问子组件

    1.父组件(父组件访问子组件的方法drop) <!--父组件访问子组件的方法v-ref:shopcart--> <template> <div id="pare ...