Обновление информации в PHP без обновления страницы

#javascript #php #json #ajax

Вопрос:

Я надеюсь, что с ними все в порядке! У меня небольшая проблема, все работает идеально, но это не то, что я ищу, эта функция:

 <script>
var previous = null;
var current = null;
setInterval(function() {
    $.getJSON("https://www.casadelpana.com/api/v1", function(json) {
        current = JSON.stringify(json);            
        if (previous amp;amp; current amp;amp; previous !== current) {
            console.log('refresh');
            location.reload();
        }
        previous = current;
    });                       
}, 2000);

При обновлении данных JSON данные обновляются на https://www.casadelpana.com/test но это перезагружает всю страницу. Я понимаю, что это можно сделать с помощью Ajax, я не нашел ничего подобного, где я возвращал бы интересующие меня переменные. Как я могу обновить данные без перезагрузки страницы? Прилагаемый полный код:

     <?php
/*
Template Name: Test
*/
?> 

<?php header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE');
?>
<!DOCTYPE html>

<html <?php language_attributes(); ?>>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Formulario</title>
<title>Probando AP.I</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    var previous = null;
    var current = null;
    setInterval(function() {
        $.getJSON("https://www.casadelpana.com/api/v1", function(json) {
            current = JSON.stringify(json);            
            if (previous amp;amp; current amp;amp; previous !== current) {
                console.log('refresh');
                location.reload();
            }
            previous = current;
        });                       
    }, 2000);   
</script>

</head>
<body>

<?php

$request = wp_remote_get( 'https://api.casadelpana.com/v1' );

if( is_wp_error( $request ) ) {
  return false;
 }
$body = wp_remote_retrieve_body( $request );

         /* mostrar json original 
         print_r($body);   */
    $data = json_decode($body);

    /* mostrar json decode en PHP 
    echo '</br>'; 
      print_r($data);
      echo '</br>'; */


      $vbs = $data->items['0']->valor; // tomar valor del bolivar respecto al dolar
      $vars = $data->items['1']->valor;     // tomar valor del peso ARS respecto al dolar

    $tasaneta = $vbs / $vars;
    $tasacomercial = $tasaneta * 0.85; 

        echo 'Valor del bolivar: '.$vbs.'';
        echo '</br>';
        echo 'Valor del Peso ARS: '.$vars.'';
        echo '</br>';
        echo 'Valor de tasa neta: '.round($tasaneta,0).'';
        echo '</br>';
        echo 'Valor de tasa comercial: '.round($tasacomercial,0).'';



    // Hacer recorrido y obtener todos los valores.
  /* 
  if( ! empty( $data ) ) {

    echo '<ul>';
    foreach( $data->items as $item ) {
        echo '<li>';
            echo '<b>' .$item->nombre. '</b>: ' . $item->valor . '</a>';
        echo '</li>';
    }
    echo '</ul>';
}
  */

?>

</body>
</html>

1. Вы уже используете AJAX здесь, чего не хватает, так это некоторого кода для получения данных, возвращаемых вызовом Ajax, и размещения их на вашей странице — либо путем создания новых HTML-элементов и добавления их на страницу, либо путем обновления содержимого существующих элементов. jQuery и JavaScript имеют множество функций, которые вы можете использовать для достижения этой цели, которые очень хорошо документированы, а также существуют сотни руководств по этой теме. Это не должно быть сложно исследовать.

Ответ №1:

Во-первых, ваш API выдает JSON.

 {
    "items": [{
        "id": "1",
        "nombre": "Bolivar",
        "valor": "3350"
    }, {
        "id": "2",
        "nombre": "Pesos ARS",
        "valor": "41"
    }]
}

Без location.reload(); вы можете сделать вот так.

 $.getJSON("https://www.casadelpana.com/api/v1", function(json) {
        current = JSON.stringify(json);            
        if (previous amp;amp; current amp;amp; previous !== current) {
            console.log('refresh');
            // this will write first item of json to body tag
            $("body").text(json.items[0].nombre   " : "    json.items[0].valor);

        }
        previous = current;
    });

1. У меня проблема со скриптом, неперехваченная ошибка синтаксиса: неожиданный токен онлайн 22. Что это может быть?

2. @IsaacMedrano моя ошибка. Я написал неправильный синтаксис. Должно быть просто вместо .