js与form交互方式总结

来源：互联网发布：java中xml文件的作用编辑：程序博客网时间：2024/06/05 17:25

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){    }});

0 0