如何将值从javascript传递到laravel中的html？

Question

我正在尝试将值从javascript传递到html作为变量。 因此，我从laravel php控制器获取价值。

Java脚本

$("ul.nav-tabs > li > a").click(function() {
    var id = $(this).attr("href").replace("#", "");
    console.log(id);

    if(id) {
        $.ajax({
            url: "{{ route('user.schedule.getId') }}",
            type: "GET",
            data:{'id':id},
            dataType: "json",
            success:function(data) {
                console.log(data);

            }
        });
     }
});

html刀片

               <ul class="nav nav-tabs tabs_content">
                    @foreach ($routes as $route)
                        <li >
                            <a href="#{{ $route->id }}" id="ad" data-toggle="tab">
                                {!! $route->name !!}
                            </a>
                        </li>
                    @endforeach
                </ul>
                <div class="tab-content blog_tabs">
                    <div class="tab-pane" name="schedule" id="" >
                        <?php
                             $tabSchedule = Schedule::
                                                where('route', $    )   
                                                ->latest()
                                                ->get();
                         ?>
                        @foreach ($tabSchedule as $schedule)
                            <ul class="list-group">
                                <li class="list-group-item">{{ $schedule->schedule_number}}</li>
                            </ul>
                        @endforeach    
                    </div>
                </div>

所以这是我想通过的图片，我不知道是否有可能实现：

我想将data传递给：

• id attirbute（请看上图）
• 作为laravel php中的where子句参数

如果您想知道数据的价值是数字： 1

Answer 1

用这个

success:function(data){
 $('#tab-'+id).val(data);
}

Answer 2

您可以在任何HTML选择器中将JS的打印值添加到html中，例如：

$("ul.nav-tabs > li > a").click(function() {
var id = $(this).attr("href").replace("#", "");
console.log(id);

if(id) {
    $.ajax({
        url: "{{ route('user.schedule.getId') }}",
        type: "GET",
        data:{'id':id},
        dataType: "json",
        success:function(data) {
            $("#yourDivId").text(data);
            //OR
            $("#yourDivId").val(data)

        }
    });
   }
});

Answer 3

要更改属性ID ，您可以简单地使用：

success:function(data){
   $('.tab-pane').attr('id', data);
}

为了将该属性传递给您的PHP脚本，有很多选项，但是其中之一是添加cookie，该cookie存储ID属性的值。

document.cookie= `myid=${$('.tab-pane').attr('id')}`;

要使用PHP返回值，您可以使用：

$_COOKIE['myid']

---

更新资料

的JavaScript

$("ul.nav-tabs > li > a").click(function() {
    var id = $(this).attr("href").replace("#", "");
    console.log(id);

    if(id) {
        $.ajax({
            url: "{{ route('user.schedule.getId') }}",
            type: "GET",
            data:{'id':id},
            dataType: "json",
            success:function(data) {
                $('.tab-pane').attr('id', data);
                document.cookie= `myid=${$('.tab-pane').attr('id')}`;
            }
        });
     }
});

HTML刀片

<ul class="nav nav-tabs tabs_content">
    @foreach ($routes as $route)
    <li >
        <a href="#{{ $route->id }}" id="ad" data-toggle="tab">
            {!! $route->name !!}
        </a>
    </li>
    @endforeach
</ul>
<div class="tab-content blog_tabs">
    <div class="tab-pane" name="schedule" id="" >
        <?php
         $tabSchedule = Schedule::
           where('route', $_COOKIE["myid"])   
           ->latest()
           ->get();
        ?>
        @foreach ($tabSchedule as $schedule)
        <ul class="list-group">
            <li class="list-group-item">
                {{ $schedule->schedule_number}}
            </li>
        </ul>
        @endforeach    
    </div>
</div>

Answer 4

假设标签页是click事件的处理程序，则可以使用ajax将数据作为POST数据传递到后端，

let tabId = document.querySelectorAll('.tab-pane')
tabId.forEach((t)={
  t.addEventListener('click', function(event, element){
    let id = element.getAttribute('id')
    $.ajaxSetup({
    headers: {
      'X-CSRF-TOKEN' : '{{ csrf_token() }}'
    }
  });
   $.ajax({
    url : '....', //yoururl
    method: 'POST',
    data: {'id' : id },
    success: functon(res){
      console.log(res)
    }  
  }) 
 })
})

然后在你的控制器

public function getSchedules(Request $request){
  $id = $request->get('id');
  $schedules=Schedules::where('id', $id)->get()->toJson();
return response()->json([$schedules], 200);

}