`

jquery获取表单数据

 
阅读更多
一、serialize()方法
1、格式
var data = $("form").serialize();
2、功能
将表单内容序列化成一个字符串。
3、返回结果
username=forrest&passwd=1234&gender=0&interest=swimming&interest=running&interest=readBook
如果存在中文,需要转码
jquery form表单.serialize()序列化后中文乱码问题原因及解决
原因:.serialize()自动调用了encodeURIComponent方法将数据编码了 
解决方法:调用decodeURIComponent(XXX,true);将数据解码 
例如: 
var params = jQuery("#formId").serialize(); // http request parameters. 
params = decodeURIComponent(params,true);
在进行编码
params = encodeURI(encodeURI(params));
 后台
String paramsTrans = new String(params.getBytes("ISO-8859-1"),"UTF-8");
params = java.net.URLDecoder.decode(paramsTrans , "UTF-8");
问题解决。
----------------------------------------------------------------------------------------------------------------------------------
注意:页面端发出的数据作两次encodeURI这个做的好处在于,不管浏览器用户在页面来设置编码,服务器所采用的编码来做一次URLencode转换成UTF-8.
encodeURL函数主要是来对URI来做转码,它默认是采用的UTF-8的编码.
 具体说明2次encodeURI:
其中具体的原理分析如下,假设页面端输入的中文是一个“中”,按照下面步骤进行解码
1.第一次encodeURI,按照utf-8方式获取字节数组变成[-28,-72-83],对字节码数组进行遍历,把每个字节转化
成对应的16进制数,这样就变成了[E4,B8,AD],最后变成[%E4,%B8,%AD]
2.第二次encodeURI,把数组最后变成[%25E4,%25B8,%25AD]然后就把处理后的数据[%25E4,%25B8,%25AD]
发往服务器端,当应用服务器调用getParameter方法,getParameter方法会去向应用服务器请求参数
应用服务器最初获得的就是发送来的[%25E4,%25B8,%25AD],应用服务器会对这个数据进行URLdecode操作,
URldecode操作和encodeURL操作是相反的操作,处理结果就是[%E4,%B8,%AD],并把这个值返回
给getParameter方法
然后再在服务器端中调用相应的URL转码方法或者是函数  就可以把数据还原成最初页面发送过来的中文“中”了。
 
二、serializeArray()方法
1、格式
var jsonData = $("form").serializeArray();

2、功能
将页面表单序列化成一个JSON结构的对象。注意不是JSON字符串。
 
3、返回结果:
[{"name":"lihui", "age":"20"},{...}] 获取数据为 jsonData[0].name。


jquery扩展函数:


$.fn.serializeObject = function(para)    
{    
var serializeObj={}; // 目标对象 
var tempObj={};//临时对象
    var array=this.serializeArray(); // 转换数组格式
    if(para!=null&&para!=undefined){
    $.each(para,function(name,value) {
    array.push({"name":name,"value":value});
    });
    }
    console.log(para);
    console.log(array);
    $(array).each(function(){ // 遍历数组的每个元素 {name : xx , value : xxx} 
        if(serializeObj[this.name]){ // 判断对象中是否已经存在 name,如果存在name 
              if($.isArray(serializeObj[this.name])){ 
                 serializeObj[this.name].push(this.value); // 追加一个值 hobby : ['音乐','体育'] 
              }else{ 
                      // 将元素变为 数组 ,hobby : ['音乐','体育'] 
                 serializeObj[this.name]=[serializeObj[this.name],this.value]; 
              } 
        }else{ 
            serializeObj[this.name]=this.value; // 如果元素name不存在,添加一个属性 name:value 
        } 
    });     
   return serializeObj;    
};


附:
字符串转对象(strJSON代表json字符串)
  var obj = eval(strJSON);
  var obj = strJSON.parseJSON();
  var obj = JSON.parse(strJSON);
json对象转字符串(obj代表json对象)
  var str = obj.toJSONString();
  var str = JSON.stringify(obj)
运用时候需要除了eval()以外需要json.js包(切记哦)

 

分享到:
评论

相关推荐

    jquery获取表单值

    在Web开发中,jQuery作为一个非常流行的JavaScript库,简化了许多复杂的DOM操作,特别是对于表单数据的获取与处理方面提供了极大的便利。本文将详细讲解如何使用jQuery来获取不同类型的表单控件(如文本框、文本域、...

    jquery获取表单doc文档合集整理.zip

    《jQuery获取表单数据深度解析与实践指南》 在前端开发中,jQuery库以其简洁的API和强大的功能,成为开发者们的首选工具之一。本资料合集主要围绕如何使用jQuery高效地获取和处理HTML表单数据进行深入探讨,适用于...

    jquery获取表单元素的方法

    本文将详细解析如何使用jQuery获取表单元素的各种值,包括文本框(TEXT)、文本区域(AREA TEXT)、复选框(CHECKBOX)、单选按钮(RADIO)、下拉列表(SELECT)以及表格(TABLE)中的数据。 ### 文本框(TEXT) ...

    jquery获取form表单input元素值的简单实例

    首先,要获取表单中input元素的值,最常用的方法是使用jQuery的val()方法。当使用 $("#id") 选择器选中了一个元素后,可以使用 .val() 来获取这个元素的值。这里,“#id”是CSS选择器的一种,用于选中id属性为特定值...

    jQuery实现获取form表单内容及绑定数据到form表单操作分析

    主要介绍了jQuery实现获取form表单内容及绑定数据到form表单操作,结合jQuery封装插件操作分析了jQuery针对form表单的serializeJson数据获取及setForm数据绑定相关操作技巧,需要的朋友可以参考下

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

    在处理表单数据时,jQuery的`serialize()`和`serializeArray()`方法尤为有用。 1. **JSON对象到表单数据的转换** 要将JSON对象转换为适合表单提交的数据格式,我们需要遍历JSON对象的键值对,构建一个字符串形式的...

    JavaScript之提升篇-Jquery经典入门教程

    14. 表单处理:使用jQuery获取表单数据,验证用户输入,实现动态提交。 15. 动态加载:利用Ajax技术实现页面部分内容的动态加载,提升用户体验。 16. 响应式设计:结合jQuery和媒体查询,实现不同设备屏幕下的适配...

    SSH+jquery

    在CRUD操作中,它接收表单数据,调用服务层方法,然后返回相应的视图。 **Hibernate框架**是Java领域的一个持久化框架,主要用于简化数据库操作。它提供了ORM(对象关系映射)功能,使得开发者可以用Java对象来操作...

    Jquery超强验证表单

    在“jQuery超强验证表单”这个主题中,我们将深入探讨如何利用jQuery来实现高效且用户友好的表单验证。** **1. jQuery基础知识** 在深入表单验证之前,我们需要了解jQuery的基本用法。jQuery通过选择器(如$("#id")...

    依赖于jQuery的表单数据验证工具

    "依赖于jQuery的表单数据验证工具"是一种利用JavaScript库jQuery实现的验证解决方案,它能够简化和优化前端验证过程。 jQuery是一个流行的JavaScript库,它的核心功能包括DOM操作、事件处理、动画效果以及Ajax交互...

    jquery实现弹窗表单填写提交

    // 获取表单数据 $.ajax({ url: "submit.php", // 提交的URL type: "POST", data: formData, success: function(response) { alert("数据已成功提交!"); $("#popupForm").hide(); // 提交后关闭弹窗 }, ...

    jQuery用户注册表单验证代码

    在用户注册过程中,表单验证是至关重要的,它确保用户输入的数据符合预设的规则,从而提高数据质量和用户体验。 首先,我们需要理解jQuery的基本使用。在HTML文档中引入jQuery库后,可以通过"$"符号来调用其方法。...

    jQuery自定义表单.zip

    对于表单来说,jQuery能够方便地获取和修改表单元素的值,监听表单事件,如提交、改变等,从而实现复杂的表单逻辑。 在"jQuery自定义表单"项目中,我们主要关注以下几点: 1. **表单元素操作**:使用jQuery选择器...

    jquery form表单获取内容以及绑定数据

    在这一过程中,经常需要使用JavaScript和jQuery等技术来实现对表单的高级控制,比如动态获取表单数据和将数据绑定到表单控件中。本文将重点介绍如何使用jQuery来获取表单内容以及将数据绑定到表单上,并通过一个实例...

    jQuery输入手机号码获取验证码表单代码

    8. **Ajax通信**:在用户点击获取验证码或提交表单时,可以通过Ajax异步请求将数据发送到服务器,这样不会刷新整个页面,保持用户交互的流畅性。 9. **CSS样式**:提供的`css`目录下的文件用于设置页面样式,包括...

    jquery实现通过按钮弹出表单

    // 获取表单数据 // 在这里可以进行数据验证、发送Ajax请求等操作 console.log(formData); // 提交成功后关闭表单 $("#formContainer").hide(); }); }); ``` 在上述代码中,`$(document).ready()`函数确保在...

    jquery高级注册表单.zip

    在网页开发中,表单是收集用户信息的重要工具,而jQuery能够极大地提升表单的用户体验,使操作更流畅、反馈更及时。 首先,我们要了解jQuery的基本概念。jQuery是一个轻量级的JavaScript库,它简化了DOM(文档对象...

    jQuery滑动表单验证效果.zip_jQuery滑动表单验证效果

    在网页开发中,表单验证是一项至关重要的任务,它确保用户输入的数据符合预期的格式和规则,从而提高数据质量和用户体验。jQuery,一个流行的JavaScript库,提供了丰富的功能来简化这一过程。"jQuery滑动表单验证...

Global site tag (gtag.js) - Google Analytics