JQuery é uma biblioteca javascript cujo objetivo é "escrever menos, fazer mais". jQuery é fácil de conectar ao seu site e começar a usar. Com o jQuery, é muito mais fácil usar javascript em seu site.
jQuery elimina um monte de linhas de código javascript e permite implementar esse monte de linhas com apenas um método.
O que é AJAX?
AJAX é assíncrono (ou seja, o navegador, depois de enviar uma solicitação, pode fazer qualquer coisa, por exemplo, exibir uma mensagem sobre a espera de uma resposta, rolar a página, etc.) JavaScript e XML. Ele é usado para criar páginas da web dinâmicas e rápidas. O AJAX nos permite atualizar parte de uma página da web sem recarregar a página inteira.
E sobre jQuery e AJAX?
A combinação de jQuery e AJAX fornece uma funcionalidade poderosa. A PARTIR DE usando jquery e ajax, você pode fazer uma solicitação e receber informações em uma variedade de formatos, incluindo XML, HTML e até mesmo texto simples. Você pode usar o formato JSON para trocar dados. Podemos usar os dados recebidos da solicitação ajax em nossa página html.
jQuery torna a API Ajax baseada em navegador existente mais poderosa e fácil de usar. Fazer chamadas ajax da maneira normal usando javascript é um pouco complicado: já que você deve levar em consideração que navegadores diferentes exigem abordagens diferentes para criar o objeto XMLHttpRequest. Além disso, o envio de dados de, por exemplo, formulários se torna mais difícil se você usar javascript regular para a chamada ajax.
jQuery fornece funcionalidade simples e poderosa que estende os métodos javascript AJAX e fornece uma abordagem mais flexível.
Neste breve artigo, vou mostrar a você como usar jQuery e AJAX em php simples Formato... Vamos começar ... Para usar jQuery e AJAX precisamos de dois arquivos, o primeiro arquivo conterá o código html / php, através do qual a solicitação ajax será feita. No segundo arquivo, lidaremos com a solicitação ajax e retornaremos o resultado para a primeira página.
Etapa 1. Crie um arquivo school.php e cole o seguinte código nele:
No código acima, obtemos o nome e o número do aluno e, usando jquery e ajax, os enviamos para details.php.
| Seu nome: | ||
| Número do rolo: | ||
Etapa 2: crie details.php e coloque o seguinte código nele:
No código acima, obtemos o endereço do aluno usando o número sequencial e seu nome.
Para este exemplo, você precisará criar um banco de dados escolar e uma tabela de alunos. A tabela do aluno contém campos com nomes, número de sequência e endereço.
Espero que você ache este artigo útil.
O método post () normalmente destina-se a enviar dados ao servidor (por exemplo, de um formulário).
No contexto do método post, vale a pena mencionar jsoné um formato de texto baseado em javascript. Ele pode ser usado por quase qualquer linguagem de programação.
jQuery, solicitação Ajax POST
jQuery.post (url ,,,)- O primeiro argumento (url) é o url do documento para o qual a solicitação é enviada;
- O segundo argumento (dados) são os dados enviados ao servidor, geralmente representados como um objeto js;
- O terceiro argumento (callback (data, textStatus, jqXHR)) é uma função chamada depois que o servidor responde. Como argumentos esta função aceita os dados enviados pelo servidor em resposta à solicitação e o status de como a solicitação foi concluída.
json_decode () e json_encode ()
DENTRO Linguagem PHP(a partir de 5.2), o suporte JSON está incluído no núcleo na forma de funções json_decode () (decodifica uma string JSON) e json_encode (), que convertem os tipos de dados JSON nos Tipos PHP e vice versa.
1, "b" => 2); echo json_encode ($ arr); ?>Resultado
("a": 1, "b": 2, "c": 3, "d": 4, "e": 5)Exemplo de PHP da função json_decode
$ json = "(" a ": 1," b ": 2)"; var_dump (json_decode ($ json, true)); $ arr = json_decode ($ json, verdadeiro); echo "". $ arr [" a "]."
". $ arr [" b "]."
";
Resultado
matriz (5) (["a"] => int (1) ["b"] => int (2)) 1 2Um exemplo de como funciona uma solicitação Ajax usando o método POST
O que nós fazemos:
Verificamos a exatidão dos dados enviados (POST-request AJAX) (os dados são inseridos pelo usuário). Se os dados estiverem corretos, exibimos uma mensagem. Caso contrário, fazemos um destaque vermelho perto dos campos. Tudo funciona de forma assíncrona, ou seja, sem recarregar a página. você pode usar este princípio, por exemplo, para criar um sistema de comentários com a inserção de comentários no banco de dados.
jQuery
$ (document) .ready (function () (var working = false; / * Este sinalizador evita que vários comentários sejam enviados: * / $ ("form"). submit (function (e) (e.preventDefault (); if (trabalhando) return false; working = true; $ ("# submit"). val ("Wait .."); $ (". error"). removeClass ("error"); $ .post ("submit.php ", $ (this) .serialize (), function (msg) (/ * Enviando valores de formulário para submit.php: * / working = false; $ (" # submit "). val (" Submit "); if (msg.status) // Se os dados estiverem corretos, adicione uma mensagem (console.log (msg.status); $ (msg.html) .hide (). InsertBefore ("formulário"). SlideDown ();) else (// Se houver erros, percorra o // objeto msg.errors e exiba-os na página $ .each (msg.errors, function (k, v) ($ ("#" + k) .addClass (" erro "); // alert (k);));))," json ");));));Html
PHP
// aceita os dados recebidos via ajax $ arr = $ _POST; $ arr = $ _POST; if (filter_var ($ arr, FILTER_VALIDATE_EMAIL) && filter_var ($ arr, FILTER_VALIDATE_INT)) (echo json_encode (array ("status" => 1, "html" => "Neste artigo, os exemplos de código que estou usando para enviar pedidos ajax para o servidor via jQuery... Suas tarefas podem ser diferentes, então você pode usar funções diferentes para eles, o que simplifica a escrita do código.
Consultar dados html usando a função Carregar
Esta é a solicitação ajax mais simples via jQuery, buscando dados html e inserindo-os em um elemento dom com id = "result" (o conteúdo do elemento é substituído):
$ ("# resultado"). load ("
Um caso de uso mais avançado para carga:
$ ("# resultado"). load ("
Neste exemplo, os parâmetros também são passados para o servidor, e após o recebimento da resposta, é verificado se houve um erro (por exemplo, nenhuma resposta foi recebida do servidor) e várias ações são realizadas.
Solicitações Ajax com funções GET e POST
Essas funções enviam uma solicitação ajax com os métodos get e post http. Aqui estão alguns exemplos de seu uso.
$ .get ("
A transferência de dados é opcional, assim como a realização de quaisquer ações após o recebimento de uma resposta do servidor, ou seja, neste caso, as linhas 3 e 4-6 podem ser excluídas se necessário e, portanto, encurtar ainda mais o código.
O tipo de dados recebidos do servidor pode ser especificado adicionando dataType (veja abaixo) - por padrão, ele é determinado automaticamente.
O uso de post é semelhante, mas no exemplo a seguir, uso uma chamada de função após receber uma resposta do servidor.
$ .post ("
Na verdade, as funções get e post são versões abreviadas da função ajax, que discutirei a seguir.
Obtendo dados json usando getJSON
getJSON é uma versão abreviada da solicitação ajax usando o método GET e recebendo dados na forma de json. O método é conveniente, por exemplo, obter algum tipo de array com dados e trabalhar com ele.
$ .getJSON (" No lado do servidor, o programa forma uma matriz e a converte em uma string json, por exemplo: $ arr = array (); $ arr = array ("id" => 10, "text" => "linha de teste 1"); $ arr = array ("id" => 20, "text" => "linha de teste 2"); $ arr = array ("id" => 30, "text" => "linha de teste 3"); echo json_encode ($ arr); Da mesma forma, você pode transferir objetos stdClass do servidor convertendo-os em uma string json. Agora vou dar um exemplo de uma solicitação get simples com a função ajax e obter dados html. $ .ajax ((url: " A solicitação ao servidor é feita pelo método get, uma vez que o parâmetro responsável pelo tipo de solicitação, tipo por padrão é igual a GET. Um exemplo de como fazer uma solicitação pela função ajax com a transferência de dados pelo método post e tratamento de eventos. Vou descrever a seguir Opções extras, que são usados com mais frequência. $ .ajax ((url: " Botão Enviar dados:
No exemplo dado, quando o botão é pressionado, o estado do botão muda primeiro (o texto nele muda para "Enviando ..." e se torna inativo), o que é feito usando o parâmetro beforeSend. Em seguida, o pedido é enviado com a transferência dos dados necessários. Depois de receber uma resposta do servidor, o estado do botão volta ao estado anterior (o texto muda para "Enviar", torna-se ativo). A resposta é recebida como dados json. Descreverei brevemente os parâmetros para enviar uma solicitação ajax, que na maioria das vezes pode ser útil: Abaixo estão mais alguns exemplos do uso de solicitações ajax. Exemplo de código de formulário html:
Solicitação de ajax simples via jQuery com função AJAX
Exemplo mais complexo de solicitação ajax via jQuery
url
Endereço de envio de solicitação Ajax
modelo
Método de envio GET pedido ou POST
dados
Dados enviados ao servidor. Pode ser uma string com parâmetros e seus valores no formato par1 = val1 & par2 = val2 & ..., um objeto jQuery, por exemplo, $ ("input") ou outros dados.
tipo de dados
O tipo de dados recebidos do servidor. Pode ser html, json, text, script e xml.
esconderijo
Cache do navegador da solicitação (falso - não armazenar em cache).
assíncrono
Execução assíncrona da solicitação, ou seja, o programa continua a ser executado sem esperar por uma resposta do servidor. Se você especificar false, a solicitação será executada de forma síncrona e a página não responderá a nada até que uma resposta seja recebida do servidor.
processData
Converter os dados enviados para o formato url. Se você deseja que os dados não sejam convertidos, defina como falso. Por exemplo, ao enviar uma imagem para um servidor ou dados xml.
tipo de conteúdo
O tipo de dados transferidos, por padrão "application / x-www-form-urlencoded; charset = UTF-8". Se você especificar false, o tipo não será passado no cabeçalho, o que pode ser necessário, por exemplo, ao enviar uma imagem para o servidor.
antes de enviar
Uma função a ser executada antes de enviar a solicitação ajax.
completo
Uma função a ser executada após receber uma resposta do servidor (com êxito ou não).
sucesso
Uma função a ser executada quando a solicitação for bem-sucedida.
erro
A função a ser executada em caso de erro.
Enviando um formulário com todas as solicitações ajax de dados via jQuery
Código JavaScript:
$ ("# myform"). submit (function (e) (e.preventDefault (); $ .ajax ((type: $ (this) .attr ("method"), url: "
Para evitar que a página recarregue quando você clicar no botão "enviar", primeiro cancele as ações padrão do navegador usando e.preventDefaults () .
No parâmetro de dados, passamos todos os campos do formulário usando $ (this) .serialize ()- esta função converte todas as entradas e seleções em uma string adequada para enviar ao servidor.
Além disso, o parâmetro é usado aqui async: false de modo que até que o formulário seja enviado ao servidor, nada mais possa ser clicado ou feito.
Enviando uma imagem ou arquivo por solicitação ajax via jQuery
A tarefa de enviar um arquivo ou imagem ao servidor sem recarregar a página ocorre com bastante frequência. Neste exemplo, analisarei 2 chips de uma vez: seleção de arquivo pressionando o botão, que pode ser enquadrado como você quiser, e exibindo o progresso ao transferir um arquivo para o servidor com uma solicitação ajax.
o código html será assim:
#addfile (posição: relativa; estouro: oculto; largura: 180px; altura: 34px;) #load_file (posição: absoluto; superior: 0; esquerda: 0; largura: 180px; altura: 34px; tamanho da fonte: 0px; opacidade : 0; filtro: alfa (opacidade: 0);) #load_file: hover (cursor: ponteiro;)
A ideia é que uma entrada padrão seja exibida na parte superior do botão para selecionar um arquivo, mas é completamente transparente e tem as mesmas dimensões do botão. Assim, o usuário vê o botão, mas quando passa o mouse sobre ele, passa o mouse sobre a entrada. Da mesma forma, quando ele clica no botão, a entrada de seleção de arquivo é realmente pressionada. Para não piscar o cursor após selecionar um arquivo, o tamanho da fonte é definido como 0px.
Agora o código javascript para enviar um arquivo ao servidor mostrando o andamento:
$ (function () ($ ("# load_file"). on ("alterar", loadfile);)); function loadfile () ($ ("# addfile span"). html ("0% carregado"); files = $ ("# load_file"). files; var form = new FormData (); form.append ("upload" , arquivos); $ .ajax ((url: "
Ao enviar um arquivo para o servidor, o botão mostrará quantos% já foram transferidos para o servidor. Após a conclusão do download, o nome do botão é retornado como estava e o valor da entrada do arquivo é definido como vazio para que você possa selecionar um novo arquivo novamente.
Um exemplo do lado do servidor em php (a pedido de Eugene):
$ mensagem = ""; if (vazio ($ _ FILES ["upload"] ["nome"]) || $ _FILES ["upload"] == "nenhum") ($ message = "Você não selecionou um arquivo";) else if ($ _FILES ["upload"] ["size"] == 0 || $ _FILES ["upload"] ["size"]> 9437184) ($ message = "O tamanho do arquivo não atende aos padrões (máximo de 9 MB ) ";) else if (($ _FILES [" upload "] [" type "]! =" Imagem / jpeg ") && ($ _FILES [" upload "] [" type "]! =" Imagem / pjpeg ") && ($ _FILES ["upload"] ["type"]! = "Image / gif") && ($ _FILES ["upload"] ["type"]! = "Image / png")) ($ message = " Apenas JPG, imagens GIF podem ser carregadas e PNG. ";) Else if (! Is_uploaded_file ($ _ FILES [" upload "] [" tmp_name "])) ($ message =" Algo deu errado. Por favor, tente enviar o arquivo novamente . ";) else ($ ftype = $ _FILES [" upload "] [" type "]; $ fname =" newname_image. ". ($ ftype ==" imagem / gif "?" gif ": ($ ftype == "image / png"? "png": "jpg")); if (move_uploaded_file ($ _ FILES ["upload"] ["tmp_name"], $ _SERVER ["DOCUMENT_ROOT"]. "/ files /".$ fname )) ($ message = "Imagem carregada com sucesso.";) else ($ message = "Algo deu errado para. Tente enviar o arquivo novamente. ";)) Sair ($ message);
As informações sobre a imagem enviada estarão contidas em $ _FILES ["upload"], porque o arquivo foi adicionado pelo script assim: form.append ("upload", arquivos); Assim, tudo o que é necessário do programa php é verificar se o arquivo corresponde aos parâmetros esperados, transferir o arquivo para pasta desejada(no exemplo, para a pasta de arquivos) sob o nome desejado (no exemplo, newname_image) e retornar uma resposta ao navegador, que no meu exemplo é simplesmente exibida para o usuário pelo comando alert (mensagem);
Existem muitas situações em que é possível e até necessário usar solicitações de ajax, e todas elas não podem ser analisadas aqui. No entanto, se você tiver alguma sugestão, que outros exemplos faz sentido adicionar aqui, escreva nos comentários.
Não posso enviar de forma alguma pedido mais simples para o servlet usando jQuery. Mas ao mesmo tempo, se eu enviar por meio do formulário, tudo funciona como um estrondo. Abaixo está o index.html do qual desejo enviar o nome de usuário. login.js, no qual eu formo a própria solicitação, SerletStore.java o próprio servlet. E a estrutura de todo o projeto.
login.js O único url mais ou menos funcional = "http: // localhost: 8080 / testservlet / post", e eles "/ testservlet / post", "testservlet / post", "/ post," "post" causam um erro 404.
Função addNewVoting () (var xhr = new XMLHttpRequest (); var body = "name =" + encodeURIComponent ("name") + "& surname =" + encodeURIComponent ("surname"); xhr.open ("POST", " http: // localhost: 8080 / testservlet / post ", true) xhr.setRequestHeader (" Content-Type "," application / x-www-form-urlencoded ") xhr.send (body);); function addNewVoting1 () (var user = ("firstName": "vlad") var JSONString = JSON.stringify (user); var url = "http: // localhost: 8080 / testservlet / post"; $ .ajax ((url : url, método: "post", dados: JSONString, contentType: "aplicativo / json", erro: função (mensagem) (var JSONObject = JSON.parse (mensagem); console.log (JSONObject);), sucesso: função (dados) (var JSONObject = JSON.parse (dados); console.log (JSONObject);), cabeçalhos: ("Aceitar": "application / json", "Accept-Language": "en", "Cache-Control ":" idade máxima = 3600 "))););
Quando a segunda função é chamada, ela produz o seguinte:
index.html
ServletStore.java
Import javax.servlet.ServletException; import javax.servlet.annotation.WebServlet; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import java.io.IOException; import java.io.PrintWriter; @WebServlet (name = "post", urlPatterns = "/ post") public class Servlet estende HttpServlet (@Override protected void doGet (HttpServletRequest req, HttpServletResponse resp) lança ServletException, IOException (PrintWriter writer) =; @Override protected void doPost (HttpServletRequest req, HttpServletResponse resp) lança ServletException, IOException (super.doPost (req, resp);))
Estrutura do projeto.
Uma lição na qual usaremos exemplos para criar solicitações AJAX assíncronas simples para o servidor. Usaremos o método GET e o método POST como método de transmissão de solicitações. No servidor, processaremos solicitações usando scripts PHP.
O que é uma solicitação AJAX assíncrona?
A tecnologia AJAX é usada principalmente para fazer solicitações assíncronas ao servidor. Uma solicitação assíncrona é uma solicitação executada em segundo plano e não interfere na interação do usuário com a página.
Ao enviar uma solicitação assíncrona, o navegador (página) não está "congelado", ou seja, com ela, como antes, você pode trabalhar. Mas então como você sabe quando uma resposta virá do servidor. Para determinar isso, você precisa monitorar a propriedade readyState do navegador. Esta propriedade contém um número, por cujo valor você pode julgar em que estágio está o pedido. A tabela a seguir resume os valores básicos da propriedade readyState e seus estados correspondentes.
Aqueles. Acontece que precisamos rastrear quando o valor da propriedade readyState é igual a 4. Isso significa que a solicitação enviada recebeu uma resposta do servidor. O restante dos valores raramente são usados na prática e alguns navegadores podem não suportá-los.
Para determinar em qual estágio a solicitação está, você precisa usar o evento onreadystatechange do objeto XMLHttpRequest. Este evento ocorre sempre que o valor da propriedade readyState é alterado. Portanto, no tratador deste evento (de uma função não nomeada ou nomeada), você pode escrever ações que irão verificar se esta propriedade é igual a 4 e se for, então, por exemplo, exibir a resposta do servidor na página.
Fazer uma solicitação AJAX assíncrona (método GET)
Vamos considerar a criação de uma solicitação AJAX assíncrona usando um exemplo que saudará o usuário e exibirá seu endereço IP após carregar a página.
Para fazer isso, você precisa criar 2 arquivos no servidor em um diretório:
- welcome.html - página HTML que será exibida ao usuário. Na mesma página, colocaremos um script que realizará todas as ações necessárias para que o AJAX funcione no lado do cliente.
- processing.php - arquivo PHP que processará a solicitação no lado do servidor e formará a resposta. Vamos começar o desenvolvimento criando a estrutura básica do arquivo welcome.html.
Um exemplo de trabalho AJAX
Vejamos a sequência de ações que precisam ser realizadas no lado do cliente (em código JavaScript):
- O método pelo qual a solicitação será enviada ao servidor (GET, POST).
- O URL que tratará da solicitação no servidor.
- Tipo de solicitação: síncrono (falso) ou assíncrono (verdadeiro).
- Nome de usuário e senha, se necessário.
Inscreva-se no evento onreadystatechange do objeto XHR e especifique o manipulador como uma função anônima ou nomeada. Depois disso, iremos criar um código dentro desta função que irá verificar o status da resposta e realizar determinadas ações na página. A resposta que vem do servidor está sempre na propriedade responseText.
Além de verificar o valor da propriedade readyState com o número 4, você pode verificar o valor da propriedade status. Esta propriedade determina o status da solicitação. Se for 200, está tudo bem. Caso contrário, ocorreu um erro (por exemplo, 404 - URL não encontrado).
Vamos enviar uma solicitação ao servidor usando o método send ().
Se usarmos o método GET para enviar uma solicitação, passe os dados para o parâmetro este método não faça. Eles são passados como parte do URL.
Se usarmos o método POST para enviar uma solicitação, os dados devem ser passados como um parâmetro para o método send (). Além disso, antes de chamar esse método, você deve definir o cabeçalho Content-Type para que o servidor saiba em qual codificação a solicitação veio e possa descriptografá-la.
Vamos preparar os dados necessários para executar a solicitação no servidor. Se nenhum dado for necessário para executar a consulta no servidor, este estágio pode ser ignorado.
Vamos criar uma variável que conterá uma instância do objeto XHR (XMLHttpRequest).
Vamos configurar a solicitação usando o método open ().
Os seguintes parâmetros são especificados:
Conteúdo do elemento de script:
// 2. Criar uma solicitação de variável var request = new XMLHttpRequest (); // 3. Configurando a solicitação request.open ("GET", "processing.php", true); // 4. Inscrever-se no evento onreadystatechange e processá-lo usando a função anônima request.addEventListener ("readystatechange", function () (// se os estados da solicitação forem 4 e o status da solicitação for 200 (OK) if ((solicitação). readyState == 4) && (request.status == 200)) (// por exemplo, exibe o objeto XHR no console do navegador console.log (request); // e a resposta (texto) recebida do servidor no alert console.log (request.responseText); // obtenha o elemento c id = welcome var welcome = document.getElementById ("welcome"); // substitua o conteúdo do elemento pela resposta do servidor welcome.innerHTML = pedido .responseText;))); // 5. Enviando uma solicitação ao servidor request.send ();
Como resultado, o arquivo welcome.html terá o seguinte código:
Um exemplo de trabalho AJAX
No servidor (usando php):
- Vamos pegar os dados. Se os dados forem enviados por meio do método GET, a partir do array global $ _GET ["nome"]. E se os dados são transferidos usando o método POST, então a partir do array global $ _POST ["nome"].
- Usando esses dados, vamos realizar algumas ações no servidor. Como resultado, obteremos alguma resposta. Vamos repetir.
Fazer uma solicitação AJAX assíncrona (método POST)
Vamos modificar o exemplo acima. Agora a solicitação AJAX para o servidor será executada após clicar no botão. Ele receberá o nome que o usuário inseriu no elemento de entrada e o enviará através do método POST para o servidor. Depois de receber uma resposta do servidor, substitua o conteúdo do elemento div na página por ele.
Um exemplo de trabalho AJAX
