{"id":765,"date":"2025-06-11T23:09:19","date_gmt":"2025-06-11T15:09:19","guid":{"rendered":"https:\/\/www.zhaozhao123.cn\/php\/php-application-manual\/laravel\/765.html"},"modified":"2025-06-11T23:09:19","modified_gmt":"2025-06-11T15:09:19","slug":"laravel%ef%bc%9a%e5%a6%82%e4%bd%95%e5%9c%a8-blade-%e6%a8%a1%e6%9d%bf%e4%b8%ad%e6%b8%b2%e6%9f%93-json-%e6%95%b0%e6%8d%ae","status":"publish","type":"my1js","link":"https:\/\/www.zhaozhao123.cn\/php\/my1js\/765.html","title":{"rendered":"Laravel\uff1a\u5982\u4f55\u5728 Blade \u6a21\u677f\u4e2d\u6e32\u67d3 JSON \u6570\u636e"},"content":{"rendered":"
\r\n
\r\n
\r\n
\r\n
\r\n
\"Bug编译狮\"<\/figure>\r\n\r\n\r\n\r\n

Bug编译狮<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
\r\n

在 Laravel 中，你可以使用 Blade 模板引擎来渲染 JSON 数据。以下是一个简单的示例，展示了如何在 Blade 模板中渲染 JSON 数据。<\/p>\n

首先，确保你已经有一个控制器，并且该控制器返回了一个 JSON 响应。例如：<\/p>\n

namespace AppHttpControllers;\n\nuse IlluminateHttpRequest;\nuse IlluminateSupportFacadesDB;\n\nclass DataController extends Controller\n{\n    public function getData()\n    {\n        \/\/ 查询数据库中的数据\n        $data = DB::table('your_table')->get();\n\n        \/\/ 返回 JSON 响应\n        return response()->json($data);\n    }\n}<\/code><\/pre>\n
接下来，创建一个路由来处理这个请求：<\/p>\n
Route::get('\/data', 'DataController@getData');<\/code><\/pre>\n
现在，你可以通过访问 \/data<\/code> 路由来获取 JSON 数据并将其渲染到 Blade 模板中。假设你有一个名为 index.blade.php<\/code> 的视图文件，其中包含以下代码：<\/p>\n
<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Data Rendering<\/title>\n<\/head>\n<body>\n    <h1>JSON Data Rendering<\/h1>\n    <pre>{{ json_encode($data) }}<\/pre>\n<\/body>\n<\/html><\/code><\/pre>\n
在这个示例中，我们使用了 json_encode<\/code> 函数将 PHP 数组转换为 JSON 字符串，并将其嵌入到 HTML 预览框中。<\/p>\n
如果你需要更复杂的 JSON 处理逻辑，可以在控制器中编写相应的逻辑，并在视图中进行相应的渲染。例如：<\/p>\n
\/\/ 控制器方法\npublic function getData()\n{\n    $data = DB::table('your_table')->get();\n\n    \/\/ 示例：过滤特定字段\n    $filteredData = array_map(function ($item) {\n        return [\n            'id' => $item->id,\n            'name' => $item->name,\n        ];\n    }, $data);\n\n    \/\/ 返回 JSON 响应\n    return response()->json([\n        'status' => 'success',\n        'message' => 'Data retrieved successfully',\n        'data' => $filteredData,\n    ]);\n}<\/code><\/pre>\n
然后在视图中使用 compact<\/code> 函数传递变量：<\/p>\n
<!-- 视图文件 -->\n<!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\">\n    <title>Data Rendering<\/title>\n<\/head>\n<body>\n    <h1>JSON Data Rendering<\/h1>\n    @foreach ($data as $item)\n        <p>ID: {{ $item->id }}, Name: {{ $item->name }}<\/p>\n    @endforeach\n<\/body>\n<\/html><\/code><\/pre>\n
这样，你就可以在 Blade 模板中动态地渲染和显示 JSON 数据了。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>
\r\n
\r\n
\r\n
\r\n
\r\n
\"黑板Bug讲师\"<\/figure>\r\n\r\n\r\n\r\n
黑板Bug讲师<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
\r\n
介绍<\/h2>
Laravel的模板引擎Blade是一个强大的工具，用于在不牺牲使用纯PHP代码的前提下塑造应用前端。通常情况下，你需要在Blade模板中渲染JSON数据，无论你是处理AJAX请求、集成RESTful API还是从Laravel后端传递一些JavaScript库的数据。在这篇教程中，我们将探索多种使用Laravel Blade模板渲染JSON数据的方法，从基础开始逐步深入到更高级的概念。<\/p>
在Laravel Blade中使用JSON的入门教程<\/h2>
最简单的使用JSON与Blade的方法是通过使用。@json<\/code>自动调用的指导方针是哪一个？json_encode<\/code>基于提供的数据。这里是一个基本示例：<\/p>
<script>\n    var data = @json($array);\n<\/script>\n<\/code><\/pre>
这段代码片段将设置一个JavaScript变量。data<\/code>请提供要转换为JSON的文本或具体内容，以便我进行翻译和转换。$array<\/code>一个通过Laravel控制器传递到Blade模板的PHP数组。<\/p>
传递变量到JavaScript<\/h2>
有时，您可能希望将多个变量传递给JavaScript。而不是一个接一个地输出它们，您可以将它们打包到数组中并将其转换为JSON：<\/p>
<script>\n    var LaravelData = @json(['user' => $user, 'preferences' => $preferences]);\n<\/script>\n<\/code><\/pre>
现在，JavaScript 对象。LaravelData<\/code>包含属性user<\/code>and也是。preferences<\/code>各自持有各自的资料。<\/p>
处理AJAX响应中的JSON数据<\/h2>
刀片模板也可以在返回AJAX调用的JSON响应时非常有用。通常，你会从控制器直接返回响应，但在某些时候，你可能会从视图生成这个JSON。以下是一个示例控制器方法，它就是这样做的：<\/p>
public function getJsonData(Request $request)\n{\n    $data = ['users' => User::all(), 'status' => 'success'];\n    return response()->json($data);\n}\n<\/code><\/pre>
对不起，我不太明白你的意思，请重新描述一下。getJsonData<\/code>带有AJAX请求的URL，返回的JSON结构将从该URL生成。$data<\/code>抱歉，我不太明白你的意思，请重新描述一下你的问题。<\/p>
复杂数据转换<\/h2>
对于更复杂的数据操作，你可以使用Laravel的资源和集合。这些功能允许你在转换到JSON之前系统化地格式化Eloquent模型和集合。当你的应用使用资源类时，可以从控制器方法中直接返回这些资源或集合，并且Laravel会自动返回一个JSON响应。这里是一个示例资源：<\/p>
namespace AppHttpResources;\n\nuse IlluminateHttpResourcesJsonJsonResource;\n\nclass UserResource extends JsonResource\n{\n    public function toArray($request)\n    {\n        return [\n            'id' => $this->id,\n            'name' => $this->name,\n            'email' => $this->email,\n            \/\/ Include other fields\n        ];\n    }\n}\n<\/code><\/pre>
你可以像这样在控制器中使用这个资源：<\/p>
public function show($id)\n{\n    $user = User::findOrFail($id);\n    return new UserResource($user);\n}\n<\/code><\/pre>
再次提醒，blade 未使用于此处，但理解 Laravel 处理 JSON 响应的方法对于全栈开发至关重要。<\/p>
高级JavaScript集成<\/h2>
在复杂的应用中，你可以使用JavaScript框架或库与Laravel一起使用。如果你使用的是Vue.js、React 或者Angular与Laravel，可以将JSON数据作为props传递或者将其整合到应用程序中。这里是如何从Laravel Blade传入到一个Vue.js组件的数据：<\/p>
<example-component :prop-data=\"@{{ json_encode($data) }}\"><\/example-component>\n<\/code><\/pre>
这种方法利用了双大括号。@{{}}<\/code>告诉Blade忽略Vue语法。确保您的JSON数据安全编码，以避免JavaScript注入攻击。<\/p>
安全考虑<\/h2>
在处理Blade模板和JavaScript中的JSON数据时，安全应始终放在首位。务必警惕防止XSS（跨站脚本）攻击，通过始终对用户生成的内容进行编码来预防此类威胁。@json<\/code>指令和json_encode<\/code>处理这种情况需要手动编写JSON，但如果你手工创建JSON，请使用。htmlspecialchars()<\/code>为了净化输出，您可以使用以下等效的方法：<\/p>
var data = JSON.parse('{{ htmlspecialchars(json_encode($data), ENT_QUOTES, 'UTF-8') }}');<\/code><\/pre>
这种方法可以作为一种替代方法使用。@json<\/code>，提供额外的控制和安全性。<\/p>
结论<\/h2>
在这篇教程中，我们深入探讨了如何在Laravel Blade模板中高效渲染JSON数据。从基础示例到高级JavaScript集成，理解所涉及的过程将增强作为一名全栈开发者的技能。虽然这篇指南全面，但请始终关注Laravels的文档和社区以获取最新的最佳实践和安全建议。<\/p><\/body>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>
\r\n
\r\n
\r\n
\r\n
\r\n
\"长工码奴1523\"<\/figure>\r\n\r\n\r\n\r\n
长工码奴1523<\/h2>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n\r\n\r\n\r\n
\r\n
\r\n
在 Laravel 中，你可以使用 IlluminateSupportFacadesJson<\/code> 库来轻松地处理和渲染 JSON 数据。以下是如何在 Blade 模板中实现这个操作的步骤：<\/p>\n
    \n
  1. \n
    首先，确保你在项目的 resources\/views<\/code> 目录下有一个名为 json.blade.php<\/code> 的文件。<\/p>\n<\/li>\n
  2. \n
    在该文件中，添加以下代码：<\/p>\n<\/li>\n<\/ol>\n
    <?php\n\nuse IlluminateSupportFacadesJson;\n\nreturn view('json', [\n    'data' => Json::encode(['name' => 'John Doe', 'age' => 30]),\n]);<\/code><\/pre>\n
    在这个例子中，我们首先引入了 Json<\/code> 类，并将它作为视图的一部分。然后，我们在模板中定义了一个数组，其中包含了要渲染的数据（在这里是名字为 “John Doe” 和年龄为 30 的对象）。最后，我们将这个数组传递给 Json::encode()<\/code> 函数，将其转换为 JSON 格式并返回。<\/p>\n
      \n
    1. 现在，当你在浏览器中访问 \/json<\/code> 路径时，你会看到以下输出：<\/li>\n<\/ol>\n
      <!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>JSON Example<\/title>\n<\/head>\n<body>\n    <div id=\"app\"><\/div>\n\n    <!-- JavaScript will be injected here -->\n    <script src=\"\/js\/app.js\"><\/script>\n<\/body>\n<\/html><\/code><\/pre>\n
        \n
      1. 接下来，你需要创建一个名为 app.js<\/code> 的 JavaScript 文件，并在其中注入一些简单的 HTML5 表单数据：<\/li>\n<\/ol>\n
        document.addEventListener(\"DOMContentLoaded\", function () {\n    var data = document.getElementById('data').value;\n    var jsonData = JSON.parse(data);\n    console.log(jsonData);\n});<\/code><\/pre>\n
        在这个脚本中，我们从表单获取数据，并使用 JSON.parse()<\/code> 方法将其转换为 JavaScript 对象。然后，我们可以直接访问 JSON 对象中的属性和方法。<\/p>\n
        这样，你就完成了在 Laravel Blade 模板中渲染 JSON 数据的步骤。你可以根据需要修改模板和 JavaScript 文件的内容，以便更好地满足业务需求。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"
        Bug编译狮 在 Laravel 中，你可以使用 Blade 模板引擎来渲&#26..<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"","meta":{"_acf_changed":false},"tags":[],"my1js2nav":[44],"tuisongtax":[],"class_list":["post-765","my1js","type-my1js","status-publish","hentry","my1js2nav-laravel"],"acf":{"qian_art_seotitle":"","qian_art_seotitle_source":{"label":"SEO\u6807\u9898","type":"text","formatted_value":""},"qian_art_seokws":"","qian_art_seokws_source":{"label":"SEO\u5173\u952e\u8bcd","type":"text","formatted_value":""},"qian_art_stzhong":"","qian_art_stzhong_source":{"label":"\u4e2d | \u77ed\u6807\u9898","type":"text","formatted_value":""}},"_links":{"self":[{"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/my1js\/765","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/my1js"}],"about":[{"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/types\/my1js"}],"author":[{"embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/users\/1"}],"wp:attachment":[{"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/media?parent=765"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/tags?post=765"},{"taxonomy":"my1js2nav","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/my1js2nav?post=765"},{"taxonomy":"tuisongtax","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/tuisongtax?post=765"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}