So senden Sie ein Ajax-Formular in yii2

Question

Ich muss Daten aus HTML-Formular in meiner yii2 App senden. Ich muss Ajax benutzen, um Daten von diesem Formular zu senden und die Antwort vom Server zu erhalten, um es auszugeben. In yii 1.0 habe ich einen sehr nützlichen helper ajaxSubmitButton benutzt und ich kann nicht finden, wie man Daten aus dem Formular mit ajax in yii2 sendet. Können Sie mir sagen, wie es geht? Gibt es einen Artikel darüber?

Vielen Dank.

Answer 1

Yii ActiveForm unterstützt JavaScript-Ereignisse in vielen Phasen seines Lebenszyklus. Sie können das Ereignis beforeSubmit verwenden, um das zu erreichen, wonach Sie suchen. In 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; 
    }), 
); 

Beachten Sie, dass Sie die normale Vorlage des Formulars durch die Rückkehr false aus dem Ereignisrückruf zu stoppen.

Answer 2

laden Sie die Form, wenn das nicht für eine Regel Validierungsserver einreichen

$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; 
    })