Laravel发布表格没有刷新问题

时间:2019-12-22 22:32:37

标签: php ajax laravel

我在laravel中编写了无需表单刷新即可提交表单的代码,这是我的代码:

我的观点:

        <form action="{{ url('/admin/products/new') }}" method="post">
        {{ csrf_field() }}


        <div class="form-group row">
            <label for="example-text-input" class="col-sm-2 col-form-label">pid</label>
            <div class="col-sm-10">
                <input type="text" id="pid" name="pid" class="form-control" placeholder="مثال : Oil distillation machine" id="name">
            </div>
        </div>

        <div class="form-group row">
            <label for="example-text-input" class="col-sm-2 col-form-label">name</label>
            <div class="col-sm-10">
                <input type="text" id="name" name="name" class="form-control" placeholder="مثال : Oil distillation machine" id="name">
            </div>
        </div>


        <div class="form-group row">
            <label for="example-text-input" class="col-sm-2 col-form-label">value</label>
            <div class="col-sm-10">
                <input type="text" id="value" name="value" class="form-control" placeholder="مثال : Oil distillation machine" id="name">
            </div>
        </div>


        <div class="form-group">
            <button type="submit" id="submit" class="btn btn-primary btn-lg text-center waves-effect waves-light">ارسال</button>                                    </div>
</div>

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery('#submit').click(function(e){
            e.preventDefault();
            jQuery.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content')
                }
            });
            jQuery.ajax({
                url: "{{ url('/admin/products/new') }}",
                method: 'post',
                data: {
                    name: jQuery('#pid').val(),
                    email: jQuery('#name').val(),
                    subject: jQuery('#value').val(),
                },
                success: function(data){
                    jQuery.each(data.errors, function(key, value){
                        jQuery('.alert-danger').show();
                        jQuery('.alert-danger').append('<p>'+value+'</p>');
                    });
                }

            });
        });
    });
</script>


</form>

我的控制器:

    public function add_product_post(Request $request)
    {
        $pid = $request->pid;
        $name = $request->name;
        $value = $request->value;


DB::table('product_features')->insert([

            'pid' => $pid,
            'name' => $name,
            'value' => $value
        ]);

        return ['message' => 'success'];
    }

我的问题是,当我单击“提交”按钮时,我只在空白页{“ message”:“ success”}}中得到回复

我要提交表单而不刷新任何页面。 我的代码有什么问题? 谢谢

2 个答案:

答案 0 :(得分:0)

在控制器操作中,您只需返回一个数组,请将其更改为响应:

    public function add_product_post(Request $request)
    {
        $pid = $request->pid;
        $name = $request->name;
        $value = $request->value;


        DB::table('product_features')->insert([

            'pid' => $pid,
            'name' => $name,
            'value' => $value
        ]);

        return response()->json(['message' => 'success']);
    }

另一件事是jquery ajax,您需要显示成功消息而不是错误消息。

答案 1 :(得分:0)

我不确定,但是尝试将按钮类型更改为“按钮”

<button type="button" id="submit" class="btn btn-primary btn-lg text-center waves-effect waves-light">ارسال</button>