JS是前端,PHP是后端,后端PHP要获取前端JS的变量,那前端JS可以通过AJAX传输数据给后端PHP.比如登录页面login.php:
if (!defined('APP_ROOT')) define('APP_ROOT', './');
require APP_ROOT.'include/common.php'; // 加载functions.php,验证cookie等
//后端PHP使用if处理各种前端JS发出的"事件/操作/请求",处理完成exit退出
if(isset($_GET['action']) && $_GET['action']==='login') {
if(isset($_POST['name'])
&& isset($_POST['pass'])
&& $_POST['name']==='ele'
&& $_POST['pass']===123) {
$ret['num'] = 0;
$ret['txt'] = '登录成功';
echo json_encode($ret);
exit();
} else {
$ret['num'] = 1;
$ret['txt'] = '登录失败';
echo json_encode($ret);
exit();
}
}
?>
//下面的 "header.php + 登录表单 + footer.php" 可以考虑写一个render函数加载,从而分离界面和上面的逻辑
require 'header.php';
?>
//下面显示登录表单(PHP+HTML+AJAX)
?>
//给登录按钮绑定点击事件
$('.con').on('click', '.login', function(){
$(this).text('正在登录');
var context = this;
$.ajax(
url: 'login.php?action=login',
type: 'POST',
//这里就是JS传输给PHP的变量,可以通过DOM获取
data: 'name='+$('.name').val()+'&pass='+$('.pass').val(),
success: function(data){
var obj = $.parseJSON(data);
console.log(obj);
//JS根据PHP返回值进行相应操作
if(obj.num==0) {
$(context).text(obj.txt);
setTimeout(function(){
//1秒后跳转到首页
window.location.href = '/';
}, 1000);
} else {
$(context).text(obj.txt);
setTimeout(function(){
$(context).text('登录');
}, 1000);
}
}
);
});
require 'footer.php';
?>