即使使用laravel 5.4单击“后退”按钮,如何使用ajax从服务器检索到的数据也存储在页面上?

时间:2019-04-17 17:33:07

标签: ajax laravel-5

请问我对laravel非常陌生。从3天前开始我一直在网上搜索,但是我似乎没有得到我所寻找的解决方案。

我正在从事在线考试项目。我正在尝试将laravel 5.4与ajax结合使用,以从服务器检索数据以显示下一个问题,以便单击“ next”按钮时不会重新加载页面,并且我可以通过一些教程来实现。

现在,我想要的是当单击答案并移至下一页时,我希望在单击上一个按钮以查看先前回答的问题时仍保持该答案不变。

我已经阅读并尝试用我的代码对其进行操作,但是由于我不擅长Ajax,因此我没有得到它。

How to call ajax again when user click back button to go back last webpage?

这是我的控制器部分:

       {
       $id = preg_replace("#[^0-9a-z/\-]#", "", $id);

      if($unique_exam = Exam::where('id', $id)->get())
        {
        $users = User::where('id',   Auth::guard('student')->user()->owner_id)->get();
        $exam_questions = Question::where('exam_id', $id)->get();
        $question_points = Question::where('exam_id', $id)->sum('point');

        return view('user.student.examgo', compact('unique_exam', 'users', 'exam_questions', 'question_points'));
        }
    }

这是我的ajax代码:

    $(window).on('hashchange', function() {

    if (window.location.hash) {

        var page = window.location.hash.replace('#', '');

        if (page == Number.NaN || page <= 0) {

            return false;

        }else{

            getData(page);

        }

    }

});


$(document).ready(function()

{

    $(document).on('click', '.pagination a',function(event)

    {

        $('li').removeClass('active');

        $(this).parent('li').addClass('active');

        event.preventDefault();


        var myurl = $(this).attr('href');

        var page=$(this).attr('href').split('page=')[1];


        getData(page);

    });

});


function getData(page){

        $.ajax(

        {

            url: '?page=' + page,

            type: "get",

            datatype: "html",

            async: true,

            cache: false,


        })

        .done(function(data)

        {

            $("#item-lists").empty().html(data);

            location.hash = page;

        })

        .fail(function(jqXHR, ajaxOptions, thrownError)

        {

              alert('No response from server');

        });

}

这是我的查看页面代码:

  @foreach( $questions as $question )

      <div class="carousel-inner"  style="height:100%">

         <div class="item active">

        <h4>{{ $question->question }}</h4>
          <p><input type="radio" name="1"> {{ $question->option1 }}</p>
          <p><input type="radio" name="1"> {{ $question->option2 }}</p>
          <p><input type="radio" name="1"> {{ $question->option3 }}</p>
              <p><input type="radio" name="1"> {{ $question->option4 }}</p>


    </div>
  </div>
   @endforeach

{!! $questions->render() !!}

请我真正想要的是,当单击上一个按钮时查看以前回答的问题时,我希望单选按钮保持单击状态。 一个解释性的答案将不胜感激。谢谢您。

0 个答案:

没有答案