jquery利用json实现页面之间传值的实例解析

下面我将详细讲解“jquery利用json实现页面之间传值的实例解析”的完整攻略。

什么是JSON？

JSON（JavaScript Object Notation），是一种轻量级的数据交换格式。它基于JavaScript Programming Language Standard ECMA-262 3rd Edition - December 1999的一个子集。JSON采用完全独立于编程语言的文本格式来存储和表示数据，它可以被几乎所有的编程语言解析和生成。JSON有着易于读写的文本格式，以及优秀的网络传输性能。

利用JSON实现页面之间传值的实例解析

在前端页面间进行数据传输是很常见的操作。在本次攻略中，我们将使用JSON来实现页面之间的传值。

示例一

第一个示例中，我们将使用简单的方式实现两个页面之间传递数据。具体步骤如下：

1. 在第一个页面中，我们定义一组数据，并将其存储在一个对象中：

<script type="text/javascript">
var data = { name:"John", age:25 };
</script>

1. 当用户点击按钮时，我们使用jQuery将数据转换为JSON字符串，并通过URL参数的方式将其传递给第二个页面：

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        var str = JSON.stringify(data);
        window.location.href = "page2.html?data=" + str;
    });
});
</script>

1. 在第二个页面中，我们通过获取URL参数的方式获取传递过来的JSON字符串，并使用JSON.parse()将其解析为JavaScript对象：

<script type="text/javascript">
$(document).ready(function(){
    var str = window.location.href.split("?data=")[1];
    var obj = JSON.parse(decodeURIComponent(str));
    $("p").text(obj.name + " is " + obj.age + " years old.");
});
</script>

这样，我们就完成了页面之间数据的传递。

示例二

第二个示例中，我们将使用更高级的方式实现页面之间的传递数据。具体步骤如下：

1. 在第一个页面中，我们定义一组数据，并将其存储在一个数组中：

<script type="text/javascript">
var data = [
    { name:"John", age:25 },
    { name:"Jane", age:30 },
    { name:"Bob", age:35 }
];
</script>

1. 当用户点击按钮时，我们使用jQuery将数据转换为JSON字符串，并通过post方式将其传递给服务器，服务器返回新的URL：

<script type="text/javascript">
$(document).ready(function(){
    $("button").click(function(){
        var str = JSON.stringify(data);
        $.post("url.php", { data: str }, function(resp){
            window.location.href = resp.url;
        }, "json");
    });
});
</script>

1. 在服务器端，我们接收JSON数据，并将其存储到session中，并将新的URL返回给客户端：

<?php
session_start();
$data = json_decode($_POST["data"]);
$_SESSION["data"] = $data;
echo json_encode(array("url" => "page2.php"));
?>

1. 在第二个页面中，我们从session中获取数据并显示在页面中：

<script type="text/javascript">
$(document).ready(function(){
    var data = <?php echo json_encode($_SESSION["data"]); ?>;
    for(var i=0; i<data.length; i++){
        $("ul").append("<li>" + data[i].name + " is " + data[i].age + " years old.</li>");
    }
});
</script>

这样，我们就完成了页面之间高级传递数据的操作。

小结

在本次攻略中，我们详细讲解了利用JSON实现页面之间传值的完整攻略，并提供了两个示例进行说明。这些知识可以让我们更方便地进行前端页面间数据传输。