phpからjavascript（Laravel）にデータを送信するときにjsonがエンコードするのはなぜですか？

Question

私はちょうどthisの質問を読んで、jsonエンコーディングを示す多くの回答に気づいた。なぜ私は思っていますか？それは何らかのセキュリティのためですか？だから、Laravel中のインスタンスに、この全く新しい質問を作成するための

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

//use parseDate here. 

申し訳中のものを引っ張るための正しい方法だろうが、私は元の質問にコメントする担当者がありません：/

Answer 1

を一般的にJSONは、構造を保持したいときにサーバーからブラウザにデータを送信するために使用されます。 Javascriptで解析するのは簡単で、結果はサーバ言語の元の配列（PHPなど）と一致する配列になります。シンプルで単一の値の場合、実際には必要ありません。

Answer 2

あなたがようjson_encodeを使用する場合：

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

それはJSON文字列を返します。 PHP json_encode関数は、渡されたデータをJSON文字列に変換し、それをJavaScript変数に出力することができます。 JSONはJavaScriptのリテラル表記法のサブセットであるため、式が有効な場所で直接JSONをJavaScriptコードにドロップすることができます。

JSON.parseまたは$.parseJSONの必要はなく、実際には使用できません。またはJavaScriptアレイ（json_encode出力[...]場合）（PHP「連想」配列は、非数値キーなどjson_encode出力{...}を有する場合）

dateはJavaScriptオブジェクトであろういずれか。

Answer 3

Amit Gupaに対する応答では、（thisに基づく）解析なしでは動作しないコードがあります。さて、最初の部分はビューの主要部分です。 $イベントは、日付と時刻を別々に保存してデータベースから取得しています。私は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); 
} 

このコードはうまくいきますが、解析しないと失敗します。