【问题标题】:Refresh/Reload page after Ajax Sucess - LaravelAjax 成功后刷新/重新加载页面 - Laravel
【发布时间】:2018-05-09 01:34:06
【问题描述】:

在我的 laravel 项目中,我想在 ajax 成功后刷新我的页面,但我的页面会在成功后刷新。我尝试在控制器中使用 laravel 重定向进行刷新,但没有成功,我也尝试在 ajax 中刷新,但什么也没发生?我该怎么做?我该怎么做?

控制器

if(request()->ajax()) {

            //do something             
            return ['success' => 'successfully done'];
            return redirect('admin/all')->with('status','Successfully done!');

JS

<script type="text/javascript">

        $('#master').on('click', function(e) {
         if($(this).is(':checked',true))  
         {
            $(".sub_chk").prop('checked', true);  
         } else {  
            $(".sub_chk").prop('checked',false);  
         }  
        });

        $('.approve_all').on('click', function(e) {

            var allVals = [];  
            $(".sub_chk:checked").each(function() {  
                allVals.push($(this).attr('data-id'));
            });  

            if(allVals.length <=0)  
            {  
                alert("Please select row.");  
            } 

            else {  



                var check = confirm("Are you sure you want to delete this row?");  
                if(check == true){  

                    var join_selected_values = allVals.join(","); 

                    $.ajax({
                        url: $(this).data('url'),
                        type: 'GET',
                        headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                        data: 'ids='+join_selected_values,

                        success: function (data) {
                            if (data['success']) 
                            {

                                $("#" + data['tr']).slideUp("slow");
                                alert(data['success']);
                                location="/admin/all";


                            } 
                            else if (data['error']) 
                            {
                                alert(data['error']);
                            } 
                            else 
                            {
                                //alert('Whoops Something went wrong!!');
                            }
                        },
                        error: function (data) {
                            alert(data.responseText);
                        }
                    });
                                window.location.href="/your/url" ;

                  $.each(allVals, function( index, value ) 
                  {
                      $('table tr').filter("[data-row-id='" + value + "']").remove();
                  });
                }  

            }  


        $('[data-toggle=confirmation]').confirmation({
            rootSelector: '[data-toggle=confirmation]',
            onConfirm: function (event, element) {
                element.trigger('confirm');
            }
        });

        $(document).on('confirm', function (e) {
            var ele = e.target;
            e.preventDefault();

            $.ajax({
                url: ele.href,
                type: 'GET',
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                success: function (data) {
                    if (data['success']) 
                    {

                        $("#" + data['tr']).slideUp("slow");
                        alert(data['success']);
                        location="/admin/all";

                    } 
                    else if (data['error']) {
                        alert(data['error']);
                    } 
                    else 
                    {
                        alert('Whoops Something went wrong!!');
                    }
                },
                error: function (data) {
                    alert(data.responseText);
                }
            });

            return false;
        });



    });

</script>

【问题讨论】:

    标签: php ajax laravel


    【解决方案1】:

    对于那些仍在寻找解决方案的人,这是解决此问题的方法。

    首先,只需在控制器中返回一条简单的消息

    class SettingsController extends Controller
    {
    
    public function __construct()
        {
    
        }
    
    public function destroy($id)
        {
    
            $user = User::findOrFail($id);
            $user->delete();
            return 'Record successfully deleted';
        }
    }
    

    其次,将此代码添加到您的 javascript 文件中以刷新页面

    setTimeout(function () { document.location.reload(true); }, 5000);

    <script type="text/javascript">
    
            function deluser(id)
             {
                event.preventDefault();
    
                $.ajax({
                 headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
                 url:"{{ route('settings.destroy','')}}/"+parseInt(id),
                 method: 'delete',
                 data:{
                     id: id,
                     },
    success: function(data)
                {
                    $('#validation-message').append('<div class="alert dark alert-success alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span> </button><b>'+data+'</b></div>');
                    setTimeout(function () { document.location.reload(true); }, 5000);
    
                 },
                error: function(xhr)
                {
                    $('#validation-message').html('');
                    $.each(xhr.responseJSON.errors, function(key,value) {
                        $('#validation-message').append('<div class="alert dark alert-danger alert-dismissible" role="alert"><button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span> </button><b>'+value+'</b></div>');
                        });
                }
                });
             }
    
          </script>
    

    终于在你的 HTML 中

    <!DOCTYPE html>
    <html>
    <body>
    <div class="col-xl-12 form-group" id="validation-message"></div>
    <button onclick="deluser('ID_NUMBER_GOES_HERE')">Click me</button>
    </body>
    </html>
    

    【讨论】:

      【解决方案2】:

      您需要使用javascript 来刷新页面。你可以使用location.reload()

       if ( data['success'] ) 
       {
           alert(data['success']);
           location.reload();
       } 
      

      【讨论】:

      • 什么都没有发生...我必须手动刷新页面才能看到更改
      • 您能看到警报吗? data['success']的值是多少
      • 查看我在控制器中的更新...我成功successfully deleted的值显示了ajax成功的时间
      【解决方案3】:

      你可以试试这样的

       if (data['success']) 
       {
       $("#" + data['tr']).slideUp("slow");
       location.reload();
       } 
      

      【讨论】:

      • 什么都没有发生...我必须手动刷新页面才能看到更改
      • 检查控制台是否有一些javascript错误
      • 没有错误,因为我的警报在成功时弹出。看看我的更新
      • 试试这个 window.location.reload(true);
      猜你喜欢
      • 1970-01-01
      • 2011-12-14
      • 2021-11-19
      • 2016-10-09
      • 2017-10-06
      • 1970-01-01
      • 2019-11-20
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多