似乎 Ajax 是您的问题的解决方案。
使用 jQuery，您可以轻松地更新页面。您甚至可以切换整个样式表，请参阅此问题以获取更多信息
使用 Ajax，您可以向服务器发送调用以更新存储在数据库中的值，而无需刷新页面。有关让 JavaScript 与 PHP 对话的更多信息，请参阅此问题。
例子：
显示的页面让我们称之为index.php：
<?php require_once("ajax.php"); //include your functions ?>
<html>
<head>
<title>Toggle</title>
<!-- include jQuery -->
<script
src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"
type="text/javascript"></script>
<!-- include your javascript -->
<script src="js/functions.js" type="text/javascript"></script>
</head>
<body>
<!-- This div will hold the current album layout -->
<div id="albumLayoutDiv">
<?php
// Gets the album specified in $album['layout'] so it will
// display on page load. This is defined in ajax.php
echo GetAlbumLayout($album['layout']);
?>
</div>
<input id="layout1" type="button" value="layout 1" />
<input id="layout2" type="button" value="layout 2" />
<input id="layout3" type="button" value="layout 3" />
</body>
</html>
如您所见，GetAlbumLayout此处未定义，我已将其移至名为的外部文件ajax.php：
<?php
function GetAlbumLayout($layout) {
if ($layout == 1) {
// UPDATE THE DATABASE TO LAYOUT 1
return $htmlForLayout1; // Display Album Layout 1
} else if ($layout == 2) {
// UPDATE THE DATABASE TO LAYOUT 2
return $htmlForLayout2; // Display Album Layout 2
} else if ($layout == 3) {
// UPDATE THE DATABASE TO LAYOUT 3
return $htmlForLayout3; // Display Album Layout 3
}
}
// Here is where we look at the values that were passed though
// Ajax. Remember the we used POST, and set the values in 'data'?
// You can see all of that here. You get the values by using
// $_POST['key'] = value. In this case I am using "action" to
// determine what PHP function we want to call.
// If 'action' is set from the Ajax call
if(isset($_POST['action']) && !empty($_POST['action'])) {
$action = $_POST['action'];
switch($action) {
// We set action to 'changeLayout' in the Ajax call
case 'changeLayout':
// likewise, we set "layoutNum" to be the number that the
// user clicked on. We access this value in the same was as
// the action
GetAlbumLayout($_POST['layoutNum']);
break;
/*
case 'anotherAction' :
someOtherFunction();
break;
*/
// ...etc... Add more here if you want to perform different
// ajax calls down the road
}
}
?>
现在终于是 Ajax 调用和将其结合在一起的 Javascript functions.js：
// This function fetches the layout number that we want from
// php and updates the "albumLayout" div on the page when
// successful.
function changeLayout(layoutNumber) {
// Start the Ajax call
$.ajax({
// set the url to your ajax.php file. This is what this
// Ajax call will POST to.
url: '/php/ajax.php',
type: 'post',
// the data can be thought of as the paramaters that you can
// use on the PHP side of things. Think of it as a dictionary
// or a map of values. You can pass in anything here that you
// need in PHP to call a function
data: {
action: 'changeLayout', // what we want to do
layoutNum: layoutNumber // the layout that was requested
},
// After we get the results back from PHP, it is stored as a
// string inside of output. Ajax is async - this won't happen
// until the results are received from PHP. In this case, I am
// updating the albumLayout div with the output gathered from
// the PHP function `GetAlbumLayout(layoutNumber)`
success: function(output) {
$('#albumLayout').html(output);
}
});
}
/* document ready waits till the DOM is fully loaded to do anything */
$(document).ready(function() {
// When the user clicks button 1
$('#layout1').click(function() {
changeLayout(1);
});
// When the user clicks button 2
$('#layout2').click(function() {
changeLayout(2);
});
// When the user clicks button 3
$('#layout3').click(function() {
changeLayout(3);
});
});
我没有测试提供的任何代码，但它应该让你朝着正确的方向前进。基本上，您最初使用数据库中的值加载页面。用户将单击页面上的按钮来更改布局。您对服务器进行 Ajax 调用以使用UPDATE数据库的默认值，并返回要在页面上显示的新 HTML。成功后，您将页面上的 HTML 更新为从 PHP 收集的新 HTML。
祝你好运！如果我误解了你的问题，请告诉我。