javascript ajax按鈕在http://127.0.0.1上運作正常，但在http://localhost:8888/xxx/public上出現錯誤並無法執行

Question

我正在使用laravel 10 php 8.10進行工作，這裡的javascript ajax按鈕在php artisan serve http://127.0.0.1上工作正常，但在**MAMP PRO**（localhost:8888）上出現錯誤（處理請求時發生錯誤），並且在url http://localhost:8888/xxx/public上不起作用。以下是html和js的片段：

需要幫助解決這個問題。

**HTML**

@if($row->soc_extra==1)
                        <a class="updatesocialmediaStatus" id="socialmedia-{{ $row->id }}" socialmedia_id="{{ $row->id }}" href="javascript:void(0)"><i class="fas fa-toggle-on" soc-extra="Active"></i></a>
                    @else
                        <a class="updatesocialmediaStatus" id="page-{{ $row->id }}" socialmedia_id="{{ $row->id }}" style='color:#007bff;' style="color:gray" href="javascript:void(0)"><i class="fas fa-toggle-off" soc-extra="Inactive"></i></a>
                    @endif
                      &nbsp;&nbsp;
                      <a style='color:#007bff;' href="{{ url('admin/social-media/edit/'.$row->id) }}"><i class="fas fa-edit"></i></a>
                        &nbsp;&nbsp;
                        <a style='color:#007bff;' class="confirmDelete" name="socialmedia" title="Delete socialmedia" href="javascript:void(0)" record="socialmedia" recordid="{{ $row->id }}" <?php /*href="{{ url('admin/delete-socialmedia/'.$row['id']) }}"*/ ?>><i class="fas fa-trash"></i></a>
                        &nbsp;&nbsp;
@endforeach


**JS**

<script>
    $(document).on("click", ".updatesocialmediaStatus", function(){
        var soc_extra = $(this).children("i").attr("soc-extra");
        var social_media_id = $(this).attr("socialmedia_id");

        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            type: 'post',
            url: '/admin/update-socialmedia-status',
            data: {soc_extra: soc_extra, social_media_id: social_media_id},
            success:function(resp){
                if (resp['status'] == 0) {
                    $("#socialmedia-" + social_media_id).html("<i class='fas fa-toggle-off' style='color:grey' soc-extra='Inactive'></i>");
                } else if (resp['status'] == 1) {
                    $("#socialmedia-" + social_media_id).html("<i class='fas fa-toggle-on' style='color:#007bff' soc-extra='Active'></i>");
                }
             },
             error:function(xhr, textStatus, errorThrown){
                 console.log(xhr.responseText);
                 alert('在处理请求时出错。');
             }
         });
    });
    </script>

需要幫助解決這個問題。

Answer 1

您的MAMP Apache連接埠是否確實設定為8888埠而不是80埠？

我已經做過幾次（測試使用8888端口，部署使用80端口），並且將Ajax調用保留在目標為localhost而不是localhost:8888或者反過來。

或者，您可能需要在Ajax呼叫中明確指定8888端口，例如：

url: 'http://localhost:8888/admin/update-socialmedia-status'

#希望這有幫助？