如何使用 ajax 從視圖發送數據到 controller laravel？

Question

我在將數據從視圖發送到 controller laravel 版本 7 時遇到問題，我從表單發送數據，並且我在 javascript 中有數組數據

我的 html 代碼是：

我在將數據從視圖發送到 controller laravel 版本 7 時遇到問題，我從表單發送數據，並且我在 javascript 中有數組數據

<ul name="ali" id="singleFieldTags" class="tagit ui-widget ui-widget-content ui-corner-all">
    <li class="tagit-choice ui-widget-content ui-state-default ui-corner-all tagit-choice-editable">
        <span class="tagit-label">reza</span>
        <a class="tagit-close">
            <span class="text-icon">×</span>
            <span class="ui-icon ui-icon-close"></span>
        </a>
    </li>
    <li class="tagit-choice ui-widget-content ui-state-default ui-corner-all tagit-choice-editable">
        <span class="tagit-label">ali</span>
        <a class="tagit-close">
            <span class="text-icon">×</span>
            <span class="ui-icon ui-icon-close"></span>
        </a>
    </li>
    <li class="tagit-new">
        <input type="text" class="ui-widget-content ui-autocomplete-input" autocomplete="off">
    </li>
</ul>


     <form id="form" method="post"  action="/save_new" enctype="multipart/form-data">
        @csrf

        <div class="form-group">
            <label for="title">title</label>
            <input type="text"  name="title"  class="form-control">
        </div>

        <div class="form-group">
            <label for="choose-file" class="custom-file-upload" id="choose-file-label">
                Click Here to upload image

            </label>
            <br/>
            <br/>
            <label >no image selected !</label>
            <input name="uploadDocument" type="file" id="choose-file"
                   accept=".jpg,.jpeg,.pdf,doc,docx,application/msword,.png" style="display: none;" />
        </div>

        <div class="form-group">
            <label for="title">Description</label>
            <textarea  name="meta_description"  class="form-control"></textarea>
        </div>

        <div class="form-group">
            <label >keywords</label>
            <input name="tags" id="mySingleField" value="reza,ali" type="hidden" disabled="true">
            <ul name="ali" id="singleFieldTags"></ul>
        </div>

        <button  type="submit"  onclick="myF()" class="btn btn-success pull-left"> save</button>



    </form>

在我的 javascript

 <Script type="text/javascript">
  function myF() {
        var data2 = [];
        var inputs = $(".tagit-choice");

        for (var i = 0; i < inputs.length; i++) {
            data2[i] = $(inputs[i]).text();
        }

           $.ajax({
            url:'/save_new',
            type: 'POST',
            dataType:'json',
            // data: JSON.stringify(data2),
            data: JSON.stringify(data2),
            contentType: 'application/json; charset=utf-8',
                    success: function( data ){
                        console.log('ok');
                        console.log(data);
                    },
                    error: function (xhr, b, c) {
                        console.log('error');
                        console.log("xhr=" + xhr + " b=" + b + " c=" + c);
                    }
        });
    }

當我從 ajax 發送數據時，控制台出現錯誤

error reza:263:37
xhr=[object Object] b=error c=

但在請求 JSON 我看到

0   "reza×"
1   "ali×"

請幫助我謝謝

我的 controller 是：

    public function save_new(Request $request){
//        dd($request->all());

dd($request->getContent());

}

我的路線是：

Route::POST('/save_new','Backend\AdminPostController@save_new')->name('save_new');

編輯：

我的問題比你們都解決了

            var fd = new FormData();
        var file = $("#form input[name=uploadDocument]")[0].files;
        fd.append('file', file[0]);
        fd.append('title', $("#form input[name=title]").val());
        fd.append('description', $("#form textarea[name=meta_description]").val());
        fd.append('tags', JSON.stringify(data2));

        $.ajax({
            type: 'post',
            url: '/ok2',
            contentType: false,
            processData: false,
            data: fd,
            success: function(response) {
                
            },
            error: function  (response) {},
        });

Answer 1

我不確定你的工作，但這是通過 jquery 發送數據的基本方法之一確保將 ajaxSetup 放入 document.ready function

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

$('#form').on('submit',function(){
    $.ajax({
    type:'post',
    url:$("#form").attr('action'),
    data:$("#form").serializeArray(),
    success:function(data){
        //response
        console.log(data);
      }
  });
});