使用 ajax 和 laravel 提交表單

Question

我試圖在不刷新頁面的情況下使用 Ajax 將產品添加到數據庫並將數據發送到數據庫，但出現錯誤Uncaught TypeError: Failed to construct 'FormData': parameter 1 is not of type 'HTMLFormElement'. 在控制台上。 如何在不刷新頁面的情況下提交表單？

刀

 <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> 

阿賈克斯

<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::post('seller/product', 'ProductController@store')->name('product.store');

Answer 1

我認為你把事情復雜化了。

首先，您的路線不需要任何參數。

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

所以你不需要傳遞它。

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

然后，由於您使用的是 jquery，因此可以處理對表單提交方法的 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
    });
})

在您的表單中，您不需要按鈕上的 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> 

Answer 2

試試這個。

<form id="myForm" method="POST" role="form" enctype="multipart/form-data">

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


}
</script>