使用脚本标签内的刀片 @foreach 渲染 HTML答案

【问题标题】：render HTML with blade @foreach inside script tag使用脚本标签内的刀片 @foreach 渲染 HTML
【发布时间】：2019-10-18 19:37:46
【问题描述】：

我有一个下拉列表。对于选定的特定选项，我想在来自控制器的视图中呈现具有不同数据的 HTML。

为此，我在视图中编写脚本标记，然后在 jQuery 中使用刀片 foreach if 条件，然后在刀片 php 中迭代 HTML。但它给了我错误

userprofile:966 Uncaught SyntaxError: Unexpected token <

我是 Laravel 的新手，还在探索，所以想知道这是否可能。如果不可能，那我该如何实现呢？

这是我的代码

<script>
                        $(document).ready(function () {

                            if ($("#user_right").val() == 1)
                            {
                                @foreach ($user_alias_detail["a"] as $user)

                                        <div class="field">
                                            <input type="text" value="{{ $user->name }}">
                                        </div>
                                @endforeach
                            }
                            elseif ($("#user_right").val() == 2)
                            {
                                @foreach ($user_alias_detail["b"] as $user)

                            <div class="field">
                                <input type="text" value="{{ $user->name }}">
                            </div>
                                @endforeach
                            }
                        });
                    </script>

【问题讨论】：

你应该给我们你的$user_alias_detail，这样我们就可以确定你不是foreaching错误的属性
"这是我的代码，它给了我错误" 那会是什么错误？您可以将其粘贴到您的问题中吗？另外，我不确定你为什么在其中使用 Javascript，这可能只用 Blade 就可以实现。
你不能在script标签内显示纯html，这就是你得到错误的原因。
为什么还要在 javascript 中显示 html。为什么你认为 jquery 有 $.load 或 $.get。让 php 渲染 html 并返回它会请求。附加结果并完成。干净的代码

标签： php jquery html laravel laravel-blade

【解决方案1】：

试试这段代码。我花时间为你写了。您可以修改它以满足您的需要。谢谢。

//form blade

<div class="form-group">
   <label class="control-label">Select Value <span style="color:red">*</span></label>

   <select class="form-control" id="user_right" name="user_right" required>  
      <option value="">--Select--</option>             
      <option value="1"{{(old('user_right')=='1')? "selected"  : ""}}>One</option>
      <option value="2"{{(old('user_right')=='2')? "selected"  : ""}}>Two</option>
      <option value="3"{{(old('user_right')=='3')? "selected"  : ""}}>Three</option>

   </select>

</div>

<div class="form-group">
  @if($htmldata=='')
     <!--display nothing on page-->
  @else

   {{ $htmldata->recorddetails }}

  @elseif                                


</div>


//javascript code to fetch the item id
<script type="text/javascript">
            // When the document is ready
     $(document).ready(function(){

    $("#user_right").change(function(e){

       var value= e.target.value;

       if ("https:" == document.location.protocol) 
        {

        location.href="https://example.com/renderpage/"+value;
        } 
      else 
        {
        location.href="http://example.com/renderpage/"+value;
       }

    });

</script>


//route
Route::get('/loadpage','Controller@displayPage');
Route::get('/renderpage/{id}','Controller@displaydataonPage');


//controller to load page
public function displayPage()
   {  

      $data['htmldata']='';    
      return view('htmlpage', $htmldata);

   }

//controller to display data on page
public function displaydataonPage($id)
   {  
 $data['htmldata']=DB::table('table')->where('datavalue',$id)->orderby('rank','asc')->first();             
      return view('htmlpage', $htmldata);    
   }

【讨论】：

【解决方案2】：

为了给你一个完整的答案，我需要知道你的代码中应该在哪里显示所有这些元素。

我会使用这样的东西。您将 php 数组转换为 json 数组，然后使用 (for .. in) 循环遍历 json 数组。使用 jquery append，您可以将 html 插入到父 DOM 元素中。

<script>
var user_a = @json($user_alias_detail["a"]);
var user_b = @json($user_alias_detail["b"]);


       $(document).ready(function () {

                        if ($("#user_right").val() == 1)

                                for(var user in user_a) {
                                // container div is the wrapper element
                                $(".container-div").append('<div class="field">
                                    <input type="text" value="'+user.name+'">
                                </div>');
                            }
                    }
                    elseif ($("#user_right").val() == 2)
                    {

                            for(var user in user_b) {
                                // container div is the wrapper element
                                $(".container-div").append('<div class="field">
                                    <input type="text" value="'+user.name+'">
                                </div>');
                            }
                    }
                });
</script>

【讨论】：

【解决方案3】：

使用模板文字 ``

                 <script>
                    $(document).ready(function () {

                        if ($("#user_right").val() == 1)
                        {
                           `
                            @foreach ($user_alias_detail["a"] as $user)

                                    <div class="field">
                                        <input type="text" value="{{ $user->name }}">
                                    </div>
                            @endforeach
                           `
                        }
                        elseif ($("#user_right").val() == 2)
                        {
                          `
                            @foreach ($user_alias_detail["b"] as $user)

                        <div class="field">
                            <input type="text" value="{{ $user->name }}">
                        </div>
                            @endforeach
                          `
                        }
                    });
                </script>

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

【讨论】：