Tutorial AJAX + JSON com (JavaScript PURO)

[@erickantony8151]

Cara, tenho prova sexta feira sobre Ajax, js e jquery, e sinceramente, num vídeo de 30 min vc ensinou mais que meu professor em 1 período inteiro.. parabéns, ganhou um inscrito, vou acompanhar e estudar pelo seu conteúdo!! Sucesso

[@guilhermechinaglia]

Opa Erick, obrigado, Tmj!!

[@lucianofran4696]

É exatamente isso, vc aprende mais no youtube com estes profissionais doque na faculdade, que raiva que dá desses professor de faculdade

[@andrelalmeida]

Muito bem explicado. Essa sua abordagem debugando com console.log é bacana pra termos certeza que algo foi requisitado ou processado de forma correta. Parabéns.

[@guilhermechinaglia]

Obrigado pelo feedback André, faço um convite, se ainda não me segue no Instagram @guilhermechinagliadev estou produzindo um conteúdo diferente por lá. Grande Abraço!!

[@lmagalhaeslopes]

cara muito bom, facil de entender. sensacional

[@guilhermechinaglia]

Obrigado Leonardo Tmj!! Grande Abraço!!

[@andersonsantosqueiroz6165]

parabéns pelo conteúdo, man!

[@guilhermechinaglia]

Opa vlw Tmj!!

[@webereaugusto]

cara, parabéns! didática muito boa, e sem muita enrolação... espero que vc continue.. vou ver os outros vídeos, abs!!!

[@guilhermechinaglia]

Obrigado Weber pelo seu feedback. Grande abraço.

[@danilohenrique316]

Uma das melhores explicações que já vi sobre o assunto extremamente detalhado ponto a ponto, parabéns

[@guilhermechinaglia]

Opa Danilo obrigado pelo seu feedback, fico feliz por te contribuído. Grande Abraço 🚀🚀

[@jairsonvitorramalho8601]

Muito bom, sem enrolação. O melhor que já vi até o momento. Continue assim e parabéns!

[@guilhermechinaglia]

Vlw Jairson pelo feedback, obrigado por acompanhar! Precisando estou pelo Instagram também, logo menos volto a postar conteúdo por lá tbm @guilhermechinagliadev Grande Abraço

[@danilolima3224]

Parabéns, sua didática é sensacional.

[@guilhermechinaglia]

Opa Danilo obrigado, Tmj!! Grande Abraço !!

[@pettersonkesler277]

Sua didatica é muito boa, parabéns!! Sucesso!

[@guilhermechinaglia]

Muito obrigado Peterson, Tmj, qualquer dúvida ou se quiser trocar uma ideia segue lá no Instagram @guilhermechinagliadev instagram.com/guilhermechinagliadev/ Grande Abraço

[@alucard3295]

Muito obrigado

[@guilhermechinaglia]

Tmj!! Grande Abraço!!!

[@joseinacio6095]

Parabéns! Muito didático e detalhado. Não tem como não entender! Muito obrigado! Grande abraço! Virei seu fã!

[@guilhermechinaglia]

Opa José Tmj!! Grande Abraço!!

[@leonildeslira6532]

Olá Guilherme, parabéns pelo vídeo!

[@guilhermechinaglia]

Muito Obrigado!! Grande Abraço

[@rafaelbrittes2735]

Melhor vídeo sobre o assunto que achei, parabéns pela paciência e didática!

[@guilhermechinaglia]

Obrigado pelo elogio, Rafael, Tmj! Grande Abraço

[@iiisssmael]

Grato.

[@uallasleles]

Parabéns! Show de bola!

[@crjstjanojose]

Muito boa a sua explicação, parabéns e obrigado !!

[@guilhermechinaglia]

Tmj Cristiano, segue lá no insta @guilhermechinagliadev Grande Abraço!

[@oproximomilionario]

Meu professor da faculdade nos deu exatamente essa provaaa. Infelizmente ele nao imaginava que eu estudo nesse canal... Te amoooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooooo

[@guilhermechinaglia]

Vlw rsrs Tmj!!!

[@cleytonfernando2406]

Excelente conteúdo. Parabéns pelo vídeo. É muito difícil achar assuntos tão esclarecedores como este na net. Realmente deveria realizar um curso, passando por cada detalhe. Abços

[@guilhermechinaglia]

Obrigado pelo feedback Cleyton, estou rascunhando um curso aqui para um futuro próximo. Grande abraço.

[@dev-supremo]

show de bola

[@guilhermechinaglia]

Vlw Maciel!!! Obrigado, Tmj!!!

[@ruggerygusmao4386]

Parabéns, mestre! Muito boa sua aula...

[@guilhermechinaglia]

Obrigado Ruggery Tmj!! Grande Abraço!

[@marinagtuji7241]

Parabéns, estava travada em um projeto e seu vídeo ajudou muito. Espero que continue e sucesso no canal ;)

[@guilhermechinaglia]

Obrigado Marina. Que bom que ajudei. Grande abraço.

[@iagobispo7583]

melhor video que eu achei ate agr, parabéns pelo conteúdo!

[@guilhermechinaglia]

Muito obrigado pelo feedback. Grande Abraço.

[@charlesjunior7417]

melhor aula sobre o assunto que vi

[@guilhermechinaglia]

Vlw Charles, muito obrigado. Grande Abraço

[@nelson.costa.dev2536]

Muito bem explicado parabéns.

[@guilhermechinaglia]

Obrigado Nelson. Abraço

[@ingrid1852]

Adorei a aula, você explica muito bem e com detalhes. Um curso online seu com certeza seria um sucesso! Obrigada :)

[@guilhermechinaglia]

Fala Leona obrigado pelo feedback, que bom que curtiu, não sei se já faz parte, mas vou fazer uma aula ao vivo de Design Responsivo e Flexbox, criando um projeto na prática se quiser colar lá no grupo, só acessar o link abaixo. www.guilhermechinaglia.com.br Grande Abraço!

[@anacosta9896]

Vc explica muito ,podia fazer curso online!

[@guilhermechinaglia]

Muito obrigado Ana pelo seu feedback! Fico feliz que tenha gostado. Vou anotar aqui a sua sugestão...rsrs. obrigado, Abraço

[@francis_js]

Grato, sensacional... +1 inscrito +1 Like

[@guilhermechinaglia]

Opa Francis Tmj!! Grande Abraço!

[@victorvenancio4965]

Parabéns !! Entendi tudo, muito boa a didática !!

[@guilhermechinaglia]

Vlw Victor Tmj!! Grande Abraço.

[@joisonpb]

Meus parabéns pelo vídeo e pela didática, você poderia fazer vídeos sobre cors? além disso, também sobre suas experiencias com empresas, trabalhos freelances, etc ?

[@guilhermechinaglia]

Opa Joison obrigado pelo feedback e pelas sugestões de vídeo anotadas aqui. Qualquer coisa chama lá no Instagram pra trocar ideia ou retirar dúvidas. @guilhermechinagliadev Grande Abraço

[@Contigoespec]

Cara, além da explicação ser muito clara e objetiva, os exemplos que você usa são phodásticos! Só esperando esse curso... Quem sabe você não poderia fazer uma série explicando funções Javascript usando exemplos com JS Puro e Jquery?!

[@guilhermechinaglia]

Obrigado Dilton, gostei da sugestão de vídeos, anotei aqui e vou pensar em algo. Mais uma vez agradeço por acompanhar. Abraços

[@davialbuquerque4964]

sensacional, parabéns! finalmente consegui entender AJAX!

[@guilhermechinaglia]

Opa Davi que bom que curtiu!! Tmj!! Grande Abraço!!

[@thiagomartins4942]

Muito bem explicado. Parabéns excelente explicação.

[@guilhermechinaglia]

Obrigado pelo feedback Thiago. Grande abraço.

[@sergiosantos5088]

Agora sim entendi AJAX. Parabéns.

[@guilhermechinaglia]

Shooww Sérgio Tmj!!! Fico feliz por isso, Grande Abraço!!

[@allef8594]

Muito bem explicado! vlw

[@anacarolineviana5814]

Obrigada! Parabéns pelo seu trabalho excelente.

[@guilhermechinaglia]

Obrigado Ana, Grande Abraço.

[@motivacaodiaria_oficial]

Obrigado por compartilhar conhecimento

[@guilhermechinaglia]

Tmj Diogo é um prazer ajudar, Grande Abraço.

[@jucelinosantos1902]

Parabéns cara muito bom! Tô fazendo um curso na Udemy e fiquei com muitas dúvidas sobre esse assunto que vc conseguiu explicar!

[@guilhermechinaglia]

Tmj que bom que curtiu, Grande Abraço

[@RodrigoVieiraEufrasiodaSilva]

Parabéns Guilherme, excelente didática. Acho que seria muito interessante você publicar nós comentários as fontes do MDN que você usou até mesmo para estudo.

[@guilhermechinaglia]

Entendi Rodrigo, obrigado pela dica!! Grande abraço.

[@pyma735]

Muito top cara. Vlw

[@guilhermechinaglia]

Muito obrigado. Grande Abraço.

[@carlosneto1652]

parabéns !

[@elcio-dalosto]

Ao invés de usar Ctrl+K+C e Ctrl+K+U para comentar e descomentar, dá pra usar apenas Ctrl+; (control ponto e vírgula), que faz o mesmo, de forma mais prática. Gostei do vídeo, vou acompanhar os outros!

[@guilhermechinaglia]

Opa Elcio show de bola, vlw pela dica, o meu vscode já tem algum comando com Ctr+; só não sei o que é, segue lá no instagram @guilhermechinagliadev Grande Abraço

[@allantechsistemasdinamicos1035]

Parabéns irmão, explicação top. Queria tirar uma dúvida. Estou fazendo um app de restaurante que se resume no seguinte. Quando o operador do caixa incluir um pedido, o mesmo deve aparecer la na cozinha. Eu consegui, porem tive que usar um setInterval no meu ajax para ficar fazendo a requisição a cada 1s para ver os novos pedidos que entram no banco de dados. Teria como eu disparar essa requisição somente quando houvesse uma alteração na quantidade de linhas la no mysql? Ou seja eu quero que a lista de pedidos da cozinha seja atualiza assim que o pedido entrar no caixa. Tentei mandar a requisição no evento onsubmit. Porem só atualiza na maquina do caixa e na cozinha não. Essa atualização da cozinha tem de ocorrer quando ocorrer um insert no banco de dados, não importa de qual máquina entende.

[@guilhermechinaglia]

Pra isso vc precisa utilizar websocket, dá uma olhadinha sobre o termo. Tmj! Grande Abraço

[@maiconsantos999]

curti demais o video amigo, porem estou tendo problema com o CORS, mesmo com a versão do github que voce colocou, alguma dica em relaçao e isso?

[@guilhermechinaglia]

Fala maicon blz? Tive que formatar meu notebook, ainda continua com problema? Qualquer coisa segue lá no instagram @guilhermechinagliadev Grande Abraço.

[@maiconsantos999]

@@guilhermechinagliatranquilo cara👍🏾, acredito que nesses dias vou formatar o meu também, esperando pelo lançamento do Ubuntu kkkkk, e ainda continuo com o problema já usei muitas coisas e até agora nada, vou te seguir lá no insta 👍🏾

[@IsaYasmine]

Neste caso, como eu faria para enviar um data para o servidor? Meu endpoint precisa receber um id para fazer uma consulta e retornar o resultado.

[@kadeus]

i just saw your Video without Sound but was good thx

[@guilhermechinaglia]

Thank you very much Mehdi!!

[@tiagoz3950]

fala amigo blz,gostei muito da sua explicaçao,muito bem detalhada e com calma,mas eu tenho uma duvida,se eu adicionar mais um valor no array la no php,vou ter que clicar no botao para esse valor aparecer né?,mas e seu eu quiser que ele aparece em tempo real na tela,eu teria que rodar um loop no javaScript para ficar mostrando?,mas se eu fizer isso ele vai ficar repetindo os valores sem parar,tem algum jeito de reolver isso?

[@guilhermechinaglia]

Opa Tiago obrigado pelo comentário, Tmj!! Com relação a pergunta te respondi lá pelo Instagram, Grande Abraço 🚀🚀

[@cleitoncfs]

Professor, dá para fazer isso utilizando o xampp?

[@guilhermechinaglia]

Fala Cleiton blz? Sim vc consegue replicar com xampp tbm. O xampp ele vai emular o servidor php pra você, no caso do vídeo como faz muito tempo não me recordo se utilizei o apache e php instalados na máquina. Mas dá pra utilizar sim o xampp, lamp, Wamp (emuladores).

[@cleitoncfs]

Muito obrigado pelo retorno.

[@murilobrito131]

Onde é que que dou 1000 like . Vlw amigo

[@guilhermechinaglia]

Opa Murilo Tmj, Vlww

[@murilobrito131]

@@guilhermechinaglia amigo estou com uma duvida, tem alguma forma de alterar, não somente os dados de um form, mas modificar todo o formulario , colocar botões , inserir um input Collor e outros usando jquery ou outra solução sem atualizar a pagina? Tenho um projeto onde cada dispositivo tem uma interface web comum e nesta um modelo de formulario que é especifico para cada modelo, vez o outra tem um novo dispositivo que têm um novo tipo de formulario e devido a isso não tenho como fazer uma pagina geral para todos os modelos. Esses dispositivos se comunicam com um servidor a 3km de distancia via radio LORA e esse radio não da conta de enviar todo um arquivo html, mas daria para mandar pequenos trechos de códigos contendo os comandos para criar um formulário especifico para ele e alterar o formulario sem atualizar a pagina, mas não sei se é possível.

[@iiisssmael]

Pergunta: se o arquivo lista fosse alterado, haveria como o AJAX, atualizar o resultado sem o refresh da pagina o uso do btn??? Um evento pode partir do arquivo PHP???

[@guilhermechinaglia]

Ismael boa noite, neste caso eu daria uma pesquisada sobre websockets talvez ajudaria na sua questão. Grande Abraço!

[@iiisssmael]

@@guilhermechinaglia Grato Guilherme, essa foi a solução que adotei, foi muito boa a sua atenção.

[@SouNano1]

muito bom!!!!

[@guilhermechinaglia]

Muito obrigado! Grande Abraço

[@TalesCembraneliDantas]

Legal, mas faltou vc falar do melhor método de todos, o fetch, mais fácil de usar, nativo do Javascript e retorna uma promisse

[@guilhermechinaglia]

Fala Tales td bem? Sim pode usar a fetch nativa do JavaScript, tendo tempo eu gravo pra complementar a playlist. Grande abraço!!

[@Levialmeida100]

No exemplo acima vc clicando fica repetindo sempre lista como evitar isso? E qual vantagem de usa evento desse jeito do que ("click",funçao,false) e a função esta acima.?

[@guilhermechinaglia]

Olá Levi poderia explicar melhor a sua primeira dúvida com relação a lista, não entendi a sua pergunta. Com relação a vantagem ou o por que utilizo este modo, tenho um vídeo que falo sobre isso aqui no canal, está aqui kzbin.info/www/bejne/m4DQh2l4pM18d80 Grande Abraço

[@Levialmeida100]

@@guilhermechinaglia ola guilherme eu mesmo ja consegui resolver era pra apagar os registos da lista inves de repetir sempre ao clicka, era so antes colocar que text = " "

[@guilhermechinaglia]

@@Levialmeida100 Fala Levi poxa que bom que conseguiu, desculpa não tinha entendido sua dúvida no primeiro momento. Qualquer coisa estarei por aqui. Grande Abraço!!

[@Levialmeida100]

@@guilhermechinaglia vlw vc e gente boa, so um detalhe eu fiz o processo ajax usando agora no php o select de dados no mysqli e percebe quando click no html demora uns 4 seg para puxa os dados, algo demorado se compara na atualização de pagina

[@guilhermechinaglia]

@@Levialmeida100 vlw cara tmj, então o conceito do Ajax não é tanto relacionado a velocidade que obtemos a atualização na página, mas sim a sensação que ela passa para o usuário/cliente. A ideia de requisitar informações por exemplo e ver essa atualização acontecer sem o refresh da página. Neste caso vc pode colocar um loading enquanto os dados não são obtidos do servidor. Grande Abraço!

[@evanildoc39]

E se no lugar do array fosse dados (objeto) vindo do banco, como exibiria na pagina?

[@guilhermechinaglia]

Fala Evanildo tudo bem? Tem uma playlist aqui no meu canal chamada "Como implementar GRÁFICOS dinâmicos com Chart.js" é este link aqui: kzbin.info/aero/PLARhMvcrqcLyrPIEOTvyehxruw99BLiLD , nesta playlist de 3(três) vídeos eu utilizo uma requisição ajax pra obter os dados que estão gravados em uma base de dados (MySQL), e o retorno dos dados insiro na biblioteca Chart.js através do JavaScript. Se puder dar uma conferida lá acredito que vai responder a sua dúvida. Qualquer coisa se persistir me chama aqui ou lá no instagram @guilhermechinagliadev Grande Abraço!!

[@evanildoc39]

@@guilhermechinaglia Olhei os vídeos, porém usa é jquery para pegar os dados do banco e levar a outra pagina, eu gostaria de ver usando apenas ajax e json js puro como neste vídeo.

[@guilhermechinaglia]

É fácil é só substituir o JQuery pelo JavaScript puro, a ideia de produzir dois vídeos um com JQuery e outro com JavaScript puro foi pra galera poder escolher a que agradar melhor e tbm pra entender como o JQuery com Ajax funciona por debaixo dos panos. Tenta implementar o chart.js com JavaScript puro é só pegar o que aprendeu no Tutorial AJAX + JSON e substituir o JQuery Ajax, qualquer dúvida estarei por aqui. Grande Abraço

[@evanildoc39]

@@guilhermechinaglia como enviar um objeto php via json da da pagina LISTA.PHP e receber na pagina index? Poderia mostrar como receberia essa resposta, tento mas sempre da NULL... por favor

[@leonardosavio6601]

Muito bom, porem o meu da sempre o mesmo erro relacionado a CORS, tentei com minha api hospedada no 000webhost, com o arquivo php na maquina local e com a minha api no wampserver local na mesma maquina. E sempre aparece isso (from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, chrome-untrusted, https.)

[@guilhermechinaglia]

Fala leonardo blz? Estou retomando o conteúdo do canal, não sei se ainda está com problemas de CORS ou se conseguiu resolver, geralmente no lado do PHP inserimos um Access-Control-Allow-Origi, este problema de cors é quando tentamos executar uma ação assíncrona, buscar alguma dado ou enviar em "origens" diferentes, por exemplo a aplicação client em um endereço de IP diferente do backend. É uma regra dos browsers para deixar mais seguro este tráfego de informações.

[@leonardosavio6601]

@@guilhermechinaglia Consegui resolver, Obrigado! Vai ser de grande importância seu retorno.

[@guilhermechinaglia]

Vlw Leonardo, Tmj!! Grande Abraço

[@o-autentico]

ei bro, por algum motivo o ajax.responseType = "json"; esta dando erro, confirir letra por letra linha por linha , e deu erro por que ? apresenta o seguinte erro, Uncaught TypeError: Cannot read property 'length' of null at XMLHttpRequest. (script.js:13)

[@guilhermechinaglia]

Dá uma olhada na conexão do seu banco se os elementos estão sendo trazidos. A mensagem de erro refere-se ao fato de estar tentando contar com a propriedade length, mas ela não consegue por que não tem conteúdo. Caso continue dando erro, coloca seu código no codepen pra que fique melhor de verificar. Abç

[@o-autentico]

@@guilhermechinaglia sim mano, dei uma olha mas quando tira ajax.responseType = "json"; funciona de boa, e como assim , Dá uma olhada na conexão do seu banco , desculpa por pelas perguntas, ksks, é que estou aprendendo agora sobre java script etc

[@guilhermechinaglia]

Verifica lá no lista.php se você deu um json_encode() no resultado que está vindo do banco. Essa função transforma em um formato json. Isso lá no PHP.

[@o-autentico]

@@guilhermechinaglia sim mano,

[@guilhermechinaglia]

Estranho Matheus preciso dar uma olhada no seu código. Se puder tem como fazer o upload dele no codepen

[@robisonrocha3457]

Alguém pode me ajudar por favor ? não consigo visualizar meu documento php no network

[@guilhermechinaglia]

Fala Robison blz? Se ainda não conseguiu me manda msg lá no Instagram pra eu te ajudar. @guilhermechinagliadev Grande Abraço

[@robisonrocha3457]

@@guilhermechinaglia no caso é um problema no cors não sei como resolver

[@bbuiu]

Estou tendo um problema, CORS, simplismente não funciona e fica dando esse erro, alguem aqui ja passou por isso?

[@guilhermechinaglia]

Opa Manoel blz? Deixa eu entender, você tem um servidor local rodando na sua máquina exemplo: wamp, lamp, xamp etc?

[@walney2008]

ola tudo bem, neste site consigo pegar um arquivo midi e transformar em json, agora como fazer para recuperar todas as notas musicais , com suas duracoes ? (www.visipiano.com/midi-to-json-converter/) desde ja obrigado.

[@joaovitorferreiragoncalves6147]

meu response não esta respondendo e a extenção "length'" não funciona alguem pode me ajudar

[@joaovitorferreiragoncalves6147]

olha ai o XMLHttpRequest {onreadystatechange: null, readyState: 4, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …} onabort: null onerror: null onload: null onloadend: null onloadstart: null onprogress: null onreadystatechange: null ontimeout: null readyState: 4 response: null responseText: (...) responseType: "json" responseURL: "127.0.0.1:49191/lista.php" responseXML: (...) status: 200 statusText: "OK" timeout: 0 upload: XMLHttpRequestUpload {onloadstart: null, onprogress: null, onabort: null, onerror: null, onload: null, …} withCredentials: false __proto__: XMLHttpRequest

[@joaovitorferreiragoncalves6147]

TypeError: Cannot read property 'length' of null

[@joaovitorferreiragoncalves6147]

prof me ajuda ai seu tutorial foi o melhor que achei porem não está dando certo na minha maquina

[@guilhermechinaglia]

João verifica se a conexão está correta no PHP, e caso positivo, dá um console.log na resposta que está vindo pelo lista.php. Caso persista o erro, joga depois o seu código no codepen pra que eu possa dar uma olhada. Abraço

[@joaovitorferreiragoncalves6147]

@@guilhermechinaglia valeu prof

[@marciooliveira5262]

Boa aula, mas tá muito científica. Não se aprende tecnologia assim.