JS的Form表单转JSON格式的操作代码
作者:「已注销」 时间:2023-07-02 05:24:03
一、serialize()方法
格式:var data = $("#formID").serialize();
功能:将表单内容序列化成一个字符串。
注意:要使用params = decodeURIComponent(data ,true)进行解码,不然中文数据会乱码。
数据示例:Name=小明&Age=22&Sex=男
后台:获取字符串后,可以到后台进行处理数据。
代码示例:
$.ajax({
url: "ServletSelect?action=ins",
type: "post",
data: $("form").serialize(),
dataType:"json",
success: function (data) {
alert(data.msg);
}
})
二、serializeArray()方法
格式:var strdata = $("#formID").serializeArray();
功能:将表单序列化成一个JSON结构的对象。数组类型。
数据示例:(3)[{name:"Name",value:"小明"},{name:"Age",value:"22"},{name:"Sex",value:"男"}] 获取数据为 data [0].name
通过JSON.stringify()方法,将json数据转成string类型,供后台接收。
转换类型:var str= JSON.stringify(strdata );//转换成string数据
数据示例:”[{name:"Name",value:"小明"},{name:"Age",value:"22"},{name:"Sex",value:"男"}]”
代码示例:
var arry = $("表单").serializeArray();
$.ajax({
url: "/index/index",
data: { jsondata: JSON.stringify(arry) },
type:"post",
success: function () {
alert("success");
}
})
三、$.param()方法
格式:$.param(personObj)
功能:可以把json格式数据序列化成字符串形式
代码示例:
var obj={a:1,b:2}
var s=$.param(obj);
会形成a=1&b=2的形式
js 将json字符串转换为json对象的方法解析
将json字符串转换为json对象的方法。在数据传输过程中,json是以文本,即字符串的形式传递的,而JS操作的是JSON对象,所以,JSON对象和JSON字符串之间的相互转换是关键.
例如:
JSON字符串:
var str1 = '{ "name": "cxh", "sex": "man" }';
JSON对象:
var str2 = { "name": "cxh", "sex": "man" };
一、JSON字符串转换为JSON对象
要使用上面的str1,必须使用下面的方法先转化为JSON对象:
//由JSON字符串转换为JSON对象
var obj = eval('(' + str + ')');
或者
var obj = str.parseJSON(); //由JSON字符串转换为JSON对象
或者
var obj = JSON.parse(str); //由JSON字符串转换为JSON对象
然后,就可以这样读取:
Alert(obj.name);
Alert(obj.sex);
特别注意:如果obj本来就是一个JSON对象,那么使用eval()函数转换后(哪怕是多次转换)还是JSON对象,但是使用parseJSON()函数处理后会有问题(抛出语法异常)。
二、可以使用toJSONString()或者全局方法JSON.stringify()将JSON对象转化为JSON字符串。
例如:
var last=obj.toJSONString(); //将JSON对象转化为JSON字符
或者
var last=JSON.stringify(obj); //将JSON对象转化为JSON字符
alert(last);
注意:
上面的几个方法中,除了eval()函数是js自带的之外,其他的几个方法都来自json.js包。新版本的 JSON 修改了 API,将 JSON.stringify() 和 JSON.parse() 两个方法都注入到了 Javascript 的内建对象里面,前者变成了 Object.toJSONString(),而后者变成了 String.parseJSON()。如果提示找不到toJSONString()和parseJSON()方法,则说明您的json包版本太低。
来源:https://blog.csdn.net/CSDN_KONGlX/article/details/125670326
![](/images/zang.png)
![](/images/jiucuo.png)
猜你喜欢
Vue冷门技巧递归组件实践示例详解
![](https://img.aspxhome.com/file/2023/0/126550_0s.jpg)
使用GitHub和Python实现持续部署的方法
![](https://img.aspxhome.com/file/2023/2/93542_0s.png)
深入浅析mybatis oracle BLOB类型字段保存与读取
python tkiner实现 一个小小的图片翻页功能的示例代码
![](https://img.aspxhome.com/file/2023/7/83657_0s.png)
Vue+Flask实现图片传输功能
JavaScript 获得选中文本内容的方法
利用ajax制作在线翻译聊天室
python实现精准搜索并提取网页核心内容
![](https://img.aspxhome.com/file/2023/5/76955_0s.jpg)
MySQL Left JOIN时指定NULL列返回特定值详解
Python实战之ATM取款机的实现
![](https://img.aspxhome.com/file/2023/3/80643_0s.jpg)
jquery实现不同大小浏览器使用不同的css样式表的方法
解决Python中的modf()函数取小数部分不准确问题
![](https://img.aspxhome.com/file/2023/3/135023_0s.png)
python和C++共享内存传输图像的示例
![](https://img.aspxhome.com/file/2023/9/120479_0s.png)
利用Python实现在同一网络中的本地文件共享方法
Python input输入超时选择默认值自动跳过问题
![](https://img.aspxhome.com/file/2023/5/112995_0s.png)
前端开发中一些常用技巧总结
Python基础之数据类型详解
easy_install python包安装管理工具介绍
Mysql数据库group by原理详解
![](https://img.aspxhome.com/file/2023/0/69270_0s.png)
Python办公自动化之教你用Python批量识别发票并录入到Excel表格中
![](https://img.aspxhome.com/file/2023/9/67899_0s.png)