Como recuperar os resultados de chamadas ajax com javascript

Video: HTML, CSS, javascript, PHP, AJAX in Aktion

É hora de construir algumas aplicações javascript para ver o que jQuery pode fazer por você quando você está recuperando os resultados de chamadas AJAX. Embora suas situações do mundo real será mais complexo, o processo vai ser o mesmo.

Como trabalhar com a saída padrão

Este exemplo usa o DoMath.php script para executar matemática e alterar apenas o campo de resultado de um formulário em uma página. Você deve usar a sua configuração do servidor para que este exemplo funcione porque o servidor executa o script PHP e, em seguida, retorna o resultado. Usando jQuery faz com que o processo de trabalhar com AJAX significativamente mais fácil. O código a seguir mostra a forma utilizada para esta tarefa.

Video: Ajax Tutorial : Post to PHP File XMLHttpRequest Object Return Data javascript

O exemplo utiliza controlos padrão para entrada de dados. Observe que você deve definir o nome atributos para esses controles, ou o jQuery .serializar () método não irá funcionar. É uma boa idéia para atribuir os valores controles padrão. A saída é uma simples .

Video: O que é javascript e Ajax - 04 - Tudo que você precisa saber antes de estudar programação

A aplicação executa a sua tarefa quando o utilizador clica Adicionar os números, que é um controlo. Esta abordagem fornece uma alternativa ao uso de um botão de envio estilo. No entanto, qualquer abordagem funciona igualmente bem. A vantagem dessa abordagem é que você pode usar uma função chamada, PerformAdd (), para lidar com a clique evento. O código a seguir mostra como PerformAdd () faz o seu trabalho:

funcionar PerformAdd () {$ ("#resultado").carga("http: //localhost/DoMath.php", $ ("#Entrada de dados") .serialize ()) -}

O exemplo que se coloca a saída numa com um identidade do resultado. Você acessa esse por seu identificador e chamada carga() preenchê-lo com informações da fonte desejada. Você fornece a localização da fonte, que é DoMath.php.

O script PHP requer dados de entrada, que você adicionar como um segundo argumento. Para obter os dados, você acessar o

tag, que tem um identificador de Entrada de dados, e você chamar serializar (), que serializa cada controle que tem um nome atributo atribuído a ele. Ao usar os valores padrão, os dados serializados é val1 = 1&val2 = 2. Tomados em conjunto, a URL completa é http:? //localhost/DoMath.php val1 = 1&val2 = 2.

Os benefícios de JSON

Trabalhando com XML fornece uma multi-plataforma, solução cross-browser para armazenar dados que também funciona com praticamente todas as linguagens de programação no planeta. Realmente não é possível obter qualquer mais genérico do que XML. XML pode ser difícil de analisar em uma forma que o computador possa entender. Consequentemente, os desenvolvedores procuraram uma maneira mais fácil para armazenar dados complexos. javascript Object Notation (JSON) é uma das novas soluções.

Como XML, JSON funciona com qualquer plataforma e com qualquer navegador. Usando jQuery faz trabalhar com JSON fácil. Curiosamente, PHP fornece as funções necessárias para traduzir complexos dados PHP em formato JSON.

Como criar os dados JSON

Como o próprio nome indica, JSON se baseia em objetos javascript para armazenar informações. Você realmente usar literais de objeto para armazenar dados.

Este exemplo armazena os dados JSON em disco em um arquivo.

{"Comercial" : [{"Nome" : "George Smith","Número" : 28,"Aniversário": "/ Date (377244000000) /"}, {"Nome" : "Amy Jones","Número" : 41,"Aniversário": "/ Date (414914400000) /"}, {"Nome" : "Sammy Wang","Número" : 33,"Aniversário": "/ Date (-147.380.400.000) /"}]}

Os dados consistem de um grupo de utilizadores. Há três usuários no arquivo. Cada entrada usuário tem os mesmos campos associados: Nome, Número, e Aniversário. Observe que as cordas aparecem entre aspas. Números aparecem sem aspas. JSON na verdade não fornecer suporte para tipos de objetos padrão, de modo que este exemplo usa um dos tipos que você normalmente vê.

Se este arquivo continha um valor booleano, afigura-se como verdade ou falso sem aspas. Em suma, JSON suporta estes tipos de dados:

• Corda

• Número

• boleano

• nulo

Além disso, arquivos JSON suportam dois tipos de estrutura: objeto literal e matriz. Este exemplo demonstra os dois tipos de estrutura para você para que você saiba como lidar com eles em javascript usando jQuery.

Como visualizar a tela de dados JSON

A forma para este exemplo inclui o cabeçalho e um controlo. Quando o usuário clica no botão, ele chama ViewData, o qual é mostrado no seguinte código exemplo.

Video: javascript AJAX make FormData object from HTML form 720p

função ViewData () {// Obter os dados do disco. $. getJSON ("Test.json", Function (data) {// Criar uma matriz para armazenar os itens data.var = [] -.. // analisar os dados por olhar para // cada inscrição nas Usuários objeto $ cada (data.Users, função (tecla , valor) {items.push ("
" + + Value.Name "
" + + Value.Number "
" + (New Date (parseInt (value.Birthday.substr (6)))). ToDateString () + "
") -}) - // Coloque o resultado em uma lista não ordenada $ (`.
`, {Html: items.join (")}) AppendTo ( `body`) -.}) -}

O exemplo começa chamando .getJSON (), que cargas Test.json da unidade e coloca o conteúdo no dados. A função anônima aceita dados como entrada. Para criar a saída para este exemplo, o código cria uma matriz vazia, Unid. utilização Unid simplifica o código.

O próximo passo é para processar cada uma das entradas de utilizador no Comercial matriz encontrado em Test.json. As chamadas em código .cada() e passa- data.Users, de modo que o ciclo irá processar cada uma das literais objeto que ele contém. A função anônima recebe um chave e valor emparelhar para cada uma das entradas do utilizador.

Para acessar cada um dos pares de chave / valor para as entradas literais objeto, você interage com as propriedades adequadas: Nome, Número, e Aniversário. Em processamento Nome e Número é simples - basta passá-las para a saída como é.

Para processar a data de aparência estranha NET, você deve separar a parte do texto da parte numérica do fio e, em seguida, transformar esse valor em um número inteiro que contém o número de milissegundos desde 01 de janeiro de 1970.

Se você deseja fornecer uma data anterior a 1 de janeiro de 1970, você usar um número negativo de milissegundos. O número de milissegundos é usado para criar um Nova data() objeto. As chamadas em código toDateString () para fornecer saída mais agradável-olhando.

Neste ponto, Unid contém três elementos da matriz, cada um dos quais é um tag item da lista contendo dados sobre os utilizadores. O código cria uma nova tag lista ordenada e lugares Unid dentro dele, chamando Junte-se(). A lista resultante é adicionado ao documento atual usando o appendTo () método.