Mihkach
@Mihkach
Проектировщик и дизайнер интерфейсов

Как сделать AJAX подгрузку данных из JSON с помощью jQuery?

У меня есть запрос JSON через cURL. Данные приходят, я их разбираю и вывожу в html. По клику на «Load 5 more» страница перезагружается к url добавляется &page=1, данные при этом меняются на новые. Возможно ли сделать точно такой же запрос с помощью JavaScript, но без перезагрузки страницы, используя jQuery.ajax() и jQuery.parseJSON()? Как это сделать?
$url = 'https://api.parse.com/1/functions/getItems';
$page = isset($_GET['page']) ? $_GET['page'] : 0;
$perPage = 5;
$data = array(
    'start' => $page * $perPage,
    'number' => 5,
);

 $MyApplicationId = '1234567890';
 $MyParseRestAPIKey = '0987654321';
 $json = json_encode($data);
 $headers = array(
     'X-Parse-Application-Id: ' . $MyApplicationId ,
     'X-Parse-REST-API-Key: ' . $MyParseRestAPIKey,
     'Content-Type: application/json',
     'Content-Length: ' . strlen($json),
);

$curl = curl_init($url);
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $json);
curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);

$data_get = curl_exec($curl);
$data_in = json_decode($data_get, true);

$name_tb = $data_in['result'][0]['thumbnail']['url'];

foreach($data_in['result'] as $row) {
    echo '<div class="thumbnail_row clearfix">';
    echo '<img src="'. $row['thumbnail']['url'] .'">';
    echo '<div class="alignleft"><h2>'. $row['name'] .'</h2>';
    echo '<div><b>Autor: </b>'. $row['author'] .'</div></div>';
    echo '<a class="button" href="'. $row['file']['url'] .'">Download</a>';
    echo '</div>';
}
$get = array_merge($_GET, array('page' => $page + 1));
$getString = array();
foreach ($get as $p => $v) {
    $getString[] = $p . '=' . $v;
}
echo "<a href='" . $_SERVER['SCRIPT_NAME'] . "?" . implode('&', $getString) . "' class='get_more'>Load 5 more</a>";
  • Вопрос задан
  • 9991 просмотр
Решения вопроса 1
stonedmind
@stonedmind
Политика безопасности браузера не позволит сделать кроссдоменный AJAX запрос (без JSONp). Но вы можете написать функционал на бекенде, который посылает get запрос на внешний ресурс и отдает вам JSON ответа. Этот JSON получайте с помощью AJAX запроса с вашего клиента.
Схема будет работать так: Ваш клиент делает AJAX запрос на ваш сервер. Ваш сервер получает данные по url и прокидывает в ваше приложение через AJAX.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
$.post(url, {page: pageNum}, function(data) {
  //json in data, parse and add to ui
});
//or $.get(...)

Примерно так, там уже править под свои реалии
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы