在 Laravel 8 的 js 文件中分离 Javascript Ajax 代码不起作用

Posted 2023-03-14

【中文标题】在 Laravel 8 的 js 文件中分离 Javascript Ajax 代码不起作用

【英文标题】：Separating Javascript Ajax codes in a js file in Laravel 8 does not work

【发布时间】：2021-02-15 08:46:41

【问题描述】：

我是 ajax 新手，遇到了问题。我尽我所能解释我的问题。

我正在使用 Laravel 8 开发一个项目。 用户可以选择照片。 CropperJS 用于此目的。 一切正常，只要我将 javascript 和 Ajax 代码放在单独的文件中，我就会收到一条错误消息（此路由不支持 POST 方法。支持的方法：GET、HEAD、PATCH。） 如何让 ajax 调用在单独的文件中工作？

路线

Route::get('/image/create', 'ProfileImage\CreateController@create')->name('image.create');
Route::post('/image/store', 'ProfileImage\StoreController@store')->name('image.store');

控制器

public function create()
    
        return view('pages.image.create');
    


public function store(StoreProfileImageRequest $request, ProfileImage $profileImage)
    
        $profileId = auth()->user()->profile->id;
        $validated = $request->validated();
        $image = $validated['image_name'];

        $this->profileImageRepositoryInterface->storeImage($profileImage, $profileId, $image, $validated);


        session()->flash('success', 'Uw afbeelding is succesvol opgeslagen.');

        return response()->json(
            [
                'status' => 'success',
                'message' => 'my message.',
                'url' => route('profile.index')
            ]);   
    

表格

<form class="text-left"
                              data-form-output="form-output-global"
                              data-form-type="contact"
                              method="post"
                              enctype="multipart/form-data"
                        >
                            @csrf

                            <div class="member-block-body">
                                <label for="upload_image">
                                    
                                </label>
                                <input type="file" name="image_name" class="image" id="upload_image">
                            </div>

                            <span class="invalid-feedback ct_invalid_feedback" role="alert">
                                <strong id="ajax_image_error"></strong>
                            </span>
                        </form>

模态

<div class="modal fade" id="modal" tabindex="-1" role="dialog" aria-labelledby="modalImageCropper" aria-hidden="true">
    <div class="modal-dialog ct_modal_lg modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">
                    @lang('Afbeelding aanpassen voordat u deze uploadt.')
                </h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">
                        x
                    </span>
                </button>
            </div>
            <div class="modal-body">
                <div class="ct_img_container">
                    <div class="row">
                        <div class="col-md-8">
                            <img src="" id="sample_image" >
                        </div>
                        <div class="col-md-4">
                            <div class="ct_cropper_image_preview"></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" id="crop-image" class="btn btn-primary">
                    @lang('Opslaan')
                </button>
                <button type="button" class="btn btn-secondary" data-dismiss="modal">
                    @lang('Annuleren')
                </button>
            </div>
        </div>
    </div>
</div>

javascript custom_function.js

$(document).ready(function () 
    let $modal = $('#modal');
    let image = document.getElementById('sample_image');
    let cropper;

    $('#upload_image').change(function (event) 
        let files = event.target.files;
        let done = function (url) 
            image.src = url;
            $modal.modal('show');
        ;

        if (files && files.length > 0) 
            reader = new FileReader();
            reader.onload = function (event) 
                done(reader.result);
            ;
            reader.readAsDataURL(files[0]);
        
    );

    $modal.on('shown.bs.modal', function () 
        cropper = new Cropper(image, 
            aspectRatio: 1,
            viewMode: 3,
            preview: '.ct_cropper_image_preview'
        );
    ).on('hidden.bs.modal', function () 
        cropper.destroy();
        cropper = null;
    );

    $('#crop-image').click(function () 

        $('#ajax_image_error').text('');

        canvas = cropper.getCroppedCanvas(
            width: 600,
            height: 600
        );

        canvas.toBlob(function (blob) 
            url = URL.createObjectURL(blob);
            let reader = new FileReader();
            reader.readAsDataURL(blob);
            reader.onloadend = function () 
                let base64data = reader.result;
                $.ajax(
                    url: ' route("image.store") ',
                    method: 'POST',
                    data: 
                        '_token': ' csrf_token() ',
                        image_name: base64data
                    ,
                    success: function (data) 
                        if (data.status === 'success') 
                            window.location = data.url;
                            $modal.modal('hide');
                            $("#image-preview").attr("src", base64data);
                        
                    ,
                    error: function (data) 
                        if (data.status === 422) 
                            let response = $.parseJSON(data.responseText);
                            $.each(response.errors, function (key, val) 
                                $("#" + "ajax_" + key + "_error").text(val[0]);
                            );
                        
                    
                );
            ;
        );
    );
);

【问题讨论】：

url: ' route("image.store") ', 不会在单独的文件中工作。

好的，你知道我该如何解决这个问题吗？

可能duplicate。你的问题已经在这里回答了。

你好，把这行url: ' route("image.store") ',改成url: "/image/store",，希望这也能解决你的问题

【参考方案1】：

感谢您的提示。 刚刚解决了问题。

$.ajax(
                    url: '/image/store',
                    // url: ' route("image.store") ',
                    method: 'POST',
                    headers: 
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    ,
                    data: 
                        // '_token': ' csrf_token() ',
                        image_name: base64data
                    ,
                    success: function (data) 
                        if (data.status === 'success') 
                            window.location = data.url;
                            $modal.modal('hide');
                            $("#image-preview").attr("src", base64data);
                        
                    ,
                    error: function (data) 
                        if (data.status === 422) 
                            let response = $.parseJSON(data.responseText);
                            $.each(response.errors, function (key, val) 
                                $("#" + "ajax_" + key + "_error").text(val[0]);
                            );
                        
                    
                );