Question

我想将我的控制器文件中的变量传递给我的视图文件中的javascript代码，我在控制器中使用sql查询从数据库获取，它是一个变量，我可以使用简单的方式将该变量传递给查看文件laravel方法但无法在javascript代码中使用它可能是因为它的范围。

我的观点文件：

<div id="js-example-disabled">
    <h2><code>Mood Meter..!!</code></h2>
    <input type="range" min="0" max="50" data-rangeSlider disabled>
    <output></output>

    <button data-behaviour="toggle">@if($user==Auth::user())<p>Change Mood</p>@endif</button>

</div>
<div id="j">

</div>


<script src="{{URL::asset('rangeSlider.js')}}"></script>
<script>
    (function () {
        var value;

        var selector = '[data-rangeSlider]',
                elements = document.querySelectorAll(selector);

        // Example functionality to demonstrate a value feedback
        function valueOutput(element) {
            value = element.value,
                    output = element.parentNode.getElementsByTagName('output')[0];

        }

        for (var i = elements.length - 1; i >= 0; i--) {
            valueOutput(elements[i]);
        }

        Array.prototype.slice.call(document.querySelectorAll('input[type="range"]')).forEach(function (el) {
            el.addEventListener('input', function (e) {
                valueOutput(e.target);
            }, false);
        });


        // Example functionality to demonstrate disabled functionality
        var toggleBtnDisable = document.querySelector('#js-example-disabled button[data-behaviour="toggle"]');
        toggleBtnDisable.addEventListener('click', function (e) {
            var inputRange = toggleBtnDisable.parentNode.querySelector('input[type="range"]');
            console.log(inputRange);
            if (inputRange.disabled) {
                inputRange.disabled = false;
            }
            else {
                inputRange.disabled = true;
            }
            inputRange.rangeSlider.update();
        }, false);
        rangeSlider.create(elements, {

value:10,
            // Callback function
            onInit: function () {
            },

            // Callback function
            onSlideStart: function (value) {
                console.info('onSlideStart', 'value: ' + value);
            },

            // Callback function
            onSlide: function (value) {
                console.log('onSlide', 'value: ' + value);
            },

            // Callback function
            onSlideEnd: function (value) {
                 var xmlhttp = new XMLHttpRequest();
  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById('j').innerHTML=this.responseText;
    }
  };
  xmlhttp.open("GET", "/meter/"+value, true);
  xmlhttp.send();
            }
        });

    })();

</script>

我的控制器文件：

public function meter($value)
 {


    $data=user::where('id',Auth::user()->id)
    ->update(['meter'=>$value]);


  return response()->json([
    'data'=>$value
    ]);
 }

Answer 1

您可以在刀片模板中的任何位置使用双花括号{{ }}。例如：

<script>
    var value = {{ $value }};
    alert(value); //alert is to test if it is working or not
</script>

Answer 2

试试这个由jaffery方式@ laracast开发的包，它将php vars转换为javascript，这里是链接

https://github.com/laracasts/PHP-Vars-To-Js-Transformer

Answer 3

  xmlhttp.onreadystatechange = function() {
    if (this.readyState == 4 && this.status == 200) {
      document.getElementById('j').innerHTML=this.responseText.data;
    }

应该做的伎俩

如何从视图文件中将数据库中的值提取到javascript代码（laravel 5.2）

3 个答案: