Wie trenne ich PHP vom HTML-Code?

<code><?php
include "db.php";
if(isset($_POST["category"])){

    $category_query = "SELECT * FROM categories";

    $run_query = mysqli_query($con,$category_query); 
    echo "
    <div class='nav nav-pills nav-stacked'>
    <li class='active'><a href='#'><h4>Categories</h4></a></li>
    ";
if(mysqli_num_rows($run_query)>0){
    
        while($row = mysqli_fetch_array($run_query)){
            $cid = $row["cat_id"];
            $cat_name = $row["cat_title"];
            echo "
<li><a href='#' class='category' cid='$cid'>$cat_name</a></li>
            ";
        }
        echo "</div>";
    }
}
?></code>

<code>//JS
$(document).ready(function() {
    cat();
    function cat() {
        $.ajax({
                url: 'action.php',
                type: 'POST',
                data: {
                    category: 1
                }
            })
            .done(function(data) {
                //console.log(data);
                $("#get_category").html(data);

            });
    }
})</code>

Ich bin PHP-Neuling. Gibt es eine Möglichkeit, Front-End und Back-End zu trennen und den Echo-HTML-Code im JSON-Format zur Verarbeitung an das Front-End zurückzugeben?

Antwortinhalt:

<code><?php
include "db.php";
if(isset($_POST["category"])){

    $category_query = "SELECT * FROM categories";

    $run_query = mysqli_query($con,$category_query); 
    echo "
    <div class='nav nav-pills nav-stacked'>
    <li class='active'><a href='#'><h4>Categories</h4></a></li>
    ";
if(mysqli_num_rows($run_query)>0){
    
        while($row = mysqli_fetch_array($run_query)){
            $cid = $row["cat_id"];
            $cat_name = $row["cat_title"];
            echo "
<li><a href='#' class='category' cid='$cid'>$cat_name</a></li>
            ";
        }
        echo "</div>";
    }
}
?></code>

<code>//JS
$(document).ready(function() {
    cat();
    function cat() {
        $.ajax({
                url: 'action.php',
                type: 'POST',
                data: {
                    category: 1
                }
            })
            .done(function(data) {
                //console.log(data);
                $("#get_category").html(data);

            });
    }
})</code>

Ich bin PHP-Neuling. Gibt es eine Möglichkeit, Front-End und Back-End zu trennen und den Echo-HTML-Code im JSON-Format zur Verarbeitung an das Front-End zurückzugeben?

Mit nur wenigen Codezeilen können Sie Schnittstelle und Logik trennen und MVC implementieren:

<code>/index.php (页面控制器)
if(!defined('ROOT')) define('ROOT', __DIR__);
require ROOT.'/include/common.php';
echo render('index.php'); //输出HTML
echo json_encode(array('Server'=>'PHP')); //输出JSON

/include/common.php (公共操作)
if(!defined('ROOT')) exit();
require ROOT.'/include/funclass.php';

/include/funclass.php (函数和类)
if(!defined('ROOT')) exit();
function render($view) {
    ob_end_clean();    ob_start();
    require ROOT.'/view/'.$view;
    $html = ob_get_contents();
    ob_end_clean(); ob_start();
    return $html;
}

/view/index.php (视图)
require __DIR__.'/header.php'; //if(!defined('ROOT')) exit();
require __DIR__.'/footer.php'; //JS代码一般写在footer.php里</body>前面</code>

<code>PHP中</code>

<code>echo json_encode($html);</code>

<code>前端</code>

<code>success: function(data) {
    $("#get_category").html(data);
}</code>

PHP geht so damit um, legt es in eine separate Datei und js kann diese Datei anfordern

<code><?php
include "db.php";
if(isset($_POST["category"])){

    $category_query = "SELECT * FROM categories";

    $run_query = mysqli_query($con,$category_query); 
    $html="";
    $html.="<div class='nav nav-pills nav-stacked'><li class='active'><a href='#'><h4>Categories</h4></a></li>";
    if(mysqli_num_rows($run_query)>0){   
        while($row = mysqli_fetch_array($run_query)){
            $cid = $row["cat_id"];
            $cat_name = $row["cat_title"];
            $html.="<li><a href='#' class='category' cid='$cid'>$cat_name</a></li>";
        }
        $html.="</div>";
        echo $html;
    }
}
?></code>

Die in der Datenbank gefundenen Daten werden in ein Array konvertiert, unter json_encode ausgegeben und von js aufgerufen. Um die Daten abzurufen, durchläuft js das Array (im Rahmen von Ajax, das den HTML-Code verbindet) und verbindet den HTML-Code dass PHP und HTML vollständig getrennt sind

Ich denke, wir können zunächst festlegen, welche Inhalte wir auf der Startseite anzeigen möchten. Gehen Sie davon aus, dass der Inhalt verfügbar ist und die Seite basierend auf dem Inhalt geschrieben wird. Der Rest sind die Daten, die dem Inhalt entsprechen.
Wie oben erwähnt, stellt PHP eine API-Schnittstelle bereit, die beispielsweise JSON-Daten zurückgibt, und die darin enthaltenen Daten können über Ajax vom Server angefordert werden. Nachdem Sie die Daten erhalten haben, füllen Sie sie einfach mit js in die Seite ein.

Ich denke, Sie denken vielleicht über eine Frage nach. Es ist nur ein Problem mit der Ausgabeliste, oder? Dies kann einfach durch Senden von
Ajax an das Front-End erfolgen. Nachdem das Front-End das JSON-Objekt erhalten hat, kann dies mithilfe der Front-End-Vorlagen-Engine erfolgen. Es wird empfohlen, juicer

zu verwenden

<code><script id="tpl" type="text/template">
    <ul>
        {@each list as it,index}
            <li>${it.name} (index: ${index})</li>
        {@/each}
        {@each blah as it}
            <li>
                num: ${it.num} <br />
                {@if it.num==3}
                    {@each it.inner as it2}
                        ${it2.time} <br />
                    {@/each}
                {@/if}
            </li>
        {@/each}
    </ul>
</script>

Javascript 代码:

var data = {
    list: [
        {name:' guokai', show: true},
        {name:' benben', show: false},
        {name:' dierbaby', show: true}
    ],
    blah: [
        {num: 1},
        {num: 2},
        {num: 3, inner:[
            {'time': '15:00'},
            {'time': '16:00'},
            {'time': '17:00'},
            {'time': '18:00'}
        ]},
        {num: 4}
    ]
};

var tpl = document.getElementById('tpl').innerHTML;
var html = juicer(tpl, data);</code>

Backend:
So geben Sie das JSON-Format zurück: Sie müssen den HTML-Code, den Sie zurückgeben möchten, in ein Array einfügen, zum Beispiel:
$json = array(
'html' => $ html
);

echo $json;

Front-End akzeptiert:
$.ajax(
success: function(json){

<code>$("#get_category").html(json['html']);</code>

}
);