{"id":763,"date":"2025-06-11T23:06:34","date_gmt":"2025-06-11T15:06:34","guid":{"rendered":"https:\/\/www.zhaozhao123.cn\/php\/php-application-manual\/laravel\/763.html"},"modified":"2025-06-11T23:06:34","modified_gmt":"2025-06-11T15:06:34","slug":"laravel%ef%bc%9a%e5%a6%82%e4%bd%95%e5%9c%a8-blade-%e6%a8%a1%e6%9d%bf%e4%b8%ad%e5%b0%86-php-%e5%8f%98%e9%87%8f%e4%bc%a0%e9%80%92%e7%bb%99-javascript","status":"publish","type":"my1js","link":"https:\/\/www.zhaozhao123.cn\/php\/my1js\/763.html","title":{"rendered":"Laravel\uff1a\u5982\u4f55\u5728 Blade \u6a21\u677f\u4e2d\u5c06 PHP \u53d8\u91cf\u4f20\u9012\u7ed9 JavaScript"},"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 模板引擎来动态生成 HTML，并通过 JavaScript 来处理这些数据。以下是如何将 PHP 变量传递给 JavaScript 的示例步骤：<\/p>\n

    \n
  1. \n

    定义 PHP 变量<\/strong>：\n首先，在你的控制器或视图文件中定义一些 PHP 变量。<\/p>\n

    \/\/ 控制器示例\npublic function index()\n{\n   $data = [\n       'name' => 'John Doe',\n       'age' => 30,\n       'isStudent' => true\n   ];\n\n   return view('welcome', compact('data'));\n}\n\n\/\/ 视图文件示例（welcome.blade.php）\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>Welcome<\/title>\n   <script src=\"{{ asset('js\/script.js') }}\"><\/script>\n<\/head>\n<body>\n   <h1>Hello, {{ $data['name'] }}!<\/h1>\n   <p>You are {{ $data['age'] }} years old.<\/p>\n   <p>{{ $data['isStudent'] ? 'You are a student.' : 'You are not a student.' }}<\/p>\n<\/body>\n<\/html><\/code><\/pre>\n<\/li>\n
  2. \n
    创建 JavaScript 文件<\/strong>：\n创建一个 JavaScript 文件（例如 script.js<\/code>），并在其中使用这些变量。<\/p>\n
    \/\/ script.js\ndocument.addEventListener('DOMContentLoaded', function() {\n   const name = '{{ $data['name'] }}';\n   const age = '{{ $data['age'] }}';\n   const isStudent = '{{ $data['isStudent'] }}';\n\n   console.log(`Name: ${name}`);\n   console.log(`Age: ${age}`);\n   console.log(`Is Student: ${isStudent}`);\n\n   \/\/ 示例：更新页面元素的内容\n   document.getElementById('name').innerText = name;\n   document.getElementById('age').innerText = age;\n   document.getElementById('student-status').innerText = isStudent ? 'Yes' : 'No';\n});<\/code><\/pre>\n<\/li>\n
  3. \n
    确保资源路径正确<\/strong>：\n确保你的 JavaScript 文件的路径是正确的。在这个例子中，我们假设你的 JavaScript 文件位于 public\/js<\/code> 目录下。<\/p>\n<\/li>\n
  4. \n
    运行应用程序<\/strong>：\n运行你的 Laravel 应用程序并访问相应的 URL，你应该能够看到 PHP 变量被成功传递到 JavaScript 中，并且这些变量的值被显示在网页上。<\/p>\n<\/li>\n<\/ol>\n
    通过这种方式，你可以在 Blade 模板中动态生成 HTML，并通过 JavaScript 来处理这些数据。这在需要根据用户输入或其他条件动态生成内容时非常有用。<\/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>
    在现代的Web应用程序中，结合服务器端渲染模板与客户端交互（通过JavaScript）并不罕见。Laravel，一个受欢迎的PHP框架，提供了一个优雅的模板引擎叫做Blade，使得连接后端PHP逻辑与前端JavaScript变得简单。本教程涵盖了在Laravel的Blade模板中传递PHP变量到JavaScript的方法。<\/p>
    理解刀刃<\/h3>
    在深入传递变量之前，了解Blade是非常重要的。Blade是Laravel提供的简单但强大的模板引擎，以其优雅的语法和继承布局的能力而闻名。通常，您的Blade视图文件位于项目的视图目录下。resources\/views<\/code>目录 – 您使用HTML与Blade指令混合，这些指令在服务器上处理后生成最终的HTML发送到客户端。<\/p>
    传递变量：基础知识<\/h2>
    以下是将PHP变量传递到JavaScript的最简单方法：<\/p>
    <script>\n    var myVar = @json($phpVar);\n<\/script>\n<\/code><\/pre>
    这利用了Blade的@json<\/code>一个转换指令，将PHP变量转换为其JSON等效物，确保其格式正确以供JavaScript消费。HTML中的输出可能会看起来像这样：<\/p>
    <script>\n    var myVar = {\"name\":\"John\",\"age\":30};\n<\/script>\n<\/code><\/pre>
    这种方法适用于需要传递基本数据类型或数组结构的简单场景。<\/p>
    使用Blade的栈指令。<\/h2>
    在需要标准化跨不同视图的脚本包含方式时，你可以使用Blade的。@stack<\/code>指令：在您的主布局文件中放置一个堆栈指令，然后从子视图中弹出到堆栈中：<\/p>
    <!-- In main layout -->\n@stack('scripts')\n\n<!-- In child view -->\n@push('scripts')\n<script>\n    var userDetails = @json($userDetails);\n<\/script>\n@endpush\n<\/code><\/pre>
    这种方法将所有的脚本自定义都打包在一起，使得模板更加整洁，JavaScript的管理也更为方便。<\/p>
    利用控制器数据<\/h2>
    另一种方法是直接从控制器传递数据到视图。在从控制器返回视图时，您可以包括额外的数据：<\/p>
    public function showUserProfile()\n{\n    return view('user.profile', ['user' => User::find(1)]);\n}\n<\/code><\/pre>
    在您的Blade模板中，您可以访问它。$user<\/code>对方发过来的是一个对象。<\/p>
    <script>\n    var user = @json($user);\n<\/script>\n<\/code><\/pre>
    然而，这种方法应该谨慎使用，以免无意间将敏感数据传递到客户端，因为这些信息可以通过网页的源代码访问。<\/p>
    使用全局JavaScript对象<\/h2>
    对于更高级的方法，你可以将所有的PHP变量封装到一个全局的JavaScript对象中。这样可以保持命名空间和组织性：<\/p>
    window.Laravel = {\n    user : @json($user),\n    roles : @json($roles)\n};\n<\/code><\/pre>
    这种模式在你需要在JavaScript文件中全局地访问多个PHP变量时非常有用。它避免了过度污染全局命名空间，将相关数据逻辑地组织在一起。Window.Laravel<\/code>对不起，我不太明白您的意思，请您重新描述一下。<\/p>
    复杂的数据结构<\/h2>
    处理更复杂的数据结构，如集合或Eloquent模型，需要谨慎处理。这些结构中的关系和日期可能需要特别注意，并且可能需要序列化。一个安全的方法是在将它们赋值给JavaScript变量之前将其转换为数组或JSON：<\/p>
    $posts = Post::with('comments')->get();\nreturn view('blog.index', ['posts' => $posts->toJson()]);\n<\/code><\/pre>
    在你的Blade模板中：<\/p>
    <script>\n    var posts = JSON.parse('{!! $posts !!}');\n<\/script>\n<\/code><\/pre>
    “使用”的意思。{!! !!}<\/code>指导方针防止Blade从输出中逃脱，这在这里是必要的。toJson()<\/code>生成一个JSON字符串。两者都是。@json<\/code>and 是中文里的“和”，表示并列或连接的意思。{{ }}<\/code>会自动逃逸输出，导致双编码。谨慎使用，以避免XSS漏洞，确保在打印之前清理数据。<\/p>
    最佳实践安全措施<\/h2>
    在将PHP变量传递给JavaScript时，始终应考虑安全性问题。如果必要，需要对数据进行净化；使用编码函数以防止XSS攻击，并且永远不要暴露敏感信息。Laravel提供了许多工具来处理这种情况（例如）。e()<\/code>对于HTML实体编码。<\/p>
    前端构建工具<\/h2>
    对于大型应用，特别是使用前端框架如Vue或React的应用，你可以通过工具如Laravel Mix、Webpack或甚至Laravel的Vite集成来编译资产。在这种情况下，可以使用全局变量向你的JavaScript应用程序传递数据，或者采用特定包的具体策略，例如内联脚本或使用Promise驱动的动态导入。<\/p>
    结论。<\/h2>
    在Laravel Blade模板中从PHP传递数据到JavaScript可以通过多种方法实现，这取决于应用程序的结构和数据复杂性。虽然这是一个强大的功能，但开发者必须小心处理，特别是关于传递的数据的安全性。通过遵循这些实践，您可以在无缝集成PHP和JavaScript的同时保持您的应用组织良好且安全。<\/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 是一个基于 PHP 的框架，用于构建 Web 应用程序。在 Laravel 中，你可以使用 Blade 模板来渲染 HTML 页，并将 PHP 变量传递给 JavaScript。<\/p>\n
    假设我们有一个名为 “users.blade.php” 的模板文件，其中包含以下内容：<\/p>\n
    <!DOCTYPE html>\n<html lang=\"en\">\n<head>\n    <meta charset=\"UTF-8\">\n    <title>{{ $user->name }}<\/title>\n<\/head>\n<body>\n    <h1>Welcome, {{ $user->name }}!<\/h1>\n<\/body>\n<\/html><\/code><\/pre>\n
    在这个例子中，我们通过在 {{ $user->name }}<\/code> 中使用 $user<\/code> 类型的变量来传递一个名为 “user” 的 PHP 变量。这使得用户可以在前端看到与 Laravel 应用关联的数据。<\/p>\n
    接下来，我们需要在我们的 Vue.js 或 React.js 应用程序中使用这个模板。在 Vue.js 中，我们可以这样做：<\/p>\n
    import { Component } from 'vue';\nimport axios from 'axios';\n\n@Component({\n  template: `\n    <div id=\"app\">\n      <h1>{{ user.name }}<\/h1>\n    <\/div>\n  `,\n})\nexport default class App extends Vue {\n  user = null;\n\n  async created() {\n    const response = await axios.get('\/api\/users\/' + this.$route.params.id);\n    this.user = response.data;\n  }\n}<\/code><\/pre>\n
    在这个例子中，我们首先从服务器获取用户的详细信息（在这里是通过 $route.params.id<\/code>），然后将其传递给 Vue 实例的 user<\/code> 属性。这样，我们在 Vue 组件中的页面上就可以看到 “user” 数据了。<\/p>\n
    请注意，这只是一个基本的例子。在实际应用中，你可能需要处理更多的错误情况和数据验证，以及更复杂的路由逻辑。此外，Vue.js 和 React.js 提供了内置的方法来处理这些请求，而不是使用外部 API。<\/p>\n
    如果你正在使用的是 Angular 或其他框架，那么它们可能会提供类似的功能，但实现方式可能会有所不同。<\/p>\r\n<\/div>\r\n<\/div>\r\n<\/div>\r\n<\/div>\n","protected":false},"excerpt":{"rendered":"
    Bug编译狮 在 Laravel 中，你可以使用 Blade 模板引擎来动&#24..<\/p>\n","protected":false},"author":1,"featured_media":0,"menu_order":0,"template":"","meta":{"_acf_changed":false},"tags":[],"my1js2nav":[44],"tuisongtax":[],"class_list":["post-763","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\/763","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=763"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/tags?post=763"},{"taxonomy":"my1js2nav","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/my1js2nav?post=763"},{"taxonomy":"tuisongtax","embeddable":true,"href":"https:\/\/www.zhaozhao123.cn\/php\/wp-json\/wp\/v2\/tuisongtax?post=763"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}