JSON定义
JavaScript Object Notation(JavaScript对象表示法,简称JSON)是用于数据交换的一种轻量级文本格式。它是JavaScript 语言中的一个子集,使用类似于 C 或 JavaScript 语言的语法。
JSON格式就是将字典类型、列表类型、unicode类型等Python数据类型转化成对应的 JSON 对象或者 JSON 数组等数据类型。
在 JSON 中,数据必须采用键值对的方式呈现,通过 { } 表示一个 JSON 对象,例如:
{
"name": "Alice",
"age": 18,
"gender": "female"
}
在这个 JSON 对象中,"name"、"age" 和 "gender" 分别是键,对应的值分别是 "Alice"、18 和 "female"。
JSON两种常见的结构类型:
对象:使用花括号 {} 包括的一组键值对集合,每个键值对之间用英文逗号隔开。每个键值对中,键使用字符串表示,值可以是字符串、数字、布尔值、数组、对象等。
数组:使用方括号 [] 包括的一组值的集合,每个值之间用英文逗号隔开。值可以是字符串、数字、布尔值、数组、对象等。
jQuery操作JSON的方法
$.parseJSON() 方法用于将 JSON 字符串转换为 JavaScript 对象。
示例:
var jsonStr = '{"name":"Alice","age":18,"gender":"female"}';
var jsonObj = $.parseJSON(jsonStr);
console.log(jsonObj.name); // 输出 "Alice"
$.getJSON() 方法用于从服务器获取 JSON 格式的数据。
示例:
$.getJSON("example.json", function(data) {
var name = data.name;
var age = data.age;
var gender = data.gender;
console.log(name, age, gender);
});
上面的代码将会向 example.json 文件发起请求,并且获取数据正确时,调用回调函数处理数据。在回调函数中获取数据并使用。
两条示例说明:
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON 文件显示</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<div id="data"></div>
<script>
$(document).ready(function(){
$.getJSON("data.json", function(data){
var html = '';
$.each(data, function(key, value){
html += '<h3>' + value.title + '</h3>';
html += '<p>' + value.content + '</p>';
});
$('#data').html(html);
})
})
</script>
</body>
</html>
data.json
[
{
"title": "标题1",
"content": "内容1"
},
{
"title": "标题2",
"content": "内容2"
},
{
"title": "标题3",
"content": "内容3"
}
]
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表单数据提交</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
</head>
<body>
<form id="my-form">
<label for="name">姓名:</label>
<input type="text" id="name" name="name"><br>
<label for="age">年龄:</label>
<input type="text" id="age" name="age"><br>
<label for="gender">性别:</label>
<input type="text" id="gender" name="gender"><br>
<input type="submit" value="提交">
</form>
<script>
$(document).ready(function(){
$('#my-form').submit(function(e){
e.preventDefault();
var formData = $(this).serializeArray();
var dataJSON = JSON.stringify(formData);
$.post('url/to/server', dataJSON, function(response){
console.log(response);
})
})
})
</script>
</body>
</html>
在上述代码中,利用 jQuery 的 serializeArray() 方法将表单数据序列化得到一个表单数据对象,然后使用 JSON.stringify() 方法将其转化为 JSON 格式数据,最后使用 $.post() 方法提交到服务器。