js与form交互方式总结
前言：刚开始接触web开发的时候，往往采用form表单直接提交的方式，但可能存在兼容问题，如：
<form method="" action="">
...
<input type="submit" value="submit"/>
</form后来熟悉了js，更加倾向于使用ajax提交表单，有时甚至连form标签都不使用了。 然而，从HTML语义化的角度来说，使用form表单有更强的可读性，虽然简单，仍简单总结下form与js的兼顾。
1 方式一：onsubmit验证提交
在form标签中增加onsubmit事件来判断表单提交是否成功
<script type="text/javascript">
function validate(obj) {
if (confirm("提交表单?")) {
alert(obj.value);
return true;
} else {
alert(obj.value);
return false;
}
}
</script>
<body>
<form action="" onsubmit="return validate(document.getElementById('myText'));">
<input type="text" id="myText"/>
<input type="submit" value="submit"/>
</form>
</body>2 方式二：通过button按钮触发自定义方法验证提交
会自动忽略其他标签中的属性，如form标签中的onsubmit属性失效，js使用submit方法提交
<script type="text/javascript">
function validate() {if(confirm("提交表单?")){return true;}else{return false;}};
//也可以绑定click事件
function submitForm() {
if (validate()) {
document.getElementById("myForm").submit();
}
}
</script>
<body>
<form action="" id="myForm">
<input type="text"/>
<input type="button" onclick="submitForm();"/>
</form>
</body>3 方式三：将onsubmit(onclick)事件放在submit标签中
将onsubmit事件放在submit标签中而不是form标签中，此时表单验证失效，点击提交按钮表单直接提交
<script type="text/javascript">
function validate() {
if (confirm("提交表单?")) {
return true;
} else {
return false;
}
}
</script>
<body>
<form action="">
<input type="text"/>
<input type="submit" value="submit" onsubmit="return validate()"/>
</form>
</body>4 方式四：数据处理(serialize)
ajax得到form表单数据的便捷方法serialize
var formData=$("#formId").serialize();
$.ajax({
type: "POST",
url: "http://www.csxiaoyao.com",
data:formData,
success: function(result){
}
});本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017年05月09日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录