form表单提交数据的两种方式——submit直接提交、AJAX提交

这篇具有很好参考价值的文章主要介绍了form表单提交数据的两种方式——submit直接提交、AJAX提交。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

submit提交

form表单本身提供action属性,在action属性中填写数据提交地址后,点击submit类型的按钮即可将数据提交至指定地址,代码如下:

<form action="127.0.0.1:3001/register" method="post"  >
   <input type="text" placeholder="昵称" name="username"></input>
   <input type="email" placeholder="邮箱" name="email"></input>
   <input type="password" placeholder="密码" name="pwd"></input>
   <input type="submit">注册</input>
</form>
注意:
method指定请求方式
每个input表单项需要有name属性

通过上述方式提交表单数据后,会发生页面跳转,跳转至action所指定的地址,很难满足开发需求。若要提交数据后不跳转,可以尝试通过ajax提交数据。

AJAX提交

form表单不填写action属性,并且在提交时阻止表单的默认行为,获取到表单数据后通过ajax的方式发送给后端,代码如下:文章来源地址https://www.toymoban.com/news/detail-548856.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form id="form" method="post"  >
        <input type="text" placeholder="昵称" name="username"></input>
        <input type="email" placeholder="邮箱" name="email"></input>
        <input type="password" placeholder="密码" name="pwd"></input>
        <button id="btn" type="submit">注册</button>
     </form>
</body>
<script>
    document.getElementById('btn').onclick=function(e){
        e.preventDefault()

        let form = document.getElementById("form");
        form.addEventListener("submit", function (event) {
          
            let XHR = new XMLHttpRequest();
            // 将表单数据转为Formdat格式
            let FD  = new FormData(form);
            XHR.open("POST", "http://127.0.0.1:3001/register");
            // XHR.setRequestHeader("Content-type", "application/x-www-form-urlencoded")
            XHR.send(FD)
            XHR.onreadystatechange=function(){
                // do something according to response
            }
        })
    }
</script>
</html>

到了这里,关于form表单提交数据的两种方式——submit直接提交、AJAX提交的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • ant.design(简称antd)中Form表单组件提交表单、表单数据效验、表单自定义效验、表单布局集合

            ant.design(简称antd)现在我们使用较为广泛,web端中后台表单使用非常广泛,此遍文章集合了表单日常用法及使用注意事项。         下图是UI目标样式图                           1、以下是一个组件,首先引入ant相关依赖,在引入react相关依赖,主要使用了For

    2024年02月13日
    浏览(54)
  • vue3中,form表单校验之特殊字符校验、手机号、身份证号、百分制数字 & route和router的写法 & setup的两种用法 & rules中校验之blur和change

    vue3中,form表单校验之特殊字符校验、手机号、身份证号、百分制数字 route和router的写法 setup的两种用法 rules中校验之blur和change 1、写法一 index.vue 2、写法二完整版 index.vue 2、校验文件 srcutilsvalidate.ts

    2024年02月05日
    浏览(41)
  • ant a-form/a-form-model用法(组件使用、表单验证、数据收集、数据重置、数据提交)

     组件使用  绑定数据  定义form 提交数据,表单验证  打开表单时,内容重置 / 单个设置表单内容  获取表单内容 打开表单后,将整条数据对应填写到表单 有的时候可能会报错: 报错的话加一下this.$nextTick(()={})  组件使用 data: 提交 重置  至于修改、获取form中绑定的值,直

    2024年02月16日
    浏览(41)
  • vue3 antd项目实战——Form表单的提交与校验【v-model双向绑定input输入框、form表单数据,动态校验规则】

    本文依旧沿用 ant design vue 组件库和 ts 语言🔥🔥更多内容见Ant Design Vue官方文档 🔥🔥 vue3 antd项目实战——Form表单【后台管理系统 v-model数据的双向绑定,input输入框、Radio单选框的嵌套使用】 在上期文章中,我们完成了 UI界面的渲染 (渲染效果如下图),本期文章将带着大

    2023年04月22日
    浏览(84)
  • form表单上传数据的几种方式

    form 的基本使用 1、什么是表单 表单在网页中主要负责 数据采集功能 。HTML中的标签,就是用于采集用户输入的信息,并通过标签的提交操作,把用户收集到的信息发送到 Web 服务器进行处理。 2、表单的组成部分 表单标签 就是我们常说的form表单,就是所谓的表单标签。 表单

    2024年02月08日
    浏览(52)
  • Vue中强制更新数据的两种方式

    有时候我们发现修改了数据源后视图并没有更新,这里提供两种解决方案 Vue中强制更新数据的方法有两种。 方法一: 使用forceUpdate强制渲染,更新视图和数据。 注:全局强制刷新,性能消耗高。 方法二: this.$set()方法是Vue自带的可对数组和对象进行赋值,并触发监听的方法

    2024年02月11日
    浏览(51)
  • Kafka使用MirrorMaker同步数据的两种方式

    MirrorMaker 是 Kafka官方提供的跨数据中心的 流数据同步方案 。原理是通过从 原始kafka集群 消费消息,然后把消息发送到 目标kafka集群 。操作简单,只要通过简单的 consumer配置和 producer配置,然后启动 Mirror,就可以实现准实时的数据同步。 这里需要确保 目标Kafka集群(接收数

    2023年04月14日
    浏览(37)
  • 微信小程序的form表单提交

    第一:bindsubmit方法 注意: 1.使用form里面定义bindsubmit事件 2.bindsubmit事件需要配合button里面定义的formType=“submit” 操作 3.设置input的name值来获取对应的数据 通过e.detail.value获取数据, 其中包含input的value值 第二种:bindinput方法 注意: 1.在input框内使用bindinput属性的方式定义事件

    2024年02月11日
    浏览(35)
  • 【数据结构】归并排序的两种实现方式与计数排序

    前言:在前面我们讲了各种常见的排序,今天我们就来对排序部分收个尾,再来对归并排序通过递归和非递归的方法进行实现,与对计数排序进行简单的学习。 💖 博主CSDN主页:卫卫卫的个人主页 💞 👉 专栏分类:数据结构 👈 💯代码仓库:卫卫周大胖的学习日记💫 💪关注博

    2024年01月18日
    浏览(48)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包