javascript - PHP如何和HTML代码分离？

php中文网

发布时间：2016-09-06 08:57:11

1686人浏览过

来源于php中文网

原创

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

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

            });
    }
})

php是小白，有没有办法前后端分离，把echo的html代码返回json的格式给前端处理？

回复内容：

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

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

            });
    }
})

php是小白，有没有办法前后端分离，把echo的html代码返回json的格式给前端处理？

寥寥几行代码就可以分离界面和逻辑,实现MVC:

/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>前面

PHP中

echo json_encode($html);

前端

success: function(data) {
    $("#get_category").html(data);
}

php作这样处理，单独放到一个文件，js向这个文件请求就可以了

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

数据库里的查出来转成数组，json_encode下输出，js调用，取到数据，js遍历下数组（拼接html的ajax的done里），拼接下html，这样php和html就完全分开了

立即学习“PHP免费学习笔记（深入）”；

我觉得可以先确定前端页面想要展示哪些内容。假设这些内容有了啊，基于这些内容写好页面，剩下的就是这些内容对应的数据。
而php就像楼上所说的，提供一个api接口，比如返回json数据，里面的数据就可以通过ajax来向服务器请求。拿到数据后用js填充数据到页面里面去就好了。

X-Node企业快速建站1.0.6.0801

特色介绍： 1、ASP+XML+XSLT开发，代码、界面、样式全分离，可快速开发 2、支持语言包，支持多模板，ASP文件中无任何HTML or 中文 3、无限级分类，无限级菜单，自由排序 4、自定义版头（用于不规则页面） 5、自动查找无用的上传文件与空目录，并有回收站，可删除、还原、永久删除 6、增强的Cache管理，可单独管理单个Cache 7、以内存和XML做为Cache，兼顾性能与消耗 8、

下载

我觉得你可能在想一个问题。就是输出列表问题对吧。这个可以简单做
ajax给前端后，前端拿到json对象，可以用前端模板引擎来做。推荐你用juicer

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

后端：
要想返回 json 格式：你得把你想要返回的 html 弄到一个数组里面，例如：
$json = array(
'html' => $html
);

echo $json;

前端接受：
$.ajax(
success: function(json){