Js表单提交

JavaScript039

Js表单提交,第1张

表单提交是刚开始学js的朋友很迷惑的一个问题,怎么提交,怎么阻止默认提交,怎么提交表单不跳转等等问题,下面是一些示例

原始的表单提交有 button 按钮提交和 <input />类型的。它们又什么区别呢?

(1) 默认表单提交

(2)默认不会提交表单

(3) 如果在 form ,我们使用了 type=''submit 属性,但是不让表单默认提交,有什么办法呢?看下面

(4) 如果在 form ,我们使用了 type=''button 属性,但是还是需要提交表单,这是可以使用ajax来提交,好处是可以自己控制提交,并且页面不会跳转

(5)若是使用默认提交的方法,且提交之前验证表单,方法看下面

(6) 若是使用了 type='button' 属性,但是还是想实现默认提交的方式怎么办? 看下面

(7) 下面的提交会发生什么?

分析 : 点击提交按钮:

(1)当表单验证失败时,不会触发 form.submit() 函数,所以可以触发 <form>的 onsubmit 句柄,又因为该句柄 return false 所以表单不会从该句柄处默认提交,所以 会在控制台打印出 表单的onsubmit事件句柄在form.submit()调用时失效'

(2)当表单验证成功时,会触发 form.submit() 函数提交表单,又因为 form.submit()提交表单的方式与用户单击 Submit 按钮一样,但是表单的 onsubmit 事件句柄不会被调用,所以 控制台不会打印出 表单的onsubmit事件句柄在form.submit()调用时失效

现在表单默认提交的方式基本没人用了,都是ajax异步提交。但是了解一些还是好的。。。

在我们前端进行表单提交的时候,有时候会出现这种情况:Failed to convert   java.lang.String    to java.util.List

等等。

例如:

  我后台定义一个对象:

       examPaper 包含  String userId,Float userScore, MultipartFile  examFile  用户id  ,试卷分数,试卷文件

对象外面   classPaper有: String classId  String className  List<examPaper>  examPaperList

这个时候,后台接收为  ClassPaper

如果按照平常的 form-data   提交  则应按以下方式提交:

let  fd  = new FormData()

fd.append("classId ",classId )

fd.append("className ",className )

examPaperList.forEach((item,index) ->{

     fd.append("examPaperList["+index+"].userId",item.userId)

     fd.append("examPaperList["+index+"].userScore",item.userScore)

     fd.append("examPaperList["+index+"].examFile ",item.examFile )

})

以这种方式就可以实现 多附件  一一 对应提交。以避免对象转换错误问题。

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>