为什么将数据从 php 发送到 javascript (Laravel) 时进行 json 编码？答案

【问题标题】：Why json encode when sending data from php to javascript (Laravel)?为什么将数据从 php 发送到 javascript (Laravel) 时进行 json 编码？
【发布时间】：2017-05-31 14:01:02
【问题描述】：

我刚刚阅读了this 问题，并注意到很多显示 json 编码的答案。我只是想知道为什么？是为了某种安全吗？因此，例如在 Laravel 中，这是否是正确的方法来拉取东西

var date = '{!! json_encode($event->date) !!}',
parseDate = JSON.parse(date);

//use parseDate here.

很抱歉提出一个全新的问题，但我没有代表对原始问题发表评论：/

【问题讨论】：

您的问题似乎与您发布的链接没有任何关系，除了引用 laravel 和一些 json 函数。您链接中的人询问如何在 javascript 中发送和访问 Eloquent 实例，一个简单、重要的方法是对其属性进行 json_encode 并将其传递给 javascript。
@georaldc 他的问题是为什么有必要对所述数据进行 json_encode。 :)
这是因为javascript变量存储为json

标签： php laravel

【解决方案1】：

我只是在通过“使用 oauth 登录”回调刀片模板将数据从 Laravel API 发送到 Vue SPA 时遇到了这个问题。

我花了一些时间才弄清楚如何修复有效载荷。感谢Amit Gupta的回答，我在这个问题中找到了答案。

这是退出 Laravel 的有效负载，用于上下文：

    return view('oauth/callback', [
        'user' => $user,
    ]);

然后，在callback.blade.php，我有这个代码：

<html>
    <head>
        <meta charset="utf-8">
        <title>{{ config('app.name') }}</title>
        <script>
            window.opener.postMessage(
                {
                    user: {!! $user !!},
                },
                "{{ url('/') }}"
            );

            window.close();
        </script>
    </head>

    <body>
    </body>

</html>

我不得不改变这个：

user: "{{ $user }}",

到这里：

user: {!! $user !!},

在修复之前，我将一个字符串化对象插入到字符串中，所以我被SyntaxError: Unexpected token o in JSON at position 1 错误所困扰，因为{ 和} 字符没有用双引号括起来。

这是我接收有效负载的 JavaScript：

    onMessage(e) {
        const hasUser = (e.data.user && (Object.keys(e.data.user).length > 0));

        if ((e.origin !== window.origin) || !hasUser) {
            return undefined;
        }

        console.log('user payload', e.data.user);
        console.log('type', typeof e.data.user);

        if (this.hasIntendedUrl) {
            return this.$router.push(this.$store.getters['auth/intendedUrl'])
                .then(() => this.$store.dispatch('auth/clearIntendedUrl'))
                .catch(() => {});
        }

        return this.$router.push({ name: 'home' }).catch(() => {});
    },

您可以看到我不需要JSON.parse()，因为typeof e.data.user 是object。

很抱歉，这里的答案很长，但我想展示一个完全合格的解决方案。对我来说，这只是一个类型转换问题，首先基于 JSON 对负载进行字符串化，然后进行 JSON 解析。这意味着 Laravel 应该专注于准备对象的传输安全版本，而 JavaScript 应该专注于将其转换回 Object。

在同一个文件中混合 PHP 和 JS 总是一个棘手的问题。正如您在我的示例中看到的那样，那些无害的 " 包装 "{{ $user }}" 是 JavaScript 代码被指示将对象放入字符串中，而这不能是 JSON.parse()'d。

【讨论】：

【解决方案2】：

作为对 Amit Gupa 的回应，这里是没有解析就无法工作的代码（基于 this）。好的，第一部分是视图的主要部分。 $event 是从数据库中提取的，日期和时间是分开存储的。我使用 laravel widgets 将其用作小部件，尽管它几乎可以用作普通视图。

<div id="clockdiv">
        <div class = 'timeFormat form-group-shadow'>
            <span class="days">0</span>
            <div class="small-text">Days</div>
        </div>
        <div class = 'timeFormat form-group-shadow'>
            <span class="hours">00</span>
            <div class="small-text">Hours</div>
        </div>
        <div class = 'timeFormat form-group-shadow'>
            <span class="minutes">00</span>
            <div class="small-text">Minutes</div>
        </div>
        <div class = 'timeFormat form-group-shadow'>
            <span class="seconds">00</span>
            <div class="small-text">Seconds</div>
        </div>
    </div>
</div>

{{ HTML::script('js/countdown.js') }}

<script>
    var date = '@if(isset($event)){!! json_encode($event->date) !!}@endif',
    time = '@if(isset($event)){!! json_encode($event->time) !!}@endif',
    dateTime = JSON.parse(date) + " " + JSON.parse(time);

   if(new Date(dateTime) >= Date.now()){
       initializeClock('clockdiv', dateTime);
   };
</script>

脚本'js/countdown.js'可以在这里看到。

function getTimeRemaining(endtime){
    var t = Date.parse(endtime) - Date.parse(new Date());
    var seconds = Math.floor( (t/1000) % 60 );
    var minutes = Math.floor( (t/1000/60) % 60 );
    var hours = Math.floor( (t/(1000*60*60)) % 24 );
    var days = Math.floor( t/(1000*60*60*24) );
    return {
        'total': t,
        'days': days,
        'hours': hours,
        'minutes': minutes,
        'seconds': seconds
    };
}

function initializeClock(id, endtime){
    var clock = document.getElementById(id);
    var daysSpan = clock.querySelector('.days');
    var hoursSpan = clock.querySelector('.hours');
    var minutesSpan = clock.querySelector('.minutes');
    var secondsSpan = clock.querySelector('.seconds');

    function updateClock(){
        var t = getTimeRemaining(endtime);
        daysSpan.innerHTML = t.days;
        hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
        minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
        secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);
        if(t.total<=0){
            clearInterval(timeinterval);
        }
    }

     updateClock();

     var timeinterval = setInterval(updateClock,1000);
}

这段代码运行良好，但当我不解析时失败。

【讨论】：

如果你在 Javascript 中使用JSON.parse('2017-01-25')，那么它将失败。当你在做json_encode时，你不需要JSON.parse或$.parseJSON。

【解决方案3】：

当您将json_encode 用作：

var date = {!! json_encode($event->date) !!};

然后它返回一个JSON 字符串。 PHP json_encode 函数将传递给它的数据转换为 JSON 字符串，然后可以将其输出到 JavaScript 变量。 JSON 是 JavaScript 文字符号的子集，因此您可以将 JSON 直接放入 JavaScript 代码中，只要表达式有效。

不需要JSON.parse 或$.parseJSON，事实上，使用它们会失败。

date 要么是 JavaScript 对象（如果 PHP“关联”数组有非数字键，所以 json_encode 输出 {...}）或 JavaScript 数组（如果 json_encode 输出 [...]）。

【讨论】：

我做了一个小倒计时应用程序，如果不先执行 JSON.parse，它将无法工作。嗯，也许我做错了。
添加为另一个答案。

【解决方案4】：

一般来说，当您想要保留其结构时，JSON 用于将数据从服务器发送到浏览器。在 Javascript 中很容易解析，结果是一个与服务器语言（如 PHP）中的原始数组匹配的数组。对于简单的单一值，它并不是真正需要的。

【讨论】：