Cách gửi biểu mẫu ajax trong yii2

Question

Tôi cần gửi dữ liệu từ biểu mẫu html trong ứng dụng yii2 của mình. Tôi cần phải sử dụng ajax để gửi dữ liệu từ biểu mẫu này và nhận được phản hồi từ máy chủ để xuất nó. Trong yii 1.0 tôi đã sử dụng rất hữu ích helper ajaxSubmitButton và tôi không thể tìm thấy làm thế nào để gửi dữ liệu từ hình thức với ajax trong yii2. Bạn có thể cho tôi biết làm thế nào để làm điều đó? Có bài viết nào về nó không?

Cảm ơn bạn.

Answer 1

Yii ActiveForm hỗ trợ các sự kiện JavaScript trong nhiều giai đoạn trong vòng đời của nó. Bạn có thể sử dụng sự kiện beforeSubmit để đạt được những gì bạn đang tìm kiếm. Trong JavaScript:

$(document).ready(
    $('#myform').on('beforeSubmit', function(event, jqXHR, settings) { 
     var form = $(this); 
     if(form.find('.has-error').length) { 
      return false; 
     } 

     $.ajax({ 
      url: form.attr('action'), 
      type: 'post', 
      data: form.serialize(), 
      success: function(data) { 
       // do something ... 
      } 
     }); 

     return false; 
    }), 
); 

Lưu ý rằng bạn có thể dừng việc nộp bình thường của các hình thức bằng cách quay false từ callback sự kiện.

Answer 2

tải lại hình thức khi nộp không cho một máy chủ quy tắc xác nhận

$form.on('beforeSubmit', function (event, jqXHR, settings) { 

     if ($form.find('.has-error').length) { 
      return false; 
     } 

     $.ajax({ 
      url: $form.attr('action'), 
      type: 'post', 
      data: $form.serialize(), 
      success: function (datos, status, xhr) { 
       var ct = xhr.getResponseHeader("content-type") || ""; 
       //fail server validation 
       if (ct.indexOf('html') > -1) { 
        if ($(datos).find(".has-error").length) 
        { 
         modal.modal('show'); 
         modal.find(".modal-body").html(datos); 

        } 
       } 
       //real success 
       if (ct === "" || ct.indexOf('json') > -1) { 
        modal.modal('hide'); 

       } 
      }, 
      error: function (datos) { 
       alert(datos.responseText); 
      }, 
      complete: function (datos) { 
       console.log(datos); 
      } 
     }); 

     return false; 
    })