`

form表单提交数据问题

阅读更多
form表单提交数据问题说难不难,但处理不好,也会变难!
javascript已经封装好的一个方法是serialize(),但这个方法是将表单数据加载成 key1=value1&key2=value2&... 这种格式大家都知道不是Json格式,且这种格式的数据传到后台 JSONObject.parseObject() 是解析不了的!!!
所以为了方便使用JSONObject将前台传来的数据转成java对象,笔者更喜欢用下面这种方式:


$.fn.serializeJson=function(){ 
            var serializeObj={}; 
            var array=this.serializeArray(); 
            var str=this.serialize(); 
            $(array).each(function(){ 
                if(serializeObj[this.name]){  //这个判断主要是针对复选框 等多选的
                    if($.isArray(serializeObj[this.name])){ 
                    if(this.value){ // 复选框第二个之后的选项有值 [ 除空字符串、null、undefinded ] 才会进入
                        serializeObj[this.name].push(this.value);
                    }
                    }else{ 
                    if(this.value){ // 复选框第二个被选项有值  [ 除空字符串、null、undefinded ]  才会进入
                    serializeObj[this.name]=[serializeObj[this.name],this.value];
                    }
                    } 
                }else{ 
                    serializeObj[this.name]=this.value;  
                } 
            }); 
            return serializeObj; 
};


这是将form表单数据序列化成json对象,然后再用 JSON.stringify() 就会将json对象转成json字符串传到后台即可!

//==============================================================================

笔者菜鸟,如有不足,敬请指教!
分享到:
评论

相关推荐

    layui form表单提交之后重新加载数据表格的方法

    本文将探讨在使用layui框架的情况下,如何在表单提交之后重新加载数据表格。 首先,让我们来分析一下使用的layui组件。Layui是一个前端UI框架,它提供了一套模块化的组件,方便开发者快速开发界面。其中,form模块...

    C# post方式提交Form表单

    在Form表单提交中,POST方法会将表单数据封装在请求体中发送到服务器,而不是像GET那样将其附加到URL后面。这样可以确保数据的安全性,并且对数据长度没有限制。 二、C#实现POST表单提交的步骤 1. 创建HTTP客户端:...

    php curl模仿form表单提交图片或文件

    在PHP开发中,有时我们需要模拟用户通过HTML表单提交数据,包括文件和图片。`cURL`库提供了一个强大的功能,允许我们实现这样的任务。在本文中,我们将深入探讨如何使用PHP的cURL库来模仿form表单提交,特别是提交...

    防止Layui form表单重复提交的实现方法

    在使用Layui设计表单时,经常会遇到表单提交后页面刷新导致的重复提交问题。为了解决这个问题,开发者需要确保表单只提交一次,防止不必要的数据重复处理或者服务器的重复计算。下面详细解释几种防止Layui表单重复...

    FORM表单中文乱码问题分析与解决

    FORM表单中文乱码问题分析与解决 在 Web 开发中,中文乱码问题是一个常见的问题,尤其是在FORM表单传递参数时。这个问题的根本原因是对中文的编码与解码方式不一致。我们可以理解为对中文的加密与解密的密钥不一致...

    servlet接收form表单提交的数据

    本篇将详细介绍如何使用Servlet来接收form表单提交的数据,并将其在网页上呈现。 一、Servlet生命周期 Servlet具有三个主要阶段:加载、初始化和服务。当客户端首次请求Servlet时,服务器会加载并初始化Servlet,...

    使用JQuery实现从JSON对象转换为form提交数据

    本篇文章将深入探讨如何利用jQuery从JSON对象转换为form提交数据。 首先,JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,它基于JavaScript的一个子集,易于人阅读和编写,同时也易于机器解析和...

    弹出层表单提交数据完美解决

    总结来说,实现弹出层表单提交数据完美解决,需要关注表单的设计、数据验证、异步通信、安全性以及用户体验等多个方面。通过合理的HTML结构、CSS样式和JavaScript交互,我们可以创建出用户友好且安全的弹出层表单...

    ajaxForm异步提交表单(含图片)

    AjaxForm是jQuery Form Plugin的一个功能,用于实现异步表单提交,特别是处理包含图片在内的复杂数据。本文将深入探讨如何使用ajaxForm进行异步表单提交。 首先,让我们了解什么是Ajax。AJAX(Asynchronous ...

    JQuery.form表单提交参数详解.txt

    在 Web 开发中,使用 AJAX 进行异步表单提交是一种常见的技术手段,它允许开发者无需重新加载整个页面即可提交数据并接收响应结果。JQuery 提供了一个强大的插件——JQuery Form,它可以简化这一过程。本文将详细...

    js的form表单提交url传参数(包含+等特殊字符)的两种解决方法

    在Web开发过程中,经常需要通过表单提交数据到服务器。当需要在URL中传递参数时,某些特殊字符可能会影响数据的正确传递,例如加号"+"在URL中有特殊的含义,它代表空格。为了确保数据能够准确无误地通过GET或POST...

    使用AJAX提交Form表单实例演示

    总结,这个实例演示了如何使用jQuery和AJAX来实现Form表单的无刷新提交。通过这种方式,用户可以在提交表单后立即看到结果,而无需等待页面刷新,提高了交互性和用户体验。记住,实际应用中你需要根据具体需求调整...

    vue获取form表单的值示例

    在开发基于Vue.js的web应用时,经常会需要处理表单提交,以及获取表单中各个输入字段的值。本文档中将分享一个如何在Vue.js中获取form表单值的示例,使用的是Element-ui组件库以及axios库来发送HTTP请求。下面将详细...

    form表单的异步回调方法

    默认情况下,表单提交会引发页面重定向,使用`<form>`的`action`属性指定处理表单数据的URL,`method`属性定义请求类型(GET或POST)。 2. **阻止默认行为(Preventing Default Behavior)**:为了阻止表单提交导致...

    关于\"form表单提交数据编码方式和tomcat接受数据解码方式的思考\"一文的纠错

    本文将纠正“关于'form表单提交数据编码方式和tomcat接受数据解码方式的思考'”一文中可能存在的错误,并深入探讨相关知识点。 首先,表单数据的编码方式主要取决于`<form>`标签的`enctype`属性。默认情况下,如果...

    ajax提交form表单

    这为用户提供了一种流畅、快速的交互体验,尤其是在处理表单提交时,可以避免传统表单提交带来的页面跳转和数据丢失问题。 ### 二、Ajax无刷新提交表单的核心步骤 1. **创建XMLHttpRequest对象**:这是Ajax的核心...

    微信小程序例子——使用form表单获取输入框数据

    console.log('表单提交的数据:', e.detail.value); // 在这里可以对数据进行处理,如发送到服务器 } }); ``` 五、数据校验 微信小程序提供了内置的表单数据校验功能,可以通过`validateFields`和`...

    EXT异步提交FORM表单

    - **解析请求参数**:由于EXT默认是以POST方式提交数据,所以在Action中需要确保能够正确解析这些参数。 ```java @Override public void validate() { if (username == null || username.trim().equals("")) { ...

    漂亮的form表单-漂亮的form表单

    7. **表单提交** - **GET与POST方法**:`method`属性决定提交方式,GET将数据附加到URL,POST则将数据隐藏在请求体中。 - **服务器端处理**:表单数据提交后,服务器端(如PHP、Python、Node.js等)需解析并处理...

Global site tag (gtag.js) - Google Analytics