json定义及jquery操作json的方法

2023-12-11java编程

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() 方法：

$.parseJSON() 方法用于将 JSON 字符串转换为 JavaScript 对象。

示例：

var jsonStr = '{"name":"Alice","age":18,"gender":"female"}';
var jsonObj = $.parseJSON(jsonStr);
console.log(jsonObj.name); // 输出 "Alice"

$.getJSON() 方法

$.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 文件发起请求，并且获取数据正确时，调用回调函数处理数据。在回调函数中获取数据并使用。

两条示例说明：

利用$.getJSON方法获取外部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"
    }
]

将表单数据转化为JSON格式并提交到服务器：

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() 方法提交到服务器。

The End

相关推荐

一文带你掌握Java8中Lambda表达式函数式接口及方法构造器数组的引用

基于Java 谈回调函数

java equals函数用法详解

JavaWeb学习笔记分享(必看篇)

Java中replace、replaceAll和replaceFirst函数的用法小结

基于Java中进制的转换函数详解

热门文章

热门精品源码

最新VIP资源