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'

希望这有所帮助？