Question

正在处理具有各种输入字段（包括用于上传文件的字段）的表单。当用户单击“提交”按钮时，我想通过AJAX POST请求将表单提交给后端PHP PHP Laravel 。问题在于数据未按预期提交。.我正在对数据进行序列化，然后直接过帐，但不确定是否正确。

表单布局

<form method="POST" action="#" id="form" enctype="multipart/form-data" accept-charset="UTF-8">
    <!-- CSRF TOKEN-->
      <input type="hidden" name="_token" value="{{ csrf_token() }}">
    <!-- END CSRF TOKEN-->
    <div class="form-line registar2 love">
        <input id="passport" type="text-area" class="form-input" name="passport" value="{{ old('passport') }}" autofocus>
            <label> Passport</label>
            <div class="error-label"></div>
            <div class="check-label"></div>
             @if ($errors->has('passport'))
                <span class="help-block">
                    <strong>{{ $errors->first('passport') }}</strong>
                </span>
            @endif
   </div>

    <div class="form-line registar2 move" >
      <input id="kra" type="text-area" class="form-input" name="kra" value="{{ old('kra') }}" required>
      <label>KRA Pin *</label>
      <div class="error-label">Field is required!</div>
      <div class="check-label"></div>
      @if ($errors->has('kra'))
        <span class="help-block">
            <strong>{{ $errors->first('kra') }}</strong>
        </span>
      @endif
    </div>

    <div class="form-line registar2 love {{ $errors->has('residence') ? ' has-error' : '' }}">
      <input id="residence" type="text-area" name="residence" class="form-input" required>
      <label>Current Residential Address *</label>
      <div class="error-label">Field is required!</div>
      <div class="check-label"></div>
      @if ($errors->has('residence'))
        <span class="help-block">
            <strong>{{ $errors->first('residence') }}</strong>
        </span>
      @endif
    </div>

    <div class="form-line registar2 move {{ $errors->has('documents') ? ' has-error' : '' }}">
      <input id="documents" type="file" class="form-input" name="documents" value="{{ old('documents') }}" multiple>
      <div class="error-label"></div>
      <div class="check-label"></div>
      @if ($errors->has('documents'))
          <span class="help-block">
            <strong>{{ $errors->first('documents') }}</strong>
          </span>
      @endif
    </div>

    <button type="submit"id="pay"> Proceed to Payament</button>


  </form>

提交表单时将调用AJAX代码

<script>
    // Get the form via its id
    var form = $('#form');

    // Set up an event listener for the contact form.
    $(form).submit(function(e) {
    // Stop the browser from submitting the form.
    event.preventDefault();

    var inputs = $("#form :input");
    console.log(inputs);

    var entries = inputs.serialize();

    console.log(entries);

    $.ajax({
        type: "POST",
        //url in the routes file to post the data
        url: "saveAdd",
        contentType: "application/x-www-form-urlencoded",
        data: entries,
        success: function(response){
          alert(response);
        },
        failure: function(errMsg) {
            alert(errMsg);
        }
    });
});

</script>

将控制器的文件路由到POST到

Route::any( '/saveAdd', 'B2CController@saveAdd')->name('b2c.saveAdd');

Laravel后端中的控制器文件

    public function saveAdd(Request $request){

        dd($request->all());
    }

Answer 1

在表单提交功能上，它从表单（包括文件）中获取所有数据。 let关键字用作本地范围。

$( "form" ).submit(function( event ) {
    let form = $( this )
    let formData = new FormData(form[0]);
    event.preventDefault();
    console.log(formData);

    $.ajax({
        type: "POST",
        data:formData,
        processData: false,
        contentType: false,
        url: "saveAdd",
        success: function(response){
            alert(response);
        },
        failure: function(errMsg) {
            alert(errMsg);
        }
    });
});

使用AJAX从表单获取上传的文件和表单数据并将其发布到Laravel后端时出错

1 个答案: