一、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&¶!=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包(切记哦)
相关推荐
在Web开发中,jQuery作为一个非常流行的JavaScript库,简化了许多复杂的DOM操作,特别是对于表单数据的获取与处理方面提供了极大的便利。本文将详细讲解如何使用jQuery来获取不同类型的表单控件(如文本框、文本域、...
《jQuery获取表单数据深度解析与实践指南》 在前端开发中,jQuery库以其简洁的API和强大的功能,成为开发者们的首选工具之一。本资料合集主要围绕如何使用jQuery高效地获取和处理HTML表单数据进行深入探讨,适用于...
本文将详细解析如何使用jQuery获取表单元素的各种值,包括文本框(TEXT)、文本区域(AREA TEXT)、复选框(CHECKBOX)、单选按钮(RADIO)、下拉列表(SELECT)以及表格(TABLE)中的数据。 ### 文本框(TEXT) ...
首先,要获取表单中input元素的值,最常用的方法是使用jQuery的val()方法。当使用 $("#id") 选择器选中了一个元素后,可以使用 .val() 来获取这个元素的值。这里,“#id”是CSS选择器的一种,用于选中id属性为特定值...
主要介绍了jQuery实现获取form表单内容及绑定数据到form表单操作,结合jQuery封装插件操作分析了jQuery针对form表单的serializeJson数据获取及setForm数据绑定相关操作技巧,需要的朋友可以参考下
在处理表单数据时,jQuery的`serialize()`和`serializeArray()`方法尤为有用。 1. **JSON对象到表单数据的转换** 要将JSON对象转换为适合表单提交的数据格式,我们需要遍历JSON对象的键值对,构建一个字符串形式的...
14. 表单处理:使用jQuery获取表单数据,验证用户输入,实现动态提交。 15. 动态加载:利用Ajax技术实现页面部分内容的动态加载,提升用户体验。 16. 响应式设计:结合jQuery和媒体查询,实现不同设备屏幕下的适配...
在CRUD操作中,它接收表单数据,调用服务层方法,然后返回相应的视图。 **Hibernate框架**是Java领域的一个持久化框架,主要用于简化数据库操作。它提供了ORM(对象关系映射)功能,使得开发者可以用Java对象来操作...
在“jQuery超强验证表单”这个主题中,我们将深入探讨如何利用jQuery来实现高效且用户友好的表单验证。** **1. jQuery基础知识** 在深入表单验证之前,我们需要了解jQuery的基本用法。jQuery通过选择器(如$("#id")...
"依赖于jQuery的表单数据验证工具"是一种利用JavaScript库jQuery实现的验证解决方案,它能够简化和优化前端验证过程。 jQuery是一个流行的JavaScript库,它的核心功能包括DOM操作、事件处理、动画效果以及Ajax交互...
// 获取表单数据 $.ajax({ url: "submit.php", // 提交的URL type: "POST", data: formData, success: function(response) { alert("数据已成功提交!"); $("#popupForm").hide(); // 提交后关闭弹窗 }, ...
在用户注册过程中,表单验证是至关重要的,它确保用户输入的数据符合预设的规则,从而提高数据质量和用户体验。 首先,我们需要理解jQuery的基本使用。在HTML文档中引入jQuery库后,可以通过"$"符号来调用其方法。...
对于表单来说,jQuery能够方便地获取和修改表单元素的值,监听表单事件,如提交、改变等,从而实现复杂的表单逻辑。 在"jQuery自定义表单"项目中,我们主要关注以下几点: 1. **表单元素操作**:使用jQuery选择器...
在这一过程中,经常需要使用JavaScript和jQuery等技术来实现对表单的高级控制,比如动态获取表单数据和将数据绑定到表单控件中。本文将重点介绍如何使用jQuery来获取表单内容以及将数据绑定到表单上,并通过一个实例...
8. **Ajax通信**:在用户点击获取验证码或提交表单时,可以通过Ajax异步请求将数据发送到服务器,这样不会刷新整个页面,保持用户交互的流畅性。 9. **CSS样式**:提供的`css`目录下的文件用于设置页面样式,包括...
// 获取表单数据 // 在这里可以进行数据验证、发送Ajax请求等操作 console.log(formData); // 提交成功后关闭表单 $("#formContainer").hide(); }); }); ``` 在上述代码中,`$(document).ready()`函数确保在...
在网页开发中,表单是收集用户信息的重要工具,而jQuery能够极大地提升表单的用户体验,使操作更流畅、反馈更及时。 首先,我们要了解jQuery的基本概念。jQuery是一个轻量级的JavaScript库,它简化了DOM(文档对象...
在网页开发中,表单验证是一项至关重要的任务,它确保用户输入的数据符合预期的格式和规则,从而提高数据质量和用户体验。jQuery,一个流行的JavaScript库,提供了丰富的功能来简化这一过程。"jQuery滑动表单验证...