在XMLHttpRequest.ajax.onload

问题描述

我想使用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>

解决方法

您收到来自服务器的格式错误或非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!' );
                };