Come inviare un modulo Ajax in yii2

Question

Ho bisogno di inviare dati dal modulo html nella mia app yii2. Ho bisogno di usare ajax per inviare dati da questo modulo e ottenere la risposta dal server per l'output. In yii 1.0 stavo usando helper molto utile ajaxSubmitButton e non riesco a trovare come inviare dati da form con ajax in yii2. Potresti dirmi come si fa? C'è qualche articolo a riguardo?

Grazie.

Answer 1

Yii ActiveForm supporta gli eventi JavaScript in molte fasi del suo ciclo di vita. È possibile utilizzare l'evento beforeSubmit per ottenere ciò che si sta cercando. 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; 
    }), 
); 

Si noti che è possibile interrompere il normale invio del modulo restituendo false dal callback dell'evento.

Answer 2

ricaricare il modulo quando il submit non riesce per una regola di convalida del server

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