Passer des variables Ajax à une fonction Javascript

**Fyoni** · 17/11/2021, 11h33

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 html :

Sélectionner tout - Visualiser dans une fenêtre à part

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>

JS

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
            }
        });
};
    });

**darkstar123456** · 18/11/2021, 08h15

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.

**Fyoni** · 18/11/2021, 13h40

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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 php :

Sélectionner tout - Visualiser dans une fenêtre à part

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;
}

**darkstar123456** · 19/11/2021, 08h29

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

Passer des variables Ajax à une fonction Javascript

jQuery

Discussions similaires

Partager

Partager