在 XMLHttpRequest.ajax.onload 的 JSON.parse (<anonymous>) 的位置 0 处的 JSON 中获取 Unexpected token <

Question

我想使用 ajax 将其传递给控制器​​，但出现此错误。 responseText 的控制台日志并获取 html 代码。想弄清楚这是什么意思？

Javascript：

    // gathering the form data
                var ajaxData = new FormData( form );

                if( droppedFiles )
                {
                    Array.prototype.forEach.call( droppedFiles, function( file )
                    {
                        ajaxData.append( input.getAttribute( 'name' ), file );
                    });
                }
                
                console.log(ajaxData);
                // ajax request
                var ajax = new XMLHttpRequest();
                ajax.open( form.getAttribute( 'method' ), form.getAttribute( 'action' ), true );
                ajax.setRequestHeader("X-CSRF-TOKEN", $('meta[name="csrf-token"]').attr('content'));
                ajax.onload = function()
                {
                    form.classList.remove( 'is-uploading' );
                    if( ajax.status >= 200 && ajax.status < 400 )
                    {
                        var data = JSON.parse( ajax.responseText );
                        form.classList.add( data.success == true ? 'is-success' : 'is-error' );
                        if( !data.success ) errorMsg.textContent = data.error;
                    }
                    else alert( 'Error. Please, contact the webmaster!' );
                };

                ajax.onerror = function()
                {
                    form.classList.remove( 'is-uploading' );
                    alert( 'Error. Please, try again!' );
                };

                ajax.send( ajaxData );

索引

<form method="post" action="/contacts/{{$groupContactDetails->id}}/importContacts" enctype="multipart/form-data" novalidate class="box">
        <div class="box__input">
        <input type="file" name="files[]" id="file" class="box__file d-none" data-multiple-caption="{count} files selected" accept="application/vnd.ms-excel, application/vnd.openxmlformats-officedocument.spreadsheetml.sheet" />
        <label for="file"><strong>Choose a file</strong><span class="box__dragndrop"> or drag it here</span>.</label>
        <button type="submit" class="box__button btn btn-info">Upload</button>
        </div>
        </form>

Answer 1

您收到来自服务器的格式错误或非 json 响应。您需要检查响应数据以确保您收到的是 JSON 格式的数据。

一种方法可以做到这一点：

    ajax.onload = function()
                {
                    form.classList.remove( 'is-uploading' );
                    if( ajax.status >= 200 && ajax.status < 400 )
                    {   
                         try {
                               var data = JSON.parse( ajax.responseText );
                              form.classList.add( data.success == true ? 'is-success' : 'is-error' );
                          } catch (e) {
                             console.log( ajax.responseText);
                            //data isn't json type, do error handling here
                         }
                        if( !data.success ) errorMsg.textContent = data.error;
                    }
                    else alert( 'Error. Please, contact the webmaster!' );
                };