Começamos o tutorial para obter o criação e envio de formulários via Ajax, para isso, quando criamos páginas em HTML é muito fácil fazer formulários entrada de dados, seja para nos servir como formulário de contato com a própria página ou organização, para realizar uma pesquisa, como cadastro, etc. O normal é que se queremos tornar este formulário para algo simples usamos o método PHP Post para enviar a informação e poder visualizar, processar ou modificar.
Porém, o uso deste método em PHP tem uma grande desvantagem, que ao inserir os dados temos a necessidade de atualizar ou recarregar a página em questão. É por isso que vamos ver um método no qual não há necessidade.
Quero dizer um formulário criado com Ajax, também ajudou com PHP e criado para uma página em HTML. Obviamente temos que criar nossa página em HTML, nosso índice, que podemos customizar ou personalizar com estilos graças a um arquivo CSS.
Após a criação dessa base precisaremos criar mais 2 arquivos, um arquivo php onde editaremos a entrada de dados pelo formulário e um script implementado em javascript, ou seja, um arquivo .js. É neste script que usaremos Ajax para processar os dados de forma que não precisemos recarregar nossa página da web como aconteceria se usássemos apenas um método php como Post ou get.
Além disso teremos que incluir uma biblioteca jQuery ser capaz de interpretar o que escrevemos com Ajax.
Para começar, é importante lembrar que todos os arquivos que criamos, nosso arquivo javascript Ajax que chamaremos de operation.js, o arquivo de folha de estilo css que chamaremos de styles.css, se vamos criar um, e o biblioteca de jQuery, devemos incluí-lo no início do nosso código HTML.
É tão simples quanto inclua-os na cabeça de nosso index.html:
…Agora vamos criar um arquivo com código php simples que chamaremos de envio.php, onde coletaremos as informações que são enviadas por meio de nossa página da web. Neste caso, a informação será para um formulário de contacto para que os dados sejam enviados para o nosso próprio endereço de email para podermos ler as mensagens deixadas pelos utilizadores, embora este possa ser modificado e enviado para outra página ou outro local.
Depois de criar o código php, vamos para a coisa realmente interessante que é a criação de nosso arquivo operation.js onde usaremos Ajax. Desta forma, processaremos os dados do nosso formulário de contato sem atualizar a página conforme informado anteriormente. Primeiro, mostraremos o código que devemos escrever em nosso script:
function sendMail () {$ ("# car_send"). attr ("disabled", true); $ (". car_error"). remove (); filtro var = / [A-Za-z] [A-Za-z0-9 _] * @ [A-Za-z0-9 _] +. [A-Za-z0-9 _.] + [A -za- z] $ /; var s_email = $ ('# c_mail'). val (); var s_name = $ ('# c_name'). val (); var s_msj = $ ('# c_msg'). val (); if (filter.test (s_email)) {sendMail = "true"; } else {$ (‘# c_mail’). after ("Digite o e-mail válido."); sendMail = "falso"; } if (s_name.length == 0) {$ (‘# c_name’). after ("Por favor, digite seu nome."); var sendMail = "false"; } if (s_msj.length == 0) {$ (‘# c_msg’). after ("Digite a mensagem."); var sendMail = "false"; } if (sendMail == "true") {var data = {"nome": $ ('# c_name'). val (), "email": $ ('# c_mail'). val (), "mensagem" : $ ('# c_msg'). val ()}; $ .ajax ({data: data, url: 'send.php', type: 'post', beforeSend: function () {$ ("# car_send"). val ("Sending …");}, sucesso : function (response) {$ ('form') [0] .reset (); $ ("# car_enviar"). val ("Enviar"); $ ("# c_information p"). html (resposta); $ ("#c_information"). fadeIn ('slow'); $ ("# car_enviar"). removeAttr ("disabled");}}); } else {$ ("# car_submit"). removeAttr ("disabled"); }} Criamos a variável de filtro para verificar se o e-mail que inserimos é válido, para isso colocamos que o endereço inserido é alguma sequência de caracteres seguida de um símbolo de arroba, outra sequência de caracteres, um ponto e mais caracteres. Se não tiver essa estrutura ao enviarmos a mensagem, ele nos informará que não pode ser enviada porque o e-mail informado não é válido. Se atender aos requisitos, armazene o valor true na variável send email sendMail e continue verificando.
Em seguida, valide o comprimento do nome. Se for igual a 0, significa que não inserimos um nome e ele nos pede para inseri-lo novamente.
Ele faz o mesmo com a mensagem e seu comprimento para verificar se não deixamos o campo em branco.
Depois de verificar todos os campos e ver se estão corretos, salve na variável de dados que é um array, o nome, o e-mail e a mensagem a ser enviada.
Finalmente, com Ajax, passamos os dados e fazemos referência ao arquivo envio.php usando o método post e enviamos as informações. Antes de ser enviada, a mensagem aparece "enviando" até que o processo termine com sucesso.
Gostou e ajudou este tutorial?Você pode recompensar o autor pressionando este botão para dar a ele um ponto positivo
