Передача данных json Localstorage в php sql-запрос через Ajax - PullRequest
Новая
       2

Передача данных json Localstorage в php sql-запрос через Ajax

0 голосов
/ 17 ноября 2018

Я пытаюсь создать функцию «читать позже» (избранное) для моего блога. Я хочу использовать localalstorage, чтобы сохранить postID моих сообщений в блоге (часто очень короткие) в формате json, а затем с помощью простого AJAX (без jquery) POST и php GET показать сообщение о сохранении на одной странице

Я записываю список postID в localalstorage следующим образом save.php: 

<html>
<head>
<style>
.list li {
  cursor: pointer;
}
.list li:hover:after,
.list li.fav:after {
  content: ' \2605';
  color: rgb(255, 203, 0);
}
.list li.fav:hover:after {
  content: ' \2606';
}
</style>
</head>
<body>
<ul class="list">
  <li id="1">PostID1</li>
  <li id="2">PostID2</li>
  <li id="3">PostID3</li>
  <li id="4">PostID4</li>
  <li id="5">PostID5</li>
  <li id="6">PostID6</li>
</ul>
<script>
// get favorites from local storage or empty array
var favorites = JSON.parse(localStorage.getItem('favorites')) || [];
// add class 'fav' to each favorite
favorites.forEach(function(favorite) {
  document.getElementById(favorite).className = 'fav';
});
// register click event listener
document.querySelector('.list').addEventListener('click', function(e) {
  var id = e.target.id,
      item = e.target,
      index = favorites.indexOf(id);
  // return if target doesn't have an id (shouldn't happen)
  if (!id) return;
  // item is not favorite
  if (index == -1) {
    favorites.push(id);
    item.className = 'fav';
  // item is already favorite
  } else {
    favorites.splice(index, 1);
    item.className = '';
  }
  // store array in local storage
  localStorage.setItem('favorites', JSON.stringify(favorites));
});
// local storage stores strings so we use JSON to stringify for storage and parse to get out of storage
</script>

</body>
</html>

Возвращает следующие данные локального хранилища (если я добавлю postID 1 и 2): 

favorites ["1","2"]

С чем я борюсь, так это с тем, как передать данные (угадайте немного AJAX, но я не знаю, как это сделать) на мой запрос, который показывает сообщения.

Если я вставлю значения вручную (см. Переменную $ q, она работает, но я не знаю, как это сделать с простым ajax.

Список сообщений, в котором я хочу, чтобы передаваемые данные находились в файле see-save-posts.php 

<?php require('includes/config.php'); ?>
    <?php
        $q = ("1,2");

            try {

                $stmt = $db->query('SELECT postID, postTitle, postSlug, postDesc, postDate FROM blog_posts_seo WHERE postID IN ('.$q.')  ');
                while($row = $stmt->fetch()){

                    echo '<div>';
                        echo '<h1><a href="'.$row['postSlug'].'">'.$row['postTitle'].'</a></h1>';
                        echo '<p>Posted on '.date('jS M Y H:i:s', strtotime($row['postDate'])).' in ';

                            $stmt2 = $db->prepare('SELECT catTitle, catSlug FROM blog_cats, blog_post_cats WHERE blog_cats.catID = blog_post_cats.catID AND blog_post_cats.postID = :postID');
                            $stmt2->execute(array(':postID' => $row['postID']));

                            $catRow = $stmt2->fetchAll(PDO::FETCH_ASSOC);

                            $links = array();
                            foreach ($catRow as $cat)
                            {
                                $links[] = "<a href='c-".$cat['catSlug']."'>".$cat['catTitle']."</a>";
                            }
                            echo implode(", ", $links);

                        echo '</p>';
                        echo '<p>'.$row['postDesc'].'</p>';             
                        echo '<p><a href="'.$row['postSlug'].'">Read More</a></p>';             
                    echo '</div>';

                }

            } catch(PDOException $e) {
                echo $e->getMessage();
            }
        ?>

Заранее спасибо. Постскриптум Я новичок в этом сообществе, но использую его годами. Обычно я могу найти ответ через функцию поиска, но не в этот раз.

1 Ответ

0 голосов
/ 17 ноября 2018

Итак, я создал div с id сохраненных сообщений.Здесь будут распечатаны сохраненные сообщения, которые мы получаем от вызова AJAX.Я создал функцию с именем getPosts(), которая выполняет AJAX-вызов страницы see-save-posts.php, передавая строку запроса q с избранными идентификаторами.Я вызывал функцию getPosts дважды, один раз, когда страница загружается, и снова, когда вы обновляете избранное.На странице see-saved-posts.php вы должны сделать только одно: получить идентификатор избранного из строки запроса, выполнив следующие действия: $q = $_GET['q'];

Обновление

Я обновил функцию, так что я буду выполнять только вызов AJAX, там есть все избранное.Если все избранное удаляется, оно удаляется из оставшегося со страницы. 

<html>
<head>
    <style>
        .list li {
            cursor: pointer;
        }
        .list li:hover:after,
        .list li.fav:after {
            content: ' \2605';
            color: rgb(255, 203, 0);
        }
        .list li.fav:hover:after {
            content: ' \2606';
        }
    </style>
</head>
<body>
<ul class="list">
    <li id="1">PostID1</li>
    <li id="2">PostID2</li>
    <li id="3">PostID3</li>
    <li id="4">PostID4</li>
    <li id="5">PostID5</li>
    <li id="6">PostID6</li>
</ul>


<div id="saved-posts"></div>


<script>
    // get favorites from local storage or empty array
    var favorites = JSON.parse(localStorage.getItem('favorites')) || [];
    // add class 'fav' to each favorite
    favorites.forEach(function(favorite) {
        document.getElementById(favorite).className = 'fav';
    });

    getPosts(); // calls AJAX to populate with saved posts

    // register click event listener
    document.querySelector('.list').addEventListener('click', function(e) {
        var id = e.target.id,
            item = e.target,
            index = favorites.indexOf(id);
        // return if target doesn't have an id (shouldn't happen)
        if (!id) return;
        // item is not favorite
        if (index == -1) {
            favorites.push(id);
            item.className = 'fav';
            // item is already favorite
        } else {
            favorites.splice(index, 1);
            item.className = '';
        }
        // store array in local storage
        localStorage.setItem('favorites', JSON.stringify(favorites));

        getPosts(); // Call AJAX to repopulate with saved post
    });
    // local storage stores strings so we use JSON to stringify for storage and parse to get out of storage

    function getPosts() {
        if (favorites.length) {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById("saved-posts").innerHTML = this.responseText;
                }
            };
            xhttp.open("GET", "see-saved-posts.php?q=" + favorites, true);
            xhttp.send();
        } else {
            document.getElementById("saved-posts").innerHTML = "";
        }
    }
</script>

</body>
</html>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...