javaScript在表单提交时获取表单数据的示例代码

2025-02-28 05:50

本文主要是介绍javaScript在表单提交时获取表单数据的示例代码,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

《javaScript在表单提交时获取表单数据的示例代码》本文介绍了五种在JavaScript中获取表单数据的方法:使用FormData对象、手动提取表单数据、使用querySelector获取单个字...

方法 1:使用 FormData 对象

FormData 是一个方便的内置对象,用于获取表单中的键值对数据。

示例代码

<form id="myForm">
  <input type="text" name="username" value="JohnDoe" />
  <input type="email" name="email" value="john@example.com" />
  <input type="password" name="password" value="12345" />
  <button type="submitphp">Submit</button>
</form>
<script>
  document.getElementById('myForm').addEventListener('submit', function (event) {
    event.preventDefault(); // 阻止默认表单提交行为
    // 获取表单数据
    const formData = new FormData(this);
    // 遍历表单数据
    for (let [key, value] of formData.entries()) {
      console.log(`${key}: ${value}`);
    }
    // 如果需要转换为 jsON 对象
    const data = Object.fromEntries(formData.entries());
    console.log(data);
  });
</script&androidgt;

解释:

  • FormData(this):创建一个包含表单所有数据的对象。
  • formData.entries():获取键值对的迭代器。
  • Object.fromEntries():将键值对转换为对象。

方法 2:通过 serialize 手动提取表单数据

可以通过直接访编程问表单元素的值手动提取表单数据。

示例代码

<form id="myForm">
  <input type="text" name="username" value="JohnDoe" />
  <input type="email" name="email" value="john@example.com" />
  <input type="password" name="password" value="12345" />
  <button type="submit">Submit</button>
</form>
<script>
  document.getElementById('myForm').addEventListener('submit', function (event) {
    event.preventDefault();
    const form = event.target;
    const formData = {};
    // 遍历表单元素
    Array.from(form.elements).forEach((element) => {
      if (element.name) {
     php   formData[element.name] = element.value; // 获取每个字段的值
      }
    });
    console.log(formData);
  });
</script>

解释

  • form.elements:获取表单中所有的控件(如 <input><select> 等)。
  • 通过 element.name 识别表单字段并提取其 value

方法 3:使用 querySelector 手动获取单个字段数据

如果你只想获取某几个字段的数据,可以直接用选择器获取特定的表单字段。

示例代码

<form id="myForm">
  <input type="text" id="username" name="username" value="JohnDoe" />
  <input type="email" id="email" name="email" value="john@example.com" />
  <button type="submit">Submit</button>
</form>
<script>
  document.getElementById('myForm').addEventListener('submit', function (event) {
    event.preventDefault();
    // 获取单个字段值
    const username = document.querySelector('#username').value;
    const email = document.querySelector('#email').value;
    console.log(`Username: ${username}`);
    console.log(`Email: ${email}`);
  });
</script>

解释

  • 通过 querySelector 获取具体字段,并访问其 value

方法 4:通过 URL 查询参数形式获取表单数据

可以将表单提交后的数据序列化成 URL 查询字符串的形式。

示例代码

<form id="myForm">
  <input type="text" name="username" value="JohnDoe" />
  <input type="email" name="email" value="john@example.com" />
  <button type="submit">Submit</button>
</form>
<script>
  document.getElementById('myForm').addEventListener('submit', function (event) {
    event.preventDefault();
    const formData = new FormData(this);
    // 转换为 URL 查询参数
    const queryString = new URLSearchParams(formData).toString();
    console.log(queryString); // username=JohnDoe&email=john%40example.com
  });
</script>

解释

  • URLSearchParams(formData):将表单数据转换为查询参数格式。
  • .toString():生成 URL 查询字符串。

方法 5:配合 AJAX 提交表单数据

通过 fetchXMLHttpRequest 可以将表单数据异步提交到服务器

示例代码

<form id="myForm">
  <input type="text" name="username" value="JohnDoe" />
  <input type="email" name="email" value="john@example.com" />
  <button type="submit">Submit</button>
</form>
<script>
  document.getElementById('myForm').addEventListener('submit', function (event) {
    event.preventDefault();
    const formData = new FormData(this);
    // 提交表单数据到服务器
    fetch('/submit', {
      method: 'POST',
      body: formData,
    })
      .then((response) => response.json())
      .then((data) =>php console.log(data))
      .catch((error) => console.error('Error:', error));
  });
</script>

解释

  • fetch('/submit', { method: 'POST', body: formData }):将表单数据发送到服务器。
  • 响应结果可以通过 response.json() 处理。

总结

  • 简单提取数据:使用 FormData
  • 手动提取数据:直接访问 form.elementsquerySelector
  • 序列化为查询字符串:通过 URLSearchParams
  • 配合提交到服务器:结合 fetch 或其他 AJAX 方法实现动态提交。

选择方法取决于实际需求,例如是否需要动态处理、是否需要提交到服务器等。

到此这篇关于JavaScript如何在表单提交的时候获取到表单数据的文章就介绍到这了,更多相关javascript表单提交获取表单数据内容请搜索China编程(www.chinasem.cn)以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程China编程(www.chinasem.cn)!

这篇关于javaScript在表单提交时获取表单数据的示例代码的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1153577

相关文章

Spring Boot中的路径变量示例详解

《SpringBoot中的路径变量示例详解》SpringBoot中PathVariable通过@PathVariable注解实现URL参数与方法参数绑定,支持多参数接收、类型转换、可选参数、默认值及... 目录一. 基本用法与参数映射1.路径定义2.参数绑定&nhttp://www.chinasem.cnbs

MyBatis-Plus通用中等、大量数据分批查询和处理方法

《MyBatis-Plus通用中等、大量数据分批查询和处理方法》文章介绍MyBatis-Plus分页查询处理,通过函数式接口与Lambda表达式实现通用逻辑,方法抽象但功能强大,建议扩展分批处理及流式... 目录函数式接口获取分页数据接口数据处理接口通用逻辑工具类使用方法简单查询自定义查询方法总结函数式接口

JAVA中安装多个JDK的方法

《JAVA中安装多个JDK的方法》文章介绍了在Windows系统上安装多个JDK版本的方法,包括下载、安装路径修改、环境变量配置(JAVA_HOME和Path),并说明如何通过调整JAVA_HOME在... 首先去oracle官网下载好两个版本不同的jdk(需要登录Oracle账号,没有可以免费注册)下载完

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命

Spring Boot 结合 WxJava 实现文章上传微信公众号草稿箱与群发

《SpringBoot结合WxJava实现文章上传微信公众号草稿箱与群发》本文将详细介绍如何使用SpringBoot框架结合WxJava开发工具包,实现文章上传到微信公众号草稿箱以及群发功能,... 目录一、项目环境准备1.1 开发环境1.2 微信公众号准备二、Spring Boot 项目搭建2.1 创建

Java中Integer128陷阱

《Java中Integer128陷阱》本文主要介绍了Java中Integer与int的区别及装箱拆箱机制,重点指出-128至127范围内的Integer值会复用缓存对象,导致==比较结果为true,下... 目录一、Integer和int的联系1.1 Integer和int的区别1.2 Integer和in

SpringSecurity整合redission序列化问题小结(最新整理)

《SpringSecurity整合redission序列化问题小结(最新整理)》文章详解SpringSecurity整合Redisson时的序列化问题,指出需排除官方Jackson依赖,通过自定义反序... 目录1. 前言2. Redission配置2.1 RedissonProperties2.2 Red

IntelliJ IDEA2025创建SpringBoot项目的实现步骤

《IntelliJIDEA2025创建SpringBoot项目的实现步骤》本文主要介绍了IntelliJIDEA2025创建SpringBoot项目的实现步骤,文中通过示例代码介绍的非常详细,对大家... 目录一、创建 Spring Boot 项目1. 新建项目2. 基础配置3. 选择依赖4. 生成项目5.

JSONArray在Java中的应用操作实例

《JSONArray在Java中的应用操作实例》JSONArray是org.json库用于处理JSON数组的类,可将Java对象(Map/List)转换为JSON格式,提供增删改查等操作,适用于前后端... 目录1. jsONArray定义与功能1.1 JSONArray概念阐释1.1.1 什么是JSONA

Java JDK1.8 安装和环境配置教程详解

《JavaJDK1.8安装和环境配置教程详解》文章简要介绍了JDK1.8的安装流程,包括官网下载对应系统版本、安装时选择非系统盘路径、配置JAVA_HOME、CLASSPATH和Path环境变量,... 目录1.下载JDK2.安装JDK3.配置环境变量4.检验JDK官网下载地址:Java Downloads