jquery 表单序列化

2024-09-08 01:48

本文主要是介绍jquery 表单序列化,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

jQuery序列化表单的方法总结

现在这里贴出案例中静态的html网页内容:

<!DOCTYPE html>
<html lang="zh">
<head><meta charset="UTF-8"><title>Title</title><script src="../js/jquery-3.2.1.js"></script></head>
<body><form method="post" action="#" id="test_form">用户名:<input type="text" name="username"/><br>密 &nbsp; 码:<input type="password" name="password"><br>爱 &nbsp; 好:吃饭<input type="checkbox" name="hobby" value="eat" checked/> 睡觉<input type="checkbox" name="hobby" value="sleep"/><br/>性 &nbsp; 别:男 <input type="radio" value="man" name="sex" checked/><input type="radio" value="woman" name="sex"/><br/>学 &nbsp; 校: <select name="school"><option value="yangguang">阳光小学</option><option value="xiwang">希望小学</option><option value="tiantian">天天小学</option></select><br><br><br><input type="submit" value="提交"/> &nbsp;&nbsp;<input type="reset" value="重置" /><br> <br> <br><input type="button" value="点我序列化为url" id="serializeUrl"/>&nbsp;&nbsp;<input type="button" value="点我序列化为json" id="serializeJson"/></form></body>
</html>

知识点一:serialize()

方法介绍:

作用:序列表单内容为字符串。参数: 无返回值:表单内容的字符串格式
  • 1
  • 2
  • 3
  • 4

案例代码:

<script>$(function () {$("#serializeUrl").click(function () {testJquerySerializeUrl();});});function testJquerySerializeUrl() {var serializeUrl = $("#test_form").serialize();alert("序列化为url格式为:"+serializeUrl);}</script>

这里写图片描述

总结:

1.我们看到输出的结果为表单项中的各表单元素的name和value2.格式是以url参数的形式,第一个参数前面没有&符号
  • 1
  • 2

知识点二:serializeArray()方法

方法介绍:

1.作用:序列化表格元素 (类似 '.serialize()' 方法) 返回 JSON 数据结构数据。
2.参数:无
3.返回值:返回的是JSON对象而非JSON字符串4.返回格式为:[ {name: 'firstname', value: 'Hello'}, {name: 'lastname', value: 'World'},{name: 'alias'}, // this one was empty]

案例:

  $(function () {$("#serializeUrl").click({"name":"zxy"},function () {testJquerySerializeUrl();// alert();});$("#serializeJson").click({},function () {testJquerySerializeJson();});});function testJquerySerializeJson() {var serializeJson = $("#test_form").serializeArray();alert("序列化为json格式为:"+JSON.stringify(serializeJson)); //JSON.stringify(json对象) 将json对象转化为json字符串}

结果为: 
这里写图片描述

总结:

1.我们看到调用方法返回的是json对象
2.可是用JSON.stringify()方法将json对象转化为json字符串

这篇关于jquery 表单序列化的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



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

相关文章

Vue和React受控组件的区别小结

《Vue和React受控组件的区别小结》本文主要介绍了Vue和React受控组件的区别小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学... 目录背景React 的实现vue3 的实现写法一:直接修改事件参数写法二:通过ref引用 DOMVu

Java实现将HTML文件与字符串转换为图片

《Java实现将HTML文件与字符串转换为图片》在Java开发中,我们经常会遇到将HTML内容转换为图片的需求,本文小编就来和大家详细讲讲如何使用FreeSpire.DocforJava库来实现这一功... 目录前言核心实现:html 转图片完整代码场景 1:转换本地 HTML 文件为图片场景 2:转换 H

C#使用Spire.Doc for .NET实现HTML转Word的高效方案

《C#使用Spire.Docfor.NET实现HTML转Word的高效方案》在Web开发中,HTML内容的生成与处理是高频需求,然而,当用户需要将HTML页面或动态生成的HTML字符串转换为Wor... 目录引言一、html转Word的典型场景与挑战二、用 Spire.Doc 实现 HTML 转 Word1

Vue3绑定props默认值问题

《Vue3绑定props默认值问题》使用Vue3的defineProps配合TypeScript的interface定义props类型,并通过withDefaults设置默认值,使组件能安全访问传入的... 目录前言步骤步骤1:使用 defineProps 定义 Props步骤2:设置默认值总结前言使用T

Java整合Protocol Buffers实现高效数据序列化实践

《Java整合ProtocolBuffers实现高效数据序列化实践》ProtocolBuffers是Google开发的一种语言中立、平台中立、可扩展的结构化数据序列化机制,类似于XML但更小、更快... 目录一、Protocol Buffers简介1.1 什么是Protocol Buffers1.2 Pro

Linux中的自定义协议+序列反序列化用法

《Linux中的自定义协议+序列反序列化用法》文章探讨网络程序在应用层的实现,涉及TCP协议的数据传输机制、结构化数据的序列化与反序列化方法,以及通过JSON和自定义协议构建网络计算器的思路,强调分层... 目录一,再次理解协议二,序列化和反序列化三,实现网络计算器3.1 日志文件3.2Socket.hpp

基于Python Playwright进行前端性能测试的脚本实现

《基于PythonPlaywright进行前端性能测试的脚本实现》在当今Web应用开发中,性能优化是提升用户体验的关键因素之一,本文将介绍如何使用Playwright构建一个自动化性能测试工具,希望... 目录引言工具概述整体架构核心实现解析1. 浏览器初始化2. 性能数据收集3. 资源分析4. 关键性能指

java中pdf模版填充表单踩坑实战记录(itextPdf、openPdf、pdfbox)

《java中pdf模版填充表单踩坑实战记录(itextPdf、openPdf、pdfbox)》:本文主要介绍java中pdf模版填充表单踩坑的相关资料,OpenPDF、iText、PDFBox是三... 目录准备Pdf模版方法1:itextpdf7填充表单(1)加入依赖(2)代码(3)遇到的问题方法2:pd

Olingo分析和实践之EDM 辅助序列化器详解(最佳实践)

《Olingo分析和实践之EDM辅助序列化器详解(最佳实践)》EDM辅助序列化器是ApacheOlingoOData框架中无需完整EDM模型的智能序列化工具,通过运行时类型推断实现灵活数据转换,适用... 目录概念与定义什么是 EDM 辅助序列化器?核心概念设计目标核心特点1. EDM 信息可选2. 智能类

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二