使用 jQuery 进行 Ajax 请求并 JSON 解码结果-php教程-PHP中文网

使用 jQuery 进行 Ajax 请求并 JSON 解码结果

聖光之護

发布： 2025-07-12 19:34:13

原创

184人浏览过

使用 jquery 进行 ajax 请求并 json 解码结果

本文旨在帮助开发者理解如何使用 jQuery 发送 Ajax 请求，并对接收到的 JSON 格式数据进行解码和处理。我们将通过一个实际示例，展示如何将服务器端返回的动态 HTML 代码嵌入到页面中，并提供关键代码片段和注意事项，确保您能顺利地将此技术应用到您的项目中。

使用 jQuery 发送 Ajax 请求并处理 JSON 响应

在 Web 开发中，Ajax (Asynchronous JavaScript and XML) 是一种常用的技术，允许在不刷新整个页面的情况下与服务器进行数据交互。jQuery 库简化了 Ajax 请求的发送和处理过程，使其更加便捷。本文将介绍如何使用 jQuery 发送 Ajax 请求，并对服务器返回的 JSON 格式数据进行解码和处理。

1. 发送 Ajax 请求

首先，我们需要使用 jQuery 的 $.ajax() 方法发送一个 Ajax 请求。以下是一个示例：

$.ajax({
    type: "POST", // 请求类型，可以是 GET 或 POST
    url: "getting_result.php", // 服务器端处理请求的 URL
    data: { rowid: id }, // 发送给服务器的数据，这里传递了一个名为 rowid 的参数
    dataType: "json", // 期望服务器返回的数据类型为 JSON
    cache: false, // 是否缓存请求结果，通常设置为 false
    success: function(data) {
        // 请求成功后的回调函数，data 包含服务器返回的数据
        console.log(data.json_form_name);
        $("#jsonformname").html(data.json_form_name);
    },
    error: function(jqXHR, textStatus, errorThrown) {
        // 请求失败后的回调函数，可以处理错误情况
        console.error("Ajax request failed:", textStatus, errorThrown);
    }
});

登录后复制

代码解释：

type: 指定请求类型，通常使用 POST 向服务器发送数据。
url: 指定服务器端处理请求的 URL。
data: 包含要发送到服务器的数据。这里，我们传递了一个名为 rowid 的参数，其值为变量 id。
dataType: 指定期望从服务器接收的数据类型。设置为 "json" 表示我们期望服务器返回 JSON 格式的数据。
cache: 控制浏览器是否缓存 Ajax 请求的结果。通常设置为 false 以确保每次都从服务器获取最新的数据。
success: 这是一个回调函数，当 Ajax 请求成功完成时会被调用。它接收一个参数 data，该参数包含了服务器返回的数据。
error: 这是一个回调函数，当 Ajax 请求失败时会被调用。它接收三个参数：jqXHR (jQuery XMLHttpRequest 对象), textStatus (描述错误类型的字符串), 和 errorThrown (服务器返回的错误信息)。

2. 处理 JSON 响应

当服务器返回 JSON 格式的数据时，jQuery 会自动将其解析为 JavaScript 对象。在 success 回调函数中，我们可以直接访问 JavaScript 对象的属性。

在上面的示例中，服务器返回的 JSON 数据可能如下所示：

{
    "json_form_name": "<div class=\"form-row\" id=\"form_output_row\"><div class=\"form-group col-md-6\">...</div></div>"
}

登录后复制

我们可以使用 data.json_form_name 来访问 json_form_name 属性的值。然后，可以使用 jQuery 的 html() 方法将该值插入到 HTML 元素中：

$("#jsonformname").html(data.json_form_name);

登录后复制

这会将 json_form_name 属性的值（一段 HTML 代码）插入到 ID 为 jsonformname 的 HTML 元素中。

3. 服务器端 JSON 编码

在服务器端，需要将数据编码为 JSON 格式。在 PHP 中，可以使用 json_encode() 函数：

<?php
// getting_result.php
require_once('include/form.class.php');
$rowid = $_POST['rowid']; // database row id to retrieve the content
$getjson_form = getJsonForm($rowid); // will get the jsonform name
$form = new Form(['file'=>$getjson_form[0]['json_form_name']]);
$get_form = $form->show();
$total_output = array("json_form_name"=>$get_form);
echo json_encode($total_output, JSON_FORCE_OBJECT);
?>

登录后复制

代码解释：