Discussion :

[younes2727]

Bonjour à tous

je vais expliquer mon scénario

j'ai une petite application PHP construit en suivant l'architecture MVC
, j'utilise pour ça AltoRouter pour bien gérer les routes (merci à Mr. Jonathan qui a bien explique son fonctionnement sur son site grafikart)

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
 
 
$router = new Router(VIEW_PATH);
$router
   //->get('/liens', 'nom_fichier', 'nom_la_page')
    ->get('/blog', 'index', 'home')
    ->get('/ajax', 'ajax', 'ajax')
    ->post('/ajax/[*:slug]', 'ajax', 'ajax_') //recherche ajax
    ->get('/contact', 'contact', 'contact')
    ->get('/blog/[*:slug]-[i:id]?/', 'details', 'details')
    ->get('/blog/[*:slug]', 'category', 'category')
    ->run();

,alors j'essaie d'effectuer une recherche à l'aide d'Ajax ,pour cela j'ai la page

ajax.php
==> contient le formulaire de recherche + la partie là où on va visualiser les résultats

<div id="result">

==> cette page est appelée en GET bien sûr (localhost::8090/ajax)

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
31
32
33
34
35
36
37
38
39
40
41
42
 
  <div class="row">
        <div class="col">
            <input type="search" name="search" class="form-control" placeholder="Serach Ajax" aria-label="search" id="search">
        </div>
    </div>
    <small id="searchID" class="form-text text-muted">search in our list of products.</small>
 
 
 
 
    <div id="result">
 
 
 
        <?php
        //dd($_SERVER);
 
        if (isset($_POST['query'])) :
            $searchByTag = $_POST['query'];
 
 
            $querySearch = getProductsQueryAjax();
            $resultSearch = Connection::getPDO()->prepare($querySearch);
            $resultSearch->bindParam(":query", $searchByTag, PDO::PARAM_STR);
            $resultSearch->execute();
            //$resultSearch->setFetchMode(PDO::FETCH_CLASS, Products::class);
            $products = $resultSearch->fetchAll();
 
        ?>
            <div class="row">
                <?php foreach ($products as $product) : ?>
                    <?php require "layouts/card.php" ?>
 
                <?php endforeach ?>
            </div>
 
        <?php endif ?>
 
 
 
    </div>

card.php

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
 
 
        <div class="card col-md-3 my-3 mr-1 ">
            <div class="card-body">
                <h5 class="card-title"><?= esc($product['name']); ?></h5>
                <p class="text-muted"><?= $product['created'] ?></p>
                <p class="card-text"><?= esc($product['description']) ?></p>
                <p class="card-text">
                    <span class="badge badge-pill badge-dark">Price : <?= $product['price'] ?></span>
                    <a href="<?= $router->url('category', ['slug' => $product['category']]) ?>"><span class="badge badge-pill badge-success"><?= $product['category'] ?></span></a>
                </p>
                <a href="<?= $router->url('details', ['slug' => $product['name'], 'id' => $product['id']]) ?>" class="btn btn-primary">See Description</a>
            </div>
        </div>

le script Ajax qui va afficher la partie là où on va visualiser les résultats selon le texte enter dans le formulaire de recherhce

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
 
    $('#search').keyup(function () {
        var query = $(this).val();
        //  console.log( $query);
 
        if (query.length != "") {
 
            $.ajax({
 
                //Data, that will be sent to "ajax.php/slug".
                url: "http://localhost:8090/ajax/" + query,  // La route : post('/ajax/[*:slug]', 'ajax', 'ajax_')
                //AJAX type is "POST".
                method: "POST",
                data: { query: query },
                ddataType: 'html',
                //If result found, this funtion will be called.
                success: function (data) {
                    console.log(data);
                    ///Assigning result to "display" div in "#result" .
                      $('#result').html(data);
 
                   // $('#result').append(JSON.stringify(data));                  
                }
            });
        } else {
            $('#result').append('No results!');
 
        }
 
    });

donc les données seront envoyées POST ==> j'ai crée une route ajax.php mais avec des attributs ajax/[*: slug], c'est la même page juste qu'elle va contenir un attribut de rechecre (la prochaine fois je vais gérer d'autre actions comme ajax/delete, ajax/édit)

Code :

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

1
2
3
 
     ->get('/ajax', 'ajax', 'ajax')
    ->post('/ajax/[*:slug]', 'ajax', 'ajax_') //recherche ajax

le problème rencontré :

les résultats affichés c'est toute une page incluse dans la page originelle avec les résultats (Pièce jointe)


? la question c'est comment afficher juste les résultats dans un div précis, et non pas la page entière

? Dois-je utiliser Json (va envoyer la page entire aussi, testé )

? Est-ce que cette méthode de créer une route pour chaque action POST est de bonne pratique

et vraiment merci pour tout aide ou conseille que j'aie trouvé dans ce forum

[younes2727]

c'est le code de la classe Router qui permet de gérer le système de routage(j'utilise ob_start () et ob_get_clean () pour inclure l'en-tête et le pied de page)

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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
 
<?php
namespace App;
use AltoRouter;
 
class Router
 {
/**
 * @var string
 */
private $viewPath;
/**
 * @var AltoRouter
 */
private $router;
 
public function __construct(string $viewPath)
{
    $this->viewPath = $viewPath;
    //instanci le router
    $this->router = new \AltoRouter();
}
 
public function get(string $url, string $view, ?string $name = null): self
{
    $this->router->map('GET', $url, $view, $name);
    return $this;
}
 
public function post(string $url, string $view, ?string $name = null): self
{
    $this->router->map('POST', $url, $view, $name);
    return $this;
}
 
public function match(string $url, string $view, ?string $name = null): self
{
    $this->router->map('POST|GET', $url, $view, $name);
    return $this;
}
 
public function url($routerName, array $params = [])
{
    return $this->router->generate($routerName, $params);
}
 
 
 
 
public function run(): self
{
    $match = $this->router->match();
    $view = $match['target'] ?: '404';
    $params = $match['params'];
    $router = $this;
 
 
        $layout =  'layouts/default';
        ob_start();
        require $this->viewPath . DIRECTORY_SEPARATOR . $view . '.php';
        $content = ob_get_clean();
        require $this->viewPath . DIRECTORY_SEPARATOR . $layout . '.php';
 
 
    return $this;
}