Envio de formulário Ajax

Descrição

Framework7 permite que você envie dados automaticamente usando Ajax usando as seguintes duas maneiras -

• Quando o usuário envia o formulário ou o evento de envio é acionado no formulário de forma programática.

• Quando o usuário modifica qualquer campo do formulário ou evento de alteração disparado no formulário de forma programática.

Enviar dados do formulário ao enviar

Para habilitar o formulário Ajax e enviar os dados do formulário clicando em Enviar, automaticamente, você precisa adicionar a classe ajax-submit ao formulário. Depois que o usuário enviar o formulário, o Ajax enviará automaticamente os dados do formulário usando as seguintes regras:

• Os dados do formulário serão enviados para o arquivo ou URL mencionado no atributo action do formulário.

• O método de solicitação será semelhante ao mencionado no atributo de método do formulário.

• O tipo de conteúdo será o mesmo mencionado no atributo enctype do formulário. Se não for mencionado por padrão, é application / x-www-form-urlencoded .

Enviar dados do formulário na mudança de entrada

Podemos enviar os dados do formulário quando o usuário faz qualquer alteração nos campos do formulário usando a classe ajax-submit-onchange conforme mostrado abaixo -

<form action = "send.html" method = "GET" class = "ajax-submit-onchange">
   ...
</form>

Quando o usuário modifica qualquer campo do formulário, os dados do formulário serão enviados automaticamente usando Ajax com as mesmas regras discutidas acima.

Ajax submit event

Para obter uma resposta XHR real do arquivo / URL para onde você enviou os dados, você pode usar eventos especiais conforme mostrado abaixo -

S.Não	Descrição do Evento	alvo
1	submitted Este evento será acionado após uma solicitação Ajax bem-sucedida.	Elemento de Formulário <form class = "ajax-submit">
2	beforeSubmit Este evento será disparado logo antes da solicitação Ajax.	Elemento de Formulário <form class = "ajax-submit">
3	submitError Este evento será disparado no erro de solicitação Ajax.	Elemento de Formulário <form class = "ajax-submit">