Como recuperar os resultados de chamadas Ajax com javascript

É 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 as situações do mundo real será mais complexa, o processo vai ser o mesmo.

Como trabalhar com a saída padrão

Este exemplo utiliza o DoMath.php script para realizar operações matemáticas 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.

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

O aplicativo executa sua tarefa quando o usuário clicar em adicionar os números, que é um ao controle. 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 o clique evento. O código a seguir mostra como PerformAdd () faz o seu trabalho:

função PerformAdd () {$ ( "#result") .load ( "http: //localhost/DoMath.php", $ ( "#DataEntry") .serialize ()) -}

O exemplo que se coloca a saída de uma com um identidade do resultado. Você acessar este por seu identificador de chamadas e 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 a marca, que tem um identificador de Entrada de dados, e você chamar serialize (), que serializa cada controle que tem um nome atributo atribuído a ele. Ao usar os valores padrão, os dados serializados é val1 = = 2 1val2. Tomados em conjunto, o URL é completa http:? //localhost/DoMath.php val1 = 1val2 = 2.

image0.jpg

Os benefícios de JSON

Trabalhando com XML fornece uma multi-plataforma, solução cross-browser para o armazenamento de 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 depende de 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.

{ "Usuários": [{ "Nome": "George Smith", "Número": 28, "Aniversário": "/ Data (377244000000) /"}, { "Nome": "Amy Jones", "Número": 41, "aniversário": "/ Data (414914400000) /"}, { "Nome": "Sammy Wang", "Número": 33, "aniversário": "/ Data (-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 as 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 as aspas. Em suma, JSON suporta estes tipos de dados:

  • Corda

  • Número

  • boolean

  • 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

O formulário para este exemplo inclui o título e um ao controle. Quando o usuário clica no botão, ele chama ViewData, o qual é mostrado no seguinte código exemplo.

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 olhando para // cada inscrição nas Usuários objeto. $. each (data.Users, função (key, value) {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 a partir 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, itens. utilização itens simplifica o código.

    O próximo passo é processar cada uma das entradas do usuário no usuários matriz encontrada em Test.json. As chamadas em código .cada() e passa data.Users, de modo que o circuito irá processar cada um dos literais de objeto que ele contém. A função anônima recebe um chave e valor par 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á-los 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 string e então transformar esse valor em um número inteiro que contém o número de milissegundos desde 1 de janeiro de 1970.

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

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

    image1.jpg

    Semelhante

    menu