javascript - 用ajax和laravel提交表单(Submitting a form with ajax and laravel)

Question

I'm trying to add product to the database with Ajax without refreshing the page and send the data to the database but I get an error Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.

(我正在尝试使用Ajax将产品添加到数据库而不刷新页面并将数据发送到数据库，但是出现错误Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'.)

on console.

(在控制台上。)

How can I submit the form without refreshing the page?

(如何在不刷新页面的情况下提交表单？)

Blade

(刀)

 <form method="POST" role="form" enctype="multipart/form-data">
        {{csrf_field()}}

           <label for="pro_name">Name</label>
           <input type="text" class="form-control" name="pro_name" id="pro_name" placeholder="Enter product name">

           <label  for="category_id">Choose Category</label>
           <select name="category_name" id="category_name">
           <option value=""> --Select Category -- </option>
           @foreach ($categoryname_array as
             $data)
             <option value="{{ $data->name }}"  >{{$data->name}}</option>
             @endforeach
           </select>

           <label for="photos">Choose 5 Images</label>
           <input  "multiple="multiple" name="photos[]" type="file">

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

    </form> 

Ajax

(阿贾克斯)

<script>
function submitThisForm(id){
    let url = "{{ route('product.store', ['id' => ':id']) }}".replace(':id', id);
    $.ajax( {
        url: url,
        type: 'POST',
        data: new FormData( this ),
        processData: false,
        contentType: false,
        success: function(result){
            console.log(result);
        }
    } );
    e.preventDefault();


}
</script>

Route

(路线)

 Route::post('seller/product', 'ProductController@store')->name('product.store');

  ask by joh translate from so

Answer 1

I think you're overcomplicating things.

(我认为您太过复杂了。)

First, your route does not expect any parameters.

(首先，您的路线不需要任何参数。)

Route::post('seller/product', 'ProductController@store')->name('product.store');

So you don't need to pass it on.

(因此，您无需继续进行下去。)

{{ route('product.store', ['id' => ':id']) }} // remove , ['id' => ':id']

Then, since you are using jquery, you can handle the ajax call on the submit method of the form.

(然后，由于使用的是jquery，因此可以处理表单的Submit方法上的ajax调用。)

$('form').on('submit', function (e) {
    e.preventDefault(); // prevent the form submit
    var url = '{{ route('product.store' }}';
    // create the FormData object from the form context (this),
    // that will be present, since it is a form event
    var formData = new FormData(this); 
    // build the ajax call
    $.ajax({
        url: url,
        type: 'POST',
        data: formData,
        success: function (response) {
            // handle success response
            console.log(response.data);
        },
        error: function (response) {
            // handle error response
            console.log(response.data);
        },
        contentType: false,
        processData: false
    });
})

In your form you will not need the onclick event on the button..

(在您的表单中，您不需要按钮上的onclick事件。)

<form method="POST" role="form" enctype="multipart/form-data">
    {{csrf_field()}}

    <label for="pro_name">Name</label>
    <input type="text" class="form-control" name="pro_name" id="pro_name" placeholder="Enter product name">

    <label  for="category_id">Choose Category</label>
    <select name="category_name" id="category_name">
    <option value=""> --Select Category -- </option>
    @foreach ($categoryname_array as $data)
        <option value="{{ $data->name }}"  >{{$data->name}}</option>
    @endforeach
    </select>

    <label for="photos">Choose 5 Images</label>
    <input  "multiple="multiple" name="photos[]" type="file">

    <button type="button" class="btn btn-primary">Submit</button>

</form>