Я использую laravel5.5 Ajax-пейджинг.Когда я нажимаю на второй странице, он выводит данные в формате JSON

Question

Я использую laravel5.5 Ajax пейджинг. Я часть HTML, собранная в контроллере. Когда я нажал на второй странице, я перешел к этому методу. Как заставить скомпилированный код HTML продолжать отображаться на странице? После нажатия на вторую страницу возвращается строка JSON данных. Это проблема. Как мы можем заставить данные на второй странице продолжать отображаться на исходной странице?

PHP

//Screen video, playback volume and key points.
public function accept（Request $ request）{
    $id=$_GET['id']; 
    $summer=$_GET['key'];
    $name=DB::table('vd_category')->where('address',$summer)->value('name');
    if($id=='1'){
$video=DB::table('vd_video_'.$summer)->orderBy('state','desc')->paginate(25);
        }else if($id=='2'){
            $video=DB::table('vd_video_'.$summer)->orderBy('thumbs','desc')- 
>paginate(25);
        }
        $data='';
        foreach($video as $list){
            $data.='<div class="col-md-1-5 col-sm-4 col-xs-6" style="padding:0 
5px;"><div class="movie-item">';
            $data.="<a style='position:relative;display:block;' title='$list- 
>video_name' target='_blank' href='details?id=$list->id&key =$summer'>";
            $data.="<img alt='$list->video_name' title='$list->video_name' 
 src=\"uploads/$list->image_address\" height=\"230px\" width='100%'>";
            $data.="<button class='bdtag'></button>";
            $data.="</a>";
            $data.="<div class=\"meta\"><div 
style=\"width:100%;overflow:hidden;height:20px;\">";
            $data.="<a href='/details?id='$list->id'&key='$summer' 
target='_blank' title='$list->video_name' class=\"movie-name\">$list- 
>video_name</a>";
            $data.="<span class=\"otherinfo\"> 5.0分</span></div><div 
class=\"otherinfo\">类型：$name</div></div></div></div>";
        }
        $datav['1']=$data;
        $datav['2']="<div>"."{$video->appends(['id' => 
 $id,'key'=>$summer,'name'=>'page'])->links()}"."</div>";
        return json_encode($datav);
}

HTML

<div id="data">
    @foreach($video as $list)
        <div class="col-md-1-5 col-sm-4 col-xs-6" style="padding:0 5px;">
            <div class="movie-item">
                <a style="position:relative;display:block;" title="{{$list- 
     >video_name}}" target="_blank" href="/details?id={{$list->id}}&key= 
    {{$status}}">
                     <img alt="{{$list->video_name}}" title="{{$list- 
       >video_name}}" src="{{asset('uploads')}}/{{$list->image_address}}" 
    height="230" 
    width="100%">
                    <button class="bdtag"></button>
                </a>
                <div class="meta">
                    <div style="width:100%;overflow:hidden;height:20px;"><a 
    href="/details?id={{$list->id}}&key={{$status}}" target="_blank" title=" 
    {{$list- 
    >video_name}}" class="movie-name">{{$list->video_name}}</a><span 
     class="otherinfo"> 5.0分</span></div>
                    <div class="otherinfo">类型：{{$namme}}</div>
                </div>

            </div>
        </div>
    @endforeach
        </div>
    </div>
 </div>
<div id="datav" style="background:#FFF;padding-left:15px;">
{{$video->appends(['id' => $page,'name'=>'page'])->links()}}
</div>

JavaScript

<select name=""  required id="where_id" style="float: right;padding- 
    left:10px;border-left:8px;width: 90px;height: 30px;">
    <option value="">Click screening</option>
    <option value="1">Sort by play volume</option>
    <option value="2">Ranking by points</option>
    </select>
    <input type="hidden" id="summer" value="{{$status}}">
    <script type="text/javascript">
    $.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
    });
    $("#where_id").change(function () {
    var id=$("#where_id").val();
    var summer=$("#summer").val();

    $.ajax({
        type:"get",
        url:"accept",
        dataType:'json',
        data:{id:id,key:summer},
        success:function (event){
            $("#data").html(event[1]);
            $("#datav").html(event[2]);
        }
      });
     });
</script>

Answer 1

  It has been solved.js has been modified.
That is, the parameters carried by the URL through the Ajax request to the 
back-end again, and then the back-end returned JSON data inserted into the 
specified location again, probably this is the solution, my English is not 
very good, please forgive me.


<script type="text/javascript">
$.ajaxSetup({
    headers: {
        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
    }
 });
 $("#where_id").change(function () {
    fun();
 });
 function fun() {
    var id=$("#where_id").val();
    var summer=$("#summer").val();
    $.ajax({
        type:"get",
        url:"accept",
        dataType:'json',
        data:{id:id,key:summer},
        success:function (event){
            $("#data").html(event[1]);
            $("#datav").html(event[2]);
            pagedata();
        }
    });
     }
        function pagedata(){
    $(".page-item a").click(function (){
        var href=this.href;
        this.href="javascript:void(0);";
        var id=getQueryVariable('page',href);
        var key=getQueryVariable('key',href);
        var page=getQueryVariable('page',href);
        $.ajax({
            type: "get",
            url: "accept",
            dataType: 'json',
            data: {id: id, key: key,page:page},
            success:function (event){
                $("#data").html(event[1]);
                $("#datav").html(event[2]);
                pagedata();
            }
        })
    })
    }
   // Intercept the parameter values carried by URL, such as page parameters 
    //and some custom parameters.
     function getQueryVariable(name,url) {
        var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
        var data=url.slice(url.indexOf('?'));
        var r =data.substr(1).match(reg);
        if (r != null) {
            return unescape(r[2]);
        }
        return null;
    }
  </script>