尝试在不刷新页面的情况下提交我的 laravel 表单答案

【问题标题】：Trying to submit my laravel form without the page refreshing尝试在不刷新页面的情况下提交我的 laravel 表单
【发布时间】：2019-04-19 21:32:52
【问题描述】：

我正在尝试提交我的表单而无需刷新页面。我没有成功我一直在控制台日志中收到错误消息，服务器说页面错误。我不知道我做错了什么。有人能帮助我吗？我正在使用laravel，ajax。这是我的代码。提前致谢

   //Ajax

$('.formform' ).submit(
    function( e ) {
        $.ajax( {
            url: '{{ url('profileupdate') }}',
            type: 'POST',
            data: new FormData( this ),
            processData: false,
            contentType: false,
            success: function(result){
                console.log(result);
            }
        } );
        e.preventDefault();
    } 
);


             //The form
    {!!Form::open(['url'=>['profileupdate',Auth::user()->id],'method'=>'POST','files'=>true,'class'=>'formform formform2','enctype' => 'multipart/form-data']) !!}

                    <div style="position:relative; left:.5em; font-size:1.3em;">
ADD YOUR VIDEO!<br>

                        </div>
                        <br>
                    {{Form::file('video',array('id'=>'file','class'=>'thefile'))}}

                    <label for="file"  class="btn btn-default" style="background:none;">Choose a file</label> <span class="tt"></span>








                    {{Form::text('Company','',array('placeholder'=>'Company Name','class'=>'form-control'))}}

{{Form::text('city','',array('placeholder'=>'City and State','class'=>'form-control', 'size'=>'35px','height'=>'15px','id'=>'location-input','autocomplete'=>'off'))}}

{{Form::text('zip_code','',array('placeholder'=>'Zip Code','class'=>'form-control'))}}

 {{Form::text('Phone_Number','',array('placeholder'=>'Phone Number','class'=>'form-control'))}}



{{Form::submit('Submit', array('class'=>'btn btn-warning form-control','id'=>'submitty profile1_submit','style'=>'border:none; margin-top:3%; margin-bottom:5%;', 'data-toggle'=>"modal",  'data-target'=>"#profile_modal"))}}
{!!Form::close() !!}

   //Here is the route

   Route::post('profileupdate/{id}','Profile1Controller@update');

【问题讨论】：

您缺少一些代码。你能分别把每个部分拼出来吗？
@ThomasEdwards 我刚刚编辑了我忘记标记某些内容的代码。我还缺少什么吗？
您缺少打开表单的位置。请提供更多关于这些事物如何相互关联的背景信息。
@ThomasEdwards 我刚刚注意到...我刚刚修复了它
我无法从这里判断，但new FormData( this ) 似乎是this 可能是AJAX 对象，或者可能是函数。我不确定那里发送了什么。当您发出请求时，您能看到浏览器中正在发送哪些数据吗？

标签： ajax laravel

【解决方案1】：

你错过了参数id'profileupdate/{id}' 改变这个：

url: '{{ url('profileupdate') }}',

与

 url: {!! route('profileupdate', ['id' => Auth::user()->id  ]) !!}

不要忘记在数据中添加 csrf 的令牌（javascript 部分）

    "_token": $('#token').val()

【讨论】：

当我把 {!! route('profileupdate', ['id' => Auth::user()->id ]) !!} 我收到一条错误消息。

【解决方案2】：

更新需求和令牌（如果已发布）。我也认为您调用路线的方式是错误的。我在这里对我的代码所做的就是调用一个以 id 作为参数的函数并使用按钮调用它：

<button type="button" onclick = "submitThisForm({{Auth::user()->id}})"> Submit</button>

然后脚本函数包含 ajax 帖子。我使用 replace 将 id 添加到路由中。

 function submitThisForm(id){
    url= '{{route('upload-employee-request',[":emp"])}}';
    url= url.replace(':emp', id);

}

最后

function submitThisForm(id){
        url= '{{route('upload-employee-request',[":emp"])}}';
        url= url.replace(':emp', id);

        $.ajax( {
            url: url,
            type: 'POST',
            data: new FormData( this ),
            processData: false,
            contentType: false,
            success: function(result){
                console.log(result);
            }
        } );
        e.preventDefault();


    }

希望对你有帮助！

【讨论】：

谢谢。我会试一试，并会更新你。

【解决方案3】：

感谢 Abderrahim Soubai Elidrissi 和 Dearwolves（谢谢大家），我得到了它的工作

这对我有用

 $.ajaxSetup({

        headers: {

            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')

        }

    });


$('.formform' ).submit(
    function( e ) {
        $.ajax( {
            url: '{!! url('profileupdate', ['id' => Auth::user()->id  ]) !!}',
            type: 'POST',
            data: new FormData( this ),
            processData: false,
            contentType: false,
            success: function(result){
                alert('form submitted');
            }
        } );
        e.preventDefault();
    } 
);

【讨论】：