[AJAX][jQuery]dodanie pętli |
[AJAX][jQuery]dodanie pętli |
6.05.2022, 20:48:08
Post
#1
|
|
Grupa: Zarejestrowani Postów: 66 Pomógł: 1 Dołączył: 4.05.2019 Skąd: PHP5.6 Ostrzeżenie: (0%) |
jQuery jest trudniejsze i bardziej skomplikowane niż się wydawało, a wydawało się naprawdę trudne...
Pomijam fakt, że w sieci brak zgrabnego gotowca (jQuery, AJAX, PHP5.6) najprostszego systemu głosowania +/- 1 dla np. komentarza. (albo nie umiem szukać) Na podstawie kilkunastu różnych kodów z Internetu zlepiłem jeden funkcjonalny skrypt, który (po kliknięciu) ma za zadanie: 1. przyznać ocenę +1 (tj. zwiększyć zawczasu, sztucznie licznik aktualnej oceny +1) a) wysłać ID_komentarza z rodzajem_oceny(+/-) do PHP i tam po weryfikacji zrobić Update SQL (po stronie PHP brak problemów) 2. sformatować kolorystycznie kliknięty button "plus" oraz usunąć możliwość kliknięcia w button "minus" za pomocą display:none; 3. wrzucić ocenionego komentarza (tj. ID_komentarza) do localStorage, żeby user wiedział co już ocenił. 4. sprawdzić ID_komentarza z localStorage i jeśli istnieje, to sformatować kolorystycznie na stałe. (tj. do czasu usunięcia pamięci lokalnej www) Generalnie wszystko działa dla jednego komentarza. Siedziałem nad tym dwa dni i jestem pewny, że można to zrobić znacznie lepiej, ale składnia i jej logika mnie dobija więc będę wdzięczny za naprowadzenie w jaki sposób edytować kod, aby wrzucić w jakąś pętle, która automatycznie pobiera i sprawdza (tj. formatuje jeśli oceniono) wszystkie wyświetlone komentarze (tj. ID_komentarza).
|
|
|
6.05.2022, 23:23:58
Post
#2
|
|
Grupa: Zarejestrowani Postów: 859 Pomógł: 177 Dołączył: 29.10.2009 Ostrzeżenie: (0%) |
Cześć,
ja bym zrobił coś takiego: https://jsfiddle.net/nh584c7f/
Kod $(document).ready(function() { //$('[data-element="comment"]:not(.commented) [data-action]') - coś mi ten not nie działa stąd IF niżej $('[data-element="comment"] [data-action]').off('click').on('click', function(commentEvent) { commentEvent.preventDefault(); let currentComment = $(this).closest('[data-element="comment"]'); if (!currentComment.hasClass('commented')) { let action = $(this).attr('data-action'); //tutaj tymczosow zmieniamy liczbę ocen currentComment.find('input').val(parseInt(currentComment.find('input').val()) + (('up' === action) ? 1 : -1)); currentComment.addClass('commented').addClass('commented__'+action); $.ajax({ type: "POST", url: "https://httpbin.org/post", data: { id_koment: currentComment.attr('data-comment-id'), rodzaj: action, csrf: 'test' } }).done(function(data) { //zatwierdzamy liczbę ocen z danymi z backendu //currentComment.find('input').val(data); addCommentToLocalStorage(currentComment.attr('data-comment-id'), action); }); } }); }); if (getCommentFromLocalStorage()) { $.each(getCommentFromLocalStorage(), function(index, comment) { $('[data-element="comment"][data-comment-id="'+comment.commentId+'"]') .addClass('commented') .addClass('commented__'+comment.action); }); } function getCommentFromLocalStorage() { return JSON.parse(localStorage.getItem("id_koment")); } function addCommentToLocalStorage(commentId, action) { let comments = getCommentFromLocalStorage(); if (comments === null) { comments = [{'action': action, 'commentId': commentId}]; } else if (!comments.includes(commentId)) { comments.push({'action': action, 'commentId': commentId}); } localStorage.setItem("id_koment", JSON.stringify(comments)); } Pozdrawiam Ten post edytował aras785 6.05.2022, 23:30:52 |
|
|
7.05.2022, 04:35:30
Post
#3
|
|
Grupa: Zarejestrowani Postów: 66 Pomógł: 1 Dołączył: 4.05.2019 Skąd: PHP5.6 Ostrzeżenie: (0%) |
woow! @aras785, wielkie dzięki za poświęcony czas! nie testowałem Twojego rozwiązania, ale na pierwszy rzut oka wygląda konkretnie w porównaniu do moich wypocin. Mój problem przed chwilą (raczej) rozwiązałem w taki sposób, że inaczej zapisuje na localStorage, a na końcu inaczej odczytuje i generalnie na pierwsze testy wszystko hula jak należy:
Ze wstępnych oględzin amatora wygląda na to, że jedna klasa (.commented) obsługuje formatowanie końcowe dla obu kliknięć, co defacto będzie prowadziło do błędnego kolorowania dla plusa bądź minusa - będę musiał to rozszyfrować aby dodać drugą klase. Zapisujesz też więcej danych w tablicy co jest jak najbardziej spoko, bo można zamknąć się w jednym kluczu, a później łatwo zweryfikować ocenę komentarza bez dodatkowego kombinowania z dwoma kluczami(+/-):
moje rozwiązanie było lżejsze zważając na limit 5242878 znaków dla jednego klucza, ale musiałbym kombinować z dwoma kluczami. ^^
Skrócę Twoją formę do: {a:"d",i:"1"} i z przyjemnością przygarnę cały wzór pod grunt do budowy. A tak jeszcze z ciekawości odnośnie wydajności aplikacji po stronie SQL & PHP.... 1. Lepiej za każdym razem Insertować na nowo i później pojedynczo zliczać każdą ocenę dla ID_kom 2. Czy lepiej Updatować jeden dany ID_kom o oceny? Osobiście obstaje przy rozwiązaniu 2. ale wole się upewnić. Niby insert jest szybszy i można do niego dodać id_usera, który głosował co jest na plus przy statystykach, ale z drugiej strony będzie więcej danych i trzeba będzie liczyć by uzyskać sume ocen, a to też będzie swoje kosztować. Jeszcze raz wielkie dzięki! Ten post edytował phpuser88 7.05.2022, 04:47:52 |
|
|
7.05.2022, 11:16:36
Post
#4
|
|
Grupa: Zarejestrowani Postów: 859 Pomógł: 177 Dołączył: 29.10.2009 Ostrzeżenie: (0%) |
Cześć,
jeśli chodzi o klase .commeted to dodałem jeszcze tam: .commented__up i .commented__down (zmienna action) Co do pytań to zdecydowanie nr. 2, a wydajnością się nie przejmuj, gwarantuje Ci, że przy takich prostych zliczeniach nic będzie to działało błyskawicznie. Zapisuj IP i jakieś nagłówki aby w przyszłości móc ew. blokować spam w komentarzach ps. wrzuciłem tez link do jsfiddle gdzie masz działający przyklad Pozdrawiam |
|
|
10.05.2022, 17:05:35
Post
#5
|
|
Grupa: Zarejestrowani Postów: 66 Pomógł: 1 Dołączył: 4.05.2019 Skąd: PHP5.6 Ostrzeżenie: (0%) |
Cześć,
Taaaak dotarłem do tego z godzine po opublikowaniu posta:
Potencjalne problemy z DDoS'em przy głosowaniu/pisaniu planuje rozwiązać wprowadzając twardy i miękki limit w taki sposób, że stworze osobną tabele z id_user, id_kom, timestamp Miękki limit: to możliwość oddania 20 głosów na każdą godzinę bez problemów, a każdy kolejny głos >20 będzie można oddać 1x/min. Twardy limit: to max. 60 głosów na godzine. Później w ramach rozwoju dorzucę jeszcze sprawdzanie jaki user często osiąga limity żeby sprawdzić != BOT. Twoje rozwiązanie jest jak Graal, którego szukałem przed napisaniem tematu. Konkretne i dość zrozumiałe dla amatora jQuery. Świetny przykład do nauki na start, który rozwiązuje w lepszy sposób aktualne zadanie, dziękówa! Dopisano 10.05.22 & 18:20: Nie wydaje mi się aby był sens tworzenia nowego tematu, skoro kolejne dwa pytania dotyczą tematu. Więc pozwolę sobie dopytać tu (najwyżej @nospor mnie rozstrzela^^). 1. Czy powinienem obawiać się wstrzyknięcia kodu z localStorage do jQuery, który odbiera i później powierzchownie przetwarza zawartość?
Czytałem że niby obróbka json'em jest bezpieczna, ale nie siedzę w JS i nie wiem czy nie trzeba dla pewności czymś dodatkowym tego przefiltrować. Obstawiam że nie trzeba i kilka prób potwierdziło to przekonanie, ale wole zadać głupie pytanie niż później żałować. 2. Rozterka wydajnościowa, przykładowo User klika "plus" i PHP za pomocą Ajax'a robi UPDATE - jeżeli jest zalogowanych 1000 Userów i każdy z nich zacznie updatować baze kilkanaście razy z rzędu, to raczej racjonalnym wydaje się być założenie przymulenia hostingu, mam rację? Czy można ten problem jakoś obejść? istnieją jakieś sposoby? przeszło mi przez myśl by "wysłane głosy" odczytywać z localStorage 1x/10min i robić zbiorowy update, ale to raczej nie rozwiąże problemu. Ostatnio gdzieś czytałem o mechanizmie składowania memory w mysql - może lepiej jest robić tego typu update w tabeli memory, a następnie 1x/24h z tabeli memory do zwykłej(właściwej) tabeli, gdy ma się do dyspozycji 1Ghz + 2GB RAM? doświadczone osoby z pewnością znają odpowiedź, a ja chętnie skorzystam z możliwie jak najwydajniejszego sposobu kosztem wyświetlania aktualnych danych dla usera z opóźnieniem. Tutaj jeszcze rozważam wykupienie kolejnego hostingu i korzystania z dwóch osobnych baz danych na jednym hostingu, gdzie jedna(zewnętrzna) baza będzie odpowiadać za aktualne update i wyświetlanie "ocen" w trybie natychmiastowym, a druga baza odpowiadałaby za inne działania - czy przyniesie to znacznie lepszy rezultat jak się wydaje i czy taka hybryda ma racje bytu? Ten post edytował phpuser88 10.05.2022, 17:20:06 |
|
|
Wersja Lo-Fi | Aktualny czas: 5.06.2024 - 06:11 |