jsp 中用js提交表单并关闭本窗口的问题。

JavaScript07

jsp 中用js提交表单并关闭本窗口的问题。,第1张

1、在html中的表单form设置属性action='#'防止自动提交 2、利用js获取html中表单form,重新设置表单的action 3、action设置完毕后调用form.submit()方法提交表单 4、表单提交后利用window.close()关闭当前窗口

button按钮也可以的啊,一样的使用方法啊,在js中提交的,还是说你想根据不同的按钮将form1表单提交到不同的action里?

<script type="text/javascript">

function sub(){

document.form1.submit()

}

</script>

 <body>

   <form action="Getvalue" method="post" name="form1">

   <input type="text" name="username"><br/>

   <input type="password" name="password"><br/>

   <input type="button" value="button测试" onclick="sub()">

   </form>

 </body>

处理的方法有两种,他们是:表单数据一种是get方式, 另一种是post 方式

方法如下:

1.get方式

对于get方式,node处理起来非常简单

如以下代码:

var urlParsed = url.parse(request.url)

var getData = querystring.parse(urlParsed.query)

//getData 为object类型 同名表单为array

get返回结果:

{

name: "blue5tar",

hobby:["read", "surfing"]

}

2. post方式

post方式处理起来比较麻烦,但是有了node-formidable 这个module 我们就省事多了

使用npm安装 node-formidable

npm install formidable

formidable 使用方法

formidable = require("formidable")//载入 formidable

var form = new formidable.IncomingForm()

var post = {},

file = {}

form.uploadDir = '/tmp' //文件上传 临时文件存放路径

form

.on('error', function(err) {

console.log(err)//各种错误

})

//POST 普通数据 不包含文件 field 表单name value 表单value

.on('field', function(field, value) {

if (form.type == 'multipart') { //有文件上传时 enctype="multipart/form-data"

if (field in post) { //同名表单 checkbox 返回array 同get处理

if (util.isArray(post[field]) === false) {

post[field] = [post[field]]

}

post[field].push(value)

return

}

}

post[field] = value

})

.on('file', function(field, file) { //上传文件

file[field] = file

})

.on('end', function() {

fn()//解析完毕 做其他work

})

form.parse(request)//解析request对象

post方式有个bug

当form 有enctype=“multipart/form-data” 和没有 enctype=“multipart/form-data” 时 同名表单处理的方式不一样。

有 enctype=“multipart/form-data” 时 同名表单会被最后一个value覆盖,

没有 enctype="multipart/form-data"时,同get一样 会返回一个array

所以, 在 'field’事件时,对form.type进行不同处理 , 同名表单都返回array

还有一个问题,上传文件时 如果不选择文件 也会在临时目录生成空的临时文件, 解决办法:

修改 formidable 模块 lib/incoming_form.js handlePart方法 在183行处添加:

if (part.filename == "") {

return

}

上传文件返回的结构如下:

{

size: 40635, //文件大小

path: '/tmp/f0423db2bf874499423ce409e2f222f4', //临时文件路径

name: 'arrow.png', //文件名称

type: 'image/png', //文件 mime

lastModifiedDate: Sun, 11 Mar 2012 07:19:44 GMT,

_writeStream:

{ path: '/tmp/f0423db2bf874499423ce409e2f222f4',

fd: 7,

writable: false,

flags: 'w',

encoding: 'binary',

mode: 438,

bytesWritten: 40635,

busy: false,

_queue: [],

drainable: true },

length: [Getter], //同size

filename: [Getter], //同name

mime: [Getter] //同type

}

文件上传到临时文件目录下,我们还要将临时文件, 移到我们的上传目录中

fs.rename(file.path, global.appConfig.uploadDir + '/' + file.filename)

假设:

A表单内有<input type="submit">,通过点击这个input来提交表单

B表单内没有<input type="submit">,而是写了一个<input type="button">,并且在这个input上绑定了click事件,在事件的监听器内用js的form.submit()提交。

1.在A表单内的某个input type=text,用户正与它交互(它是当前焦点),用户只需要按一下键盘的enter,就能提交表单;而B在某些情况下不行(部分情形参考回车提交表单),只能click下面的button;当然你可以给每个input绑定一个keypress事件,再检测按下的键是不是enter,如果是,就提交……只要不觉得蛋疼。

2.B表单提交不会触发form的 onsubmit事件;A会触发。

另外,还有HTML语义化的区别,A表单的处理更语义化,至于A能在js加载失败时提交表单(起码还能用),B不行之类的,就不说了。

总之,A,<input type="submit">更好,B在用户体验上差的有点多。