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

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

聖光之護

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

原创

305人浏览过

使用 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 数据可能如下所示：

Find JSON Path Online

Easily find JSON paths within JSON objects using our intuitive Json Path Finder

查看详情

{
    "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);
?>

登录后复制

代码解释：