jQuery和Laravel集成

Question

我需要您的想法和提示，以使我可以使用此表格。 我正在嘗試為每個類別中的每個候選人創建一個評分，並且每個類別都有5條標准。 我所做的是在數據庫中動態獲取條件，並在輸入框中顯示它。 現在我的問題是如何保存數據庫以及條件ID以及每個條件的分數。這是我的代碼

    <form class="form-horizontal" role="form">
                  {{ csrf_field() }}
                    <div class="form-group col-sm-8" >
                    <input type="hidden"  id="canId" name="canId">
                    <input type="hidden"  id="catId" name="catId">
                    <input type="hidden"  id="judgeId" name="judgeId">
                    @foreach($dataCriteria as $Criteria)
                      <label class="col-sm-9" for="id">{{$Criteria->cri_name}}</label>
                      <div class="col-sm-3">
                        <input type="text" class="form-control" id="cri_{{$Criteria->id}}" name="cri_{{$Criteria->id}}" data-crid ="{{$Criteria->id}}" placeholder="1-10" required><br>
                      </div>    
                    @endforeach    

                    </div>
                      <div class="col-sm-4">
                      <img src="{{ asset('img/girl.jpeg') }}" alt="">
                      <h4 class="canfname text-center"></h4>
                      <p class="text-center"><em class="canbrgy"></em></p>
                      </div></form>

這是我的ajax代碼，但是缺少標准輸入。

$.ajax({
          type: 'post',
          url: 'candidates/rateCandidates',
          data: {
            '_token': $('input[name=_token]').val(),
            'canId': $('input[name=canId]').val(),
            'catId': $('input[name=catId]').val(),
            'judgeId': $('input[name=judgeId]').val()
          },
          success: function(data) {
            window.location.reload();  
            }
      });

請幫我...謝謝

Answer 1

首先，您需要序列化表單字段：

var serializedData = $(".form-horizontal").serialize();

並發送具有以下結構的Ajax請求：

$.ajax({
    url: URL,
    type: "POST",
    dataType: 'json',
    data: serializedData,
    success: function(data){
    }
});

使用這種方法，可以確保所有表單數據都像常規表單一樣發布。

我對登錄/注冊/忘記密碼ajax請求做了這種方法。

如果您有要發送到控制器的外部數據，請向表單中添加一個隱藏字段，如下所示：

<form class="form-horizontal" role="form">
    ...
    <input type="hidden"  id="extraDataField" name="extraDataField" value="{{$sampleVariable}}"/>
</form>

現在，當您序列化數據時，extraDataField將追加到表單中，並且在發布數據時您將在控制器中收到

Answer 2

您可以使用jquery validate提交表單。 我可以幫您起步，請參見以下示例：

 jQuery("#project_pages_form").validate({
        submitHandler: function (form) {
          //  showLoader('Working on your request<br /> It may take a while depending on the content.');
            //form.submit();
           var formData = new FormData(form);
            $.ajax({
                url: '{{ url("publishProjectPages") }}',
                type: 'POST',
                data: formData,
                contentType: false,
                processData: false,
                cache: false,
                dataType: 'JSON',
                success: function (json) {
                    showLoader('successful');

                },
                error: function (xhr, textStatus, errorThrown) {
                    toastr.clear();
                    toastr.error('Could not proceed your request. Please refresh the web page and try again.');

                }
            });


        }
        }); 

在您的控制器中，您可以返回如下響應：

public function publishProjectPages (Request $request)
{
    $response = array();

    $pages = $request->pagesChecks;

        $response['code'] = 204;
        $response['status'] = true;
        $response['message'] = 'success';

    return response()->json($response);

}

如果您將像上述方法一樣提交表單，則表單中的所有內容都會自動提交。

您可以對其進行進一步的驗證和表單提交處理程序。