专栏首页csxiaoyaojs与form交互方式总结

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 条评论
登录 后参与评论

相关文章

  • 交互式网页应用的网页开发技术Ajax简单介绍

    Ajax(Asynchronous JavaScript and XML的缩写):一种创建交互式网页应用的网页开发技术。包含下列技术: 基于XHTML+CSS的...

    用户1208223
  • Ajax笔记

    本文主要是我学习ajax的笔记,不涉及到原理,只是记录如何使用。如果有错欢迎各位大佬指出。提前先转一篇写的非常全面的博客你真的会使用XMLHttpRequest...

    bamboo
  • 推荐一个在线接口Mock工具fastmock

    上面的方式中,不管哪一种方式,都会要求开发人员写一些跟项目本无任何关联的代码,第一个和第二个方式还会需要前端项目在本地引入不必要的js文件。比如下面的mock数...

    用户4361151
  • 前端基本内容概述

    星辉
  • Extjs中对ajax中request方法的重写,对请求的过滤

    公司最近在完成一个项目,项目已经进行到尾声了,还没有进行对回话为空进行过滤。在涛哥提出后,上司研究了半天解决不了,最后丢给涛哥解决。虽说解决问题是每个人的义务,...

    业余草
  • Struts2中的Ajax请求

    1. 使用Stream result的方式以流的形式写出到客户端。(这种方式我没有亲自做实验,下面的例子参考的是Struts2的官方文档)

    TheOneGIS
  • 字节跳动前端实习面经

    viewport 是用户网页的可视区域。 手机浏览器是把页面放在一个虚拟的"窗口"(viewport)中,通常这个虚拟的"窗口"(viewport)比屏幕宽,...

    星辉
  • 无阻塞加载脚本

    通常加载页面的时候,对于组件是并行下载的,现代大部分浏览器对于Js同样也是支持并行下载,但是在脚本下载、解析并执行完毕之前,不会开始下载任何其他内容。

    菜的黑人牙膏
  • 几种Code Value Web输入的解决方案[代码]

    http://files.cnblogs.com/neozhu/AutocompletedSetKeyValue.rar

    阿新
  • Coolite Toolkit非常棒的控件

    Coolite Toolkit非常适合做web应用程序的开发,它提供了很多专业的Asp.net输入/验证/显示控件,和页面布局的框架,同时完全支持ajax,因为...

    阿新

扫码关注云+社区

领取腾讯云代金券