HTML 코드에서 PHP를 분리하는 방법은 무엇입니까?

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

PHP를 처음 접하는 사람입니다. 프런트엔드와 백엔드를 분리하고 처리를 위해 json 형식의 에코 HTML 코드를 프런트엔드에 반환하는 방법이 있나요?

답글 내용:

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

PHP를 처음 접하는 사람입니다. 프런트엔드와 백엔드를 분리하고 처리를 위해 json 형식의 에코 HTML 코드를 프런트엔드에 반환하는 방법이 있나요?

단 몇 줄의 코드만으로 인터페이스와 로직을 분리하고 MVC를 구현할 수 있습니다.

<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는 이렇게 처리하고 별도의 파일에 넣어두면 js가 이 파일을 요청할 수 있습니다

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

데이터베이스에서 발견된 데이터는 배열로 변환되어 js에 의해 호출되는 json_encode 아래의 출력으로 데이터를 가져옵니다. js는 배열을 순회하고(html을 이어붙이는 ajax 작업에서) html을 이어붙입니다. php와 html은 완전히 분리되어 있습니다

프런트엔드 페이지에 어떤 콘텐츠를 표시할지 먼저 결정할 수 있을 것 같아요. 컨텐츠가 사용 가능하고 컨텐츠를 기반으로 페이지가 작성되었다고 가정하십시오. 나머지는 컨텐츠에 해당하는 데이터입니다.
위에서 언급했듯이 PHP는 json 데이터를 반환하는 등의 API 인터페이스를 제공하며, 내부 데이터는 ajax를 통해 서버에서 요청할 수 있습니다. 데이터를 가져온 후 js를 사용하여 페이지에 데이터를 채우세요.

아마도 질문을 생각하고 계실 것 같은데요. 출력 목록에 문제가 있는 것 뿐이죠?
Ajax를 프런트 엔드로 보낸 후 프런트 엔드는 json 개체를 가져오고 프런트 엔드 템플릿 엔진을 사용하여 이를 수행할 수 있습니다. juicer

사용을 권장합니다.

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

백엔드:
json 형식을 반환하려면: 반환하려는 html을 배열에 넣어야 합니다. 예:
$json = array(
'html' => $ html
);

에코 $json;

프런트엔드 허용:
$.ajax(
성공: function(json){

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

}
);