Quantas vezes você se deparou com o fato de inserir dados incorretos, por isso a página recarregou e excluiu completamente os caracteres inseridos nos campos. Para corrigir isso, existe uma abordagem bastante popular para construir uma interface de usuário, e seu nome é ajax. Ele aparece em muitos projetos e é usado de várias maneiras.
Enviando um formulário ajax: conectando bibliotecas
Incluir biblioteca jquery em index.php.
Existe outra maneira de incluir jquery em um documento. Você precisa baixar a biblioteca do site oficial do jquery, colocá-la na pasta correta e colar o link para ela assim:
Conectando e configurando documentos
1. Crie um documento.php na pasta com o site com qualquer nome conveniente para você - isso enviará o formulário php ajax. Nele você pode escrever em qual formato o texto com a mensagem será exibido. Por exemplo, form1.php.
2. Na pasta de arquivos javascript, crie um arquivo.js comqualquer nome conveniente. Por exemplo, form.js.
3. Conecte esta pasta ao seu documento.
4. Crie um formulário com os seguintes parâmetros:
Nela, não esqueça de criar campos para inserir seus dados.
5. Acesse o arquivo form1.php no diretório com o site, no qual escreva:
Agora, ao enviar o formulário, o navegador exibirá informações sobre os dados.
No mesmo arquivo, você pode escrever o que exatamente será exibido ou como. Você também pode escrever ciclos ou algoritmos aqui.
Enviando formulário jquery ajax
1. No arquivo form.js criado, você precisa escrever o código responsável por fazer o arquivo funcionar depois que a página do site estiver totalmente carregada.
$(document).ready(function(){ //Nosso próximo código será executado aqui });
2. Então você precisa personalizar o botão de envio. Faça tudo no mesmo arquivo.
$("form").submit(function(event) { event.preventDefault(); //o código a seguir será escrito aqui });
A primeira parte do código é responsável por selecionar o elemento na página, e a segunda é responsável por impedir a ação padrão.
3. Então, por exemplo, faça um envio de formulário ajax em caso de sucesso.
$.ajax({ type: $(this).attr('method'), url: $(this).attr('action'), data: new FormData(this), contentType: false, cache: false, processData: false, success: function(result){ alert(result); } });
A seguir estão as descrições detalhadas de cada configuração.
- tipo -este é o tipo de solicitação que é enviada no formulário; como custa POST, o tipo de solicitação será apropriado;
- this - seleção de elemento dentro da construção;
- attr - abreviação de atração (atração), ou seja, um determinado parâmetro do alvo selecionado (forma) é atraído;
- url - parâmetro responsável por onde a requisição será enviada; neste caso, o que está escrito nos parâmetros do formulário (form1.php);
- data - especifica os dados do formulário;
- contentType - responsável por enviar cabeçalhos para o servidor; neste caso não é necessário;
- cache - responsável por salvar o cache do usuário;
- processData - responsável por converter os dados em uma string;
- sucesso - exibe o resultado de um envio de dados bem-sucedido; portanto, se o envio de dados foi bem-sucedido, as ações da função são executadas.
4. Pronto, agora ao enviar o formulário ajax, você receberá os dados sem atualizar a página.
O resultado pode ser alterado usando o arquivo form1.php, onde você pode especificar exatamente o que será exibido como resultado. Por exemplo, Você pode experimentar e criar uma verificação da exatidão de inserir determinados dados: se os dados não estiverem corretos, a mensagem desejada será exibida, caso contrário, redirecionará para a página correta. Muitas outras coisas também são possíveis, seja qual for o desejo do seu coração.
Há também o envio de dados para o servidor de forma assíncrona. É quando o usuário digita o texto, e ele é imediatamente destacado em vermelho, indicando que os dados inseridos não estão corretos. Sobre issoexistem muitos manuais na Internet, onde tudo é claramente explicado e mostrado com exemplos.
Conclusão
Sem dúvida, o ajax é uma ferramenta útil na construção de sites. Para fazer páginas e interfaces de alta qualidade, é simplesmente necessário. Vale ress altar que é muito importante conhecer jQuery para entender completamente a imagem e o que está escrito no código, pois um simples copiar e colar nem sempre pode ajudar e ensinar você a entender o código. Vale sempre lembrar que as versões de idioma são atualizadas e alguns recursos podem simplesmente desaparecer. Portanto, nem todas as soluções podem ser relevantes, muitas vezes o código escrito simplesmente não funciona ou não produz o resultado que você gostaria de ver na tela.
