未捕获的类型错误：使用 laravel / ajax 非法调用

Question

我尝试在切换复选框时将数据库中的 paye 列更改为 1 并更改 date_paiement 列。

所以我使用以下代码：

我有以下模态形式：

<div class="modal fade bd-example-modal-lg" id="formModal" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal title</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                <form id="date_payement" method="post" action="projets"   enctype="multipart/form-data">
                    {{ csrf_field() }}
                    <input type="hidden" id="id_hidden" name="id_projet" />
                    <div class="form-group">
                        <label for="casting_date_naissancee">Date de payement</label>
                        <div class="input-group date">
                            <input type="text" class="form-control" id="date_paiement" name="date_paiement">
                                <span class="input-group-text input-group-append input-group-addon" id="spanEstPaymentDate">
                                    <i class="simple-icon-calendar"></i>
                                </span> 
                            </div>
                       </div>
                       <div class="form-group" align="center">
                           <input type="hidden" name="action" id="action" />
                           <input type="hidden" name="hidden_id" id="hidden_id" />
                           <input type="submit" name="action_button" id="action_button" class="btn btn-warning" value="Enregistrer" />
                        </div>
                        <div class=" col-md-6">
                            <span id="form_result"></span>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

还有以下脚本：

$(document).ready(function() {
    $(document).on('change', '.selectRow1', function() {
        $('.modal-title').text("Saisir la date de paiement");
        $('#action_button').val("Enregistrer");
        $('#action').val("Enregistrer");
        $('#formModal').modal('show');
        var paye = $(this).prop('checked') == true ? 1 : 0;
        console.log(paye);
        var id = $(this).attr('id');
        console.log(id);
        $('#date_payement').on('submit', function(event) {
            event.preventDefault();
            if ($('#action').val() == 'Enregistrer') {
                $.ajax({
                    type: "post",
                    dataType: "json",
                    url: 'projets/paiement',
                    data: {
                        'paye': paye,
                        'id_projet': id,
                        'date_paiement': new FormData(this)
                    },
                    success: function(data) {
                        console.log(data)
                    }
                });
            }
        });
    });
});

这是控制器：

public function paiement(Request $request) {
    $request->validate(['paye'=>'required','id_projet'=>'required','date_paiement'=>'required']);
    $projet = Projet::find($request->id_projet);
    if($projet){
        $projet->paye = $request->paye;
        $projet->date_paiement = $request->date_paiement;
        $projet->save();
        return response()->json(['success'=>'Status change successfully.']);
    }
    return response()->json(['failed'=>'Status change failed.'],422);
}

所以我希望当我切换选定的框时，如果它是 0 或 1，我应该得到 paye，并显示模式形式来写入 date_paiement 并将两列 paye 和 date_paiement 更改到数据库中。

但是使用这段代码我得到以下错误：

Uncaught TypeError: Illegal invocation

如果你有任何想法，请帮忙

Answer 1

您错误地使用了 FormData，您必须将其作为数据传递，而不是数据的一部分。
此外，您必须指定processData: false, 以防止$.ajax 尝试将formdata 转换为字符串，并指定contentType: false, 以防止$.ajax 尝试设置错误的内容类型。

$('#date_payement').on('submit', function(event) {
  event.preventDefault();
  if ($('#action').val() == 'Enregistrer') {
    var data = new FormData(this);
    data.append('paye', paye);
    data.append('id_projet', id);
    $.ajax({
      type: "post",
      dataType: "json",
      url: 'projets/paiement',
      data: data,
      processData: false,
      contentType: false,
      success: function(data) {
        console.log(data)
      }
    });
  }
});