博客

如何使用jQuery将一个对象序列化为查询字符串

  • Post category:jquery

将一个对象序列化为查询字符串可以使用jQuery的$.param()方法。

该方法接收一个对象作为参数，将对象转换为一个字符串，该字符串是以key=value的形式拼接起来的，并且每个键值对之间都用&符号连接。

以下是详细步骤：

  1. 首先引入jQuery库，在html代码中添加以下代码：
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
  1. 创建一个对象，例如：
var obj = {
    name: "John",
    age: 30,
    email: "john@example.com"
};
  1. 调用$.param()方法将该对象序列化为查询字符串，并将结果存储到变量中：
var queryString = $.param(obj);
  1. 使用该查询字符串作为URL参数发送HTTP请求或用于其他用途。

下面是示例代码：

<!DOCTYPE html>
<html>
<head>
    <title>jQuery序列化对象为查询字符串</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
    <h2>示例1</h2>
    <p>对象: { name: "John", age: 30, email: "john@example.com" }</p>
    <p>序列化结果: <span id="result1"></span></p>

    <h2>示例2</h2>
    <p>对象: { city: "Beijing", country: "China" }</p>
    <p>序列化结果: <span id="result2"></span></p>

    <script>
        var obj1 = { name: "John", age: 30, email: "john@example.com" };
        var obj2 = { city: "Beijing", country: "China" };

        // 序列化第一个对象
        var queryString1 = $.param(obj1);
        $("#result1").text(queryString1);

        // 序列化第二个对象
        var queryString2 = $.param(obj2);
        $("#result2").text(queryString2);
    </script>
</body>
</html>

以上代码将输出以下内容：

示例1

对象: { name: "John", age: 30, email: "john@example.com" }
序列化结果: name=John&age=30&email=john%40example.com

示例2

对象: { city: "Beijing", country: "China" }
序列化结果: city=Beijing&country=China

可以看到，$.param()方法将两个对象都正确地序列化为了查询字符串。注意，email键值对中的@符号需要经过URL编码，所以输出结果中它被转换为了%40。

Tags: