<?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填充数据到页面里面去就好了。
我觉得你可能在想一个问题。就是输出列表问题对吧。这个可以简单做
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){
$("#get_category").html(json['html']);
}
);
