使用 AJAX 的 Laravel POST 方法：“xyz”字段为必填项-解网

问：

所以我试图向阿贾克斯提交Laravel表格，这是我的表格

<div class="modal-body">
                    <form id="addCrewMedical" method="POST">
                        <div class="input-group mb-4">
                            <label for="colFormLabel" class="col-sm-2 col-form-label">Crew</label>
                            <select class="form-control col-sm-8" name="id_crew" id="id_crew_medical">
                                <option disabled selected>Crew</option>
                                @foreach ($crew as $c)
                                    <option value="{{ $c->id_crew }}">{{ $c->full_name }}</option>
                                @endforeach
                            </select>
                        </div>
                
                        <div class="form-group row mb-4">
                            <label for="colFormLabel" class="col-sm-2 col-form-label">Height</label>
                            <div class="col-sm-10">
                                <input name="height" id="crew_height_medical" type="number" class="form-control" placeholder="Crew Height" value="{{ old('height') }}">
                            </div>
                        </div>

                        <div class="form-group row mb-4">
                            <label for="colFormLabel" class="col-sm-2 col-form-label">Weight</label>
                            <div class="col-sm-10">
                                <input name="weight" type="number" class="form-control" id="crew_weight_medical" placeholder="Crew Weight" value="{{ old('weight') }}">
                            </div>
                        </div>
                
                        <div class="form-group row mb-4">
                            <label for="colFormLabel" class="col-sm-2 col-form-label">MCU Issued</label>
                            <div class="col-sm-10">
                                <input name="mcu_issued" type="text" class="form-control" id="crew_mcu_issued_medical" placeholder="MCU Issued" value="{{ old('mcu_issued') }}">
                            </div>
                        </div>

                        <div class="form-group row mb-4">
                            <label for="colFormLabel" class="col-sm-2 col-form-label">MCU Expired</label>
                            <div class="col-sm-10">
                                <input type="datetime-local" name="mcu_expired" placeholder="MCU Expired" class="form-control" id="crew_mcu_expired_medical" placeholder="col-form-label">
                            </div>
                        </div>

                        <div class="form-group row mb-4">
                            <label for="colFormLabel" class="col-sm-2 col-form-label">History Of Pain</label>
                            <div class="col-sm-10">
                                <input name="history_of_pain" type="text" class="form-control" id="crew_history_medical" placeholder="History Of Pain" value="{{ old('history_of_pain') }}">
                            </div>
                        </div>
                
                        <div class="input-group mb-4">
                            <label for="colFormLabel" class="col-sm-2 col-form-label">Status</label>
                            <select id="crew_status_medical" class="form-control col-sm-3" name="status">
                                <option value="ACT">ACT</option>
                                <option value="DE">DE</option>
                            </select>
                        </div>

                        <div class="form-group row mb-4">
                            <label for="colFormLabel" class="col-sm-2 col-form-label">Created User</label>
                            <div class="col-sm-10">
                                <input name="created_user" type="text" readonly value="{{ auth()->user()->id_login }}" class="form-control" id="crew_created_medical" placeholder="col-form-label">
                            </div>
                        </div>
                    
                </div>
                <div class="modal-footer">
                    <button class="btn btn-close" data-dismiss="modal"><i class="flaticon-cancel-12"></i> Discard</button>
                    <button type="submit" id="btn_crew_medical_record_store" class="btn btn-primary">Save</button>
                    </form>
                    
                </div>

对于 AJAX，我正在等待单击 id 为“btn_crew_medical_record_store”的按钮。这是我的阿贾克斯

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

$('#btn_crew_medical_record_store').on('click', function (e) {
        
        console.log('crew medical record');

        e.preventDefault();
        
        let crew_medical_record_data = {
            id_crew: $('#id_crew_medical').val(),
            height: $('#crew_height_medical').val(),
            weight: $('#crew_weight_medical').val(),
            mcu_issued: $('#crew_mcu_issued_medical').val(),
            mcu_expired: $('#crew_status_medical').val(),
            history_of_pain: $('#crew_history_medical').val(),
            status: $('#crew_mcu_expired_medical').val(),
            created_user: $('#crew_created_medical').val(),
        }

        console.log( crew_medical_record_data );

        $.ajax({
            type: "POST",
            url: "crew-medical-record",
            data: {
                id_crew: $('#id_crew_medical').val(),
                height: $('#crew_height_medical').val(),
                weight: $('#crew_weight_medical').val(),
                mcu_issued: $('#crew_mcu_issued_medical').val(),
                status: $('#crew_mcu_expired_medical').val(),
                history_of_pain: $('#crew_history_medical').val(),
                mcu_expired: $('#crew_status_medical').val(),
                created_user: $('#crew_created_medical').val(),
            },
            processData: false,
            contentType: false,
            success: function (response) {
                if( response.status != 200 ) {
                    $("#addRecordModal").modal("hide");
                    Swal.fire(
                        'Fail!',
                        `${
                            response.errors
                        }`,
                        'error'
                    )
                    console.log(response.errors);
                    // fetchCrew()
                    add_required_attribute_from_crew_master_modal_input()
                    add_required_attribute_from_crew_master_modal_edit_input()
                }
                else if( response.status == 200 ) {
                    $("#addRecordModal").modal("hide");
                    Swal.fire(
                        'Success!',
                        `${response.message}`,
                        'success'
                    )
                    // fetchCrew()
                    add_required_attribute_from_crew_master_modal_input()
                    add_required_attribute_from_crew_master_modal_edit_input()
                }
            }
        });

这是我的路由

Route::post('/crew-medical-record', [CrewMedicalRecordController::class, 'store']);

这是我在 CrewMedicalRecordController 中的“存储”方法

public function store(Request $request)
    {
        $validator = Validator::make($request->all(), [
            'id_crew' => 'required',
            'height' => 'required|numeric',
            'weight' => 'required|numeric',
            'mcu_issued' => 'required',
            'mcu_expired' => 'required',
            'history_of_pain' => 'required',
            'status' => 'required|max:3',
            'created_user' => 'required'
        ]);

        if( $validator->fails() ) {
            return response()->json([
                'status' => 400,
                'errors' => $validator->errors()
            ]);
        } else {
            CrewMedicalRecord::create( $request->all() );
            return response()->json([
                'status' => 200,
                'message' => 'Crew Medical Record Has Been Added'
            ]);
        }
    }

但是每次我尝试发布数据时，它都会给我这个错误，我不知道为什么，因为我为每个输入字段添加了名称

这就是我的全部，我真的很感谢大家的各种帮助

jQuery ajax Laravel 验证帖子

0赞 Phil 8/26/2022

你为什么要添加和？processData: falsecontentType: false

答：

1赞 Phil 8/26/2022 #1

通过添加这些...

processData: false,
contentType: false

您已告诉 jQuery 不要尝试序列化您的请求有效负载。然后会发生什么，您的对象将被字符串化，并且 content-type 标头将是。data"[object Object"]text/plain

// [object Object] with text/plain
$.ajax({
  url: "https://echo.zuplo.io/",
  method: "POST",
  data: { foo: "FOO", bar: "BAR", baz: "BAZ" },
  processData: false,
  contentType: false,
}).done((data) => {
  const { body, headers: { "content-type": contentType } } = data;
  console.log("You posted", body, "with content-type", contentType);
});

// application/x-www-form-urlencoded data
$.ajax({
  url: "https://echo.zuplo.io/",
  method: "POST",
  data: { foo: "FOO", bar: "BAR", baz: "BAZ" },
}).done((data) => {
  const { body, headers: { "content-type": contentType } } = data;
  console.log("You posted", body, "with content-type", contentType);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

删除这两行，让 jQuery 将你的 into 格式序列化，并将 content-type 标头设置为匹配。dataapplication/x-www-form-urlencoded

上一个：Laravel AJAX：通过 AJAX 发送文件时验证总是出错

下一个：尝试在键入时验证 django 表单字段时出现问题

使用 AJAX 的 Laravel POST 方法：“xyz”字段为必填项

Laravel POST method with AJAX: the 'xyz' field is required

评论