Passer des variables Ajax à une fonction Javascript

Version imprimable

Slt a tous je developpe actu un catalogue et je gère les commentaire des utilisateurs sur produits ce qui fonctionne bien, mais jai décidé d'utiliser maintenant AJAX pour le faire mais malheureusement je suis debutant en AJAX et ca me crée un peu d'ennuies pour le moment. J'aimerais passer les variables 'id' et 'pageNumber' a la fonction getReviews() pour quelle puisse les utiliser dans le url

HTML

Code:

1
2
3
4
5
6
7
8
<body>
<ul>
    <li><a class='page-link is-active' data-id=".$prodId." data-link=".$counter.">$counter</a></li>";
    <li><a class='page-link' href='$ver=$counter' data-id=".$prodId." data-link=".$counter.">$counter</a></li>";
</ul>
 
<div id='display_reviews' class="col-md-7"></div>
</body>

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
    $(document).ready(function(){
getReviews();
 
 
 
$(document).on('click', '.paging li a', function(e){
        e.preventDefault();
        var id = $(this).data('id');
        var pageNumber = $(this).data('link');
        $.ajax({
            type: 'GET',
            url: '/mysite/product/?action=getProductReviews&id='+id+'&page='+pageNumber,
            dataType: 'json',
            success: function(response){
                getReviews();
            }
        });
    });
 
function getReviews(){
                $.ajax({
            type: 'GET',
            url: '/mysite/product/?action=getProductReviews&id='+id+'&page='+pageNumber,
            dataType: 'json',
            success: function(response){
                    $('#display_reviews').html(response);
            }
        });
};
    });

18/11/2021, 08h15
darkstar123456

Bonjour,

Quand vous postez votre code, ne le modifiez pas.
De plus, veuillez préciser ce que vous n'arrivez pas à faire. Est-ce que les valeurs sont présentes dans l'URL mais pas côté serveur ? Est-ce que le script construit une URL avec des variables vides ?

Là il y a plein d'erreurs mais on voit bien qu'il s'agit d'une réécriture pour le forum
En effet, le code HTML n'a aucun sens. Il doit probablement s'agir de PHP de base sauf que là, on ne peut pas être sûr des valeurs entrées dans data-id et data-link.
Pour ce qui est de la partie JS, c'est bien l'utilisation de la méthode jQuery data() qu'il faut utiliser. Cependant, ce code ne peut pas fonctionner car le sélecteur commence par .paging, et cette classe n'est pas présente dans le code HTML.

Merci bcp, donc pour donner plus de precisions et pour plus de simplicité, j'aimerais récupérer la valeur des paramètres GET du lien dans ma barre d'adresse a travers AJAX. Donc jai cet URL dans ma barre

URL
http://localhost/mySite/product/?act...ls&id=1&page=1

AJAX

Code:

1
2
3
4
5
6
7
8
9
10
11
function getReviews() {
        $.ajax({
            type: 'GET',
            url: '/mySite/product/?action=getProductReviewsPerPage',
            data: {id : id, page : 1},
            dataType: 'json',
            success: function(response) {
                $('#display_reviews').html(response);
            }
        });
    };

Controller

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<?php
/**
 * product controller
 */
 
 
 
 
 
$action = filter_input(INPUT_GET, 'action');
 
if ($action == NULL) {
        $action = filter_input(INPUT_POST, 'action');
}
 
 
switch ($action) {
 
    case 'getProductReviewsPerPage':
        // prepares product reviews pagination
        $prodId = filter_input(INPUT_GET, 'id', FILTER_SANITIZE_NUMBER_INT);
        $getPageNumber = filter_input(INPUT_GET, 'page', FILTER_VALIDATE_INT);
        // Set the pagination page
        $page = (int) (!isset($getPageNumber) ? 1 : $getPageNumber);
        // maximun reviews displayed for a product per pagination
        $limit = 4;
        $startpoint = ($page * $limit) - $limit;
 
        // Get the product's reviews per pagination
        $reviews = getReviewsPerPagination($prodId, $startpoint, $limit);
 
        if($page == 1) {
            $i = 1;
        }
        else {
            $i = $page * $limit;
        }
            // display the product's reviews
            if (count(array_filter(array($reviews))) > 0){
                $displayReviews = buildProductReviewsPerPagination($reviews, $limit, $page) ;
                echo json_encode($displayReviews);
            }
            else {
                $displayNoReviews = buildEmptyReview() ;
            }
            break;
 
    default:
        break;
}

Vue

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
function buildProductReviewsPerPagination($reviews, $limit, $page)
{   global $settings, $prodId;
 
    $html = '';
    $html .= '<div id="reviews">';
    foreach($reviews as $review){
        $date=date_create($review['created']);
        $reviewDate = date_format($date,"d M, Y");
        $html .= '<ul class="reviews">';
        $html .= '<li>';
        $html .= '<div class="review-heading">';
        $html .= "<h5 class='name'>".$review['username']."</h5>";
        $html .= "<p class='date'>".$reviewDate."</p>";
        $html .= '<div class="review-rating">';
        for ($i = 1; $i <= 5; $i++) {
            $ratingClass = "fa-star-o";
            if($i <= $review['ratingNumber']) {
                $ratingClass = "fa-star";
            }
            $html .= "<i class='fa ".$ratingClass."'></i>";
        }
        $html .= '</div>';
        $html .= '</div>';
        $html .= '<div class="review-body">';
        $html .= "<p>".$review['comments']."</p>";
        $html .= '</div>';
        $html .= '</li>';
 
        $html .= '</ul>';
    }
    //init and call pagination nav at bottom
    $ver = $settings['url']."ibuy_e-commerce/product/?action=product-details&id=${review['product_id']}&page";
    if(reviews_pagination($reviews, $prodId, $ver, $limit, $page)) {
        $html .= "".reviews_pagination($reviews, $prodId, $ver, $limit, $page)."";
    }
    $html .= '</div>';
    return $html;
}

Bonjour,

OK on avance un peu ^^

Qu'est-ce qui fonctionne et qu'est-ce qui ne fonctionne pas dans ce code ?
Parce que, de ce que vois, il y a actuellement 2 problèmes : 1 qui n'était pas là dans le premier code posté et le second c'est la réponse AJAX et son encodage.

Le premier problème est que dans le dernier code envoyé, les variables ne sont pas envoyées par l'URL
Code:

1 2 url: '/mySite/product/?action=getProductReviewsPerPage', data: {id : id, page : 1},
Alors que ce qui était écrit dans le premier code envoyé n'était pas incorrect, et on pourrait l'adapter avec la nouvelle version (ainsi que l'utilisation de data que je trouve beaucoup plus lisible) :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // je créé une variable $this afin d'être sûr de savoir à quoi elle se rapporte plus loin dans l'appel de la fonction $.ajax() var $this = $(this); $.ajax({ type: 'GET', url: '/mysite/product/?action=getProductReviewsPerPage', data: { id: $this.data('id'), pageNumber: $this.data('link'), }, dataType: 'json', success: function(response){ // Attention ici, je ne comprends pas pourquoi ça appellait une nouvelle function AJAX mais ça n'a pas de sens de le faire plusieurs fois à priori // De plus, pour pouvoir insérer l'HTML de cette façon, il faut que la réponse soit de l'HTML et non du JSON $('#display_reviews').html(response); } });
Pour ce qui est de la réponse maintenant.... Après une réponse AJAX, on écrit en général un exit ou un die car on ne souhaite pas récupérer tout le reste qui pourrait être exécuté
De plus, vous définissez dataType: 'json' dans l'appel AJAX et vous faites bien un json_encode() en PHP sauf que dans ce cas présent, il est sûrement plus judicieux d'utiliser dataType: 'html' et de retourner directement la réponse HTML