PHP与javascript实现变量交互的示例代码
转载 & & 作者：
以下是对PHP和javascript实现变量交互的一个实例进行了详细的介绍。需要的朋友可以过来参考下
本例是PHP和javascript交互的例子，php中的值赋给js变量中，前提是这个php变量必须有值才行，就算是假分支中。比如php中的$flags在本例中为true，如果js中false语句写成：$title_1.innerHTML = "&?php echo $?&";就会出错，因为$title在php中被赋值为数组尽管在php的flags=="false";$title是一个字符串，情况是$title是数组，而数组在字符串中也是不能直接显示的。 代码如下:&?php$string = "天上and地下";$flags = "";if(strpbrk($string,"and")!=false){&$title = explode("and",$string);&$title_1 = $title[0];&$title_2 = $title[1];&$flags = "true";}else{&$title = $&$flags = "false";}?&—&html 代码如下:&html&&head&&&meta http-equiv=Content-Type content="text/charset=utf-8"&&&title&&/title&&&script type="text/javascript"&&&var display = function(){&&&var flags = "&?php echo $ ?&";&&&var $title_1 = document.getElementById("title_1");&&&var $title_2 = document.getElementById("title_2");&&&if(flags=="true"){&&&&$title_1.innerHTML = "&?php echo $title[0];?&";&&&&$title_2.innerHTML = "&?php echo $title[1];?&";&&&&&&&}&&&if(flags=="false"){&&&&$title_1.innerHTML = "&?php echo $?&";&&&&//虽然这是一个假分支，照理这个$string可以替换成$title,但是虽然只是执行上边的真分支，但是编译的时候&&&&//这个假分支也是必须编译的，所以echo $title是错误的，因为$title是数组，只能是$&&&}&&}&&/script&&/head&&body onload="display()"&&&div id="title_1"&&/div&&&div id="title_2"&&/div&&/body&&/html&
您可能感兴趣的文章:
大家感兴趣的内容
12345678910
最近更新的内容
常用在线小工具最近在做前后端数据交互的尝试，也跳了很多坑，使用的是php+bootstrap-table+js，把一些收获记录在这里，方便查询。
这个小项目，仅有3个文件，分别为：
数据交互实现1：查询
mysql 数据库建表
php查询接口
前端数据展现
mysql 数据库建表
　　数据库名称：crud
　　第一个表名：
　　主键：user_id，自增长排列
//测试php是否可以拿到数据库中的数据
/*echo "44444";*/
//做个路由 action为url中的参数
$action = $_GET['action'];
switch($action) {
case 'init_data_list':
init_data_list();
case 'add_row':
add_row();
case 'del_row':
del_row();
case 'edit_row':
edit_row();
//查询方法
function init_data_list(){
//测试 运行crud.html时是否可以获取到 下面这个字符串
/*echo "56465";*/
$sql = "SELECT * FROM `t_users`";
$query = query_sql($sql);
while($row = $query-&fetch_assoc()){
$data[] = $row;
$json = json_encode(array(
"resultCode"=&200,
"message"=&"查询成功！",
"data"=&$data
),JSON_UNESCAPED_UNICODE);
//转换成字符串JSON
echo($json);
/**查询服务器中的数据
* 1、连接数据库,参数分别为 服务器地址 / 用户名 / 密码 / 数据库名称
* 2、返回一个包含参数列表的数组
* 3、遍历$sqls这个数组，并把返回的值赋值给 $s
* 4、执行一条mysql的查询语句
* 5、关闭数据库
* 6、返回执行后的数据
function query_sql(){
$mysqli = new mysqli("127.0.0.1", "root", "root", "crud");
$sqls = func_get_args();
foreach($sqls as $s){
$query = $mysqli-&query($s);
$mysqli-&close();
return $query;
前端实现：
&!DOCTYPE html&
&meta charset="UTF-8"&
&meta name="viewport" content="width=device-width, initial-scale=1"&
&meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" /&
&!-- 最新版本的 Bootstrap 核心 CSS 文件 --&
&link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&
&!-- Latest compiled and minified CSS --&
&link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.css"&
&!-- jQuery --&
&script type="text/javascript" src="http://code.changer.hk/jquery/1.11.2/jquery.min.js"&&/script&
&script type="text/javascript" src="http://code.changer.hk/jquery/plugins/jquery.cookie.js"&&/script&
&!-- bootstrap-table --&
&link rel="stylesheet" href="http://code.changer.hk/bootstrap-table/1.6.0/bootstrap-table.min.css"&
&script type="text/javascript" src="http://code.changer.hk/bootstrap-table/1.6.0/bootstrap-table.min.js"&&/script&
&style type="text/css"&
padding: 0;
#table&tbody&tr {
cursor: pointer;
#table&tbody&tr&td.bs-checkbox {
vertical-align: middle;
&title&增删改查&/title&
&body style="padding: 50"&
&div class="toolbar1" style="margin-bottom: -43"&
&button id="remove" class="btn btn-danger" disabled&删除&/button&
&button class="btn btn-primary" id="btn"&新建&/button&
&div id="table"&&/div&
&!-- 最新的 Bootstrap 核心 JavaScript 文件 --&
&script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"&&/script&
&!-- Latest compiled and minified JavaScript --&
&script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/bootstrap-table.min.js"&&/script&
&!-- Latest compiled and minified Locales --&
&script src="//cdnjs.cloudflare.com/ajax/libs/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"&&/script&
&script type="text/javascript"&
var $table = $('#table'),
$remove = $('#remove');
$(function() {
searchData();
function prepareDisplayData(data) {
total: data.data.length,
fixedScroll: false,
rows: data.data
function searchData() {
var search_url = "./php/data.php";
//url 中问号后面的参数 action，这个对象就是查询的参数
var dataParam = {
action: "init_data_list"
type: "get",
url: search_url,
data: dataParam,
dataType: 'json',
contentType: 'application/ charset=utf-8',
success: function(data) {
//测试是否可以拿到php中的数据
console.log(data);
//遍历这个数组
if(data.resultCode == <span style="background-color: #f5f5f5; color: #0) {
var itemArr = data.
for(var i = <span style="background-color: #f5f5f5; color: #; i & itemArr. i++) {
var item = itemArr[i];
console.log(item);
//bootstrap-table 组织数据
var displayData = prepareDisplayData(data);
if(displayData.total & <span style="background-color: #f5f5f5; color: #) {
$('#table').bootstrapTable('load', displayData);
console.log("last page or empty.");
error: function(data) {
alert('服务器出错');
$('#table').bootstrapTable({
pagination: true,
sidePagination: 'server', //设置为服务器端分页
pageNumber: <span style="background-color: #f5f5f5; color: #,
pageSize: <span style="background-color: #f5f5f5; color: #,
pageList: [<span style="background-color: #f5f5f5; color: #, <span style="background-color: #f5f5f5; color: #, <span style="background-color: #f5f5f5; color: #, <span style="background-color: #f5f5f5; color: #0],
search: true,
showColumns: true,
showRefresh: true,
columns: [{
field: 'state',
checkbox: true,
field: 'user_id',
title: '用户Id',
width: '<span style="background-color: #f5f5f5; color: #',
align: 'center',
valign: 'middle'
field: 'user_name',
title: '用户名称',
width: '<span style="background-color: #f5f5f5; color: #0',
align: 'center',
valign: 'middle'
field: 'user_age',
title: '用户年龄',
width: '<span style="background-color: #f5f5f5; color: #0',
align: 'center',
valign: 'middle'
field: 'user_sex',
title: '用户性别',
width: '<span style="background-color: #f5f5f5; color: #0',
align: 'center',
valign: 'middle'
field: 'user_add',
title: '编辑',
formatter: forwardFormatter,
width: '<span style="background-color: #f5f5f5; color: #0',
align: 'center',
valign: 'middle'
}).on('page-change.bs.table', function(e, page, size) {
fillData();
}).on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function() {
var tes = !$table.bootstrapTable('getSelections').length
$remove.prop('disabled', !$table.bootstrapTable('getSelections').length);
function forwardFormatter(value, row, index) {
var value = "修改";
return "&a href='#/" + row.user_id + "' class='btn btn-link'&" + value + "&/a&";
实现效果：
&数据交互实现2：删除
在做删除时遇到不少的坑，究其原因是因为对SQL语句不熟悉，对php不熟悉，不过，总结了以下几点，供参考：
delete 返回的参数只能用 $_GET 获取；
delete 返回的参数要放在URL中，不能放在body中；body中的参数是用来查询的；
SQL语句一定要熟练，一步错，步步错；
要在数据库中执行SQL语句检查语句是否执行正确，要使用 Rest Client 测试URL请求是否正确；
//测试php是否可以拿到数据库中的数据
/*echo "44444";*/
//做个路由 action为url中的参数
$action = $_GET['action'];
switch($action) {
case 'init_data_list':
init_data_list();
case 'add_row':
add_row();
case 'del_row':
del_row();
case 'edit_row':
edit_row();
//删除方法
function del_row(){
/*echo "ok!";*/
//接收传回的参数
$rowId = $_GET['rowId'];
$sql = "delete from t_users where user_id='$rowId'";
if(query_sql($sql)){
echo "ok!";
echo "删除失败！";
前端实现JS部分：
var $table = $('#table'),
$remove = $('#remove');
$(function() {
delData();
function delData() {
$remove.on('click', function() {
if(confirm("是否继续删除")) {
var rows = $.map($table.bootstrapTable('getSelections'), function(row) {
//返回选中的行的索引号
return row.user_
$.map($table.bootstrapTable('getSelections'),function(row){
var del_url = "./php/data.php";
//根据userId删除数据,因为这个id就是 传给服务器的参数
var rowId = row.user_
type:"delete",
url:del_url + "?action=del_row&rowId=" + rowId,
dataType:"html",
contentType: 'application/charset=utf-8',
success: function(data) {
$table.bootstrapTable('remove',{
field: 'user_id',
values: rows
$remove.prop('disabled', true);
error:function(data){
alert('删除失败！');
调试方法：
&数据交互实现3：新增
在写php的方法上，我觉得我的方法是有问题的，因为所有的参数，也就是所有的需要新增的数据都是通过 接口以 ？ 后跟参数的方式添加成功的。功能是可以实现，但是如果新增的数据较大，这个方法显示是不可行的，但是还没有找到合适的方法，烦请大侠们指点。
//测试php是否可以拿到数据库中的数据
/*echo "44444";*/
//做个路由 action为url中的参数
$action = $_GET['action'];
switch($action) {
case 'init_data_list':
init_data_list();
case 'add_row':
add_row();
case 'del_row':
del_row();
case 'edit_row':
edit_row();
//新增方法
function add_row(){
/*获取从客户端传过来的数据*/
$userName = $_GET['user_name'];
$userAge = $_GET['user_age'];
$userSex = $_GET['user_sex'];
//INSERT INTO 表名 （列名1，列名2，...）VALUES （'对应的数据1'，'对应的数据2'，...）
// VALUES 的值全为字符串，因为表属性设置为字符串
$sql = "INSERT INTO t_users (user_name,user_age,user_sex) VALUES ('$userName','$userAge','$userSex')";
if(query_sql($sql)){
echo "ok!";
echo "新增成功！";
function query_sql(){
$mysqli = new mysqli("127.0.0.1", "root", "root", "crud");
$sqls = func_get_args();
foreach($sqls as $s){
$query = $mysqli-&query($s);
$mysqli-&close();
return $query;
前端实现JS部分：
html使用了bootstrap 的 modal作为新增时的弹出框
&!--新增弹框--&
&div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"&
&div class="modal-dialog" role="document"&
&div class="modal-content"&
&div class="modal-header"&
&button type="button" class="close" data-dismiss="modal" aria-label="Close"&&span aria-hidden="true"&&&/span&&/button&
&h4 class="modal-title" id="exampleModalLabel"&用户新增&/h4&
&div class="modal-body"&
&form id="listForm" method="post"&
&div class="form-group"&
&label for="userName" class="control-label"&用户名称&/label&
&input type="text" class="form-control" id="userName"&
&div class="form-group"&
&label for="userAge" class="control-label"&用户年龄&/label&
&input type="text" class="form-control" id="userAge"&
&div class="form-group"&
&label class="control-label" for="user-sex"&用户性别&/label&
&div class=""&
&select id="user-sex" class="form-control" name="user-sex" style="width: 100%" &
&option value='-1'&请选择&/option&
&option value='0'&男&/option&
&option value='1'&女&/option&
&div class="modal-footer"&
&button id="close" type="button" class="btn btn-default" data-dismiss="modal"&关闭&/button&
&button id="save" type="button" class="btn btn-primary"&保存&/button&
var $table = $('#table'),
$remove = $('#remove');
$(function() {
searchData();
delData();
$('#save').click(function(){
addData();
function addData(){
var userName = $('#userName').val();
var userAge = $("#userAge").val();
var userSex = $('#user-sex').val() == '0' ? '男' : '女';
var addUrl = "./php/data.php?action=add_row&user_name=" + userName + "&user_age=" + userAge + "&user_sex=" + userS
type:"post",
url:addUrl,
dataType:'json',
contentType:'application/charset=utf-8',
success:function(data){
console.log("success");
error:function(data){
console.log("data");
//添加成功后隐蒧modal框
setTimeout(function(){
$('#exampleModal').modal('hide');
},500);　　　　　　　　　　　　　　//隐藏modal框后重新加载当前页
setTimeout(function(){
searchData();
至此，还没有解决如下问题：
表单验证；
添加多条数据后，php如何接收参数；
新增成功后，在$.ajax的方法中，为什么，新增成功后的其它操作要在 error 这个对象中实现？而不是在 sucess 中实现？
明晚再解决。
阅读(...) 评论()他的最新文章
他的热门文章
您举报文章：
举报原因：
原文地址：
原因补充：
(最多只允许输入30个字)php前后台数据交互是什么意思？_百度知道
php前后台数据交互是什么意思？
我有更好的答案
首先我觉得这里提到的前台，后台并不是特别专业的术语，假如前台指的是用户在页面上看到的数据，后台指的是数据库中存储的数据。php前后台数据交互就是通过php，获取数据库中的数据，以页面的形式展出给用户，同时用户也可以通页面将数据存储到数据当中。
采纳率：68%
就是通过php链接数据库取数据再通过php控制数据在html显示，php就是一个实现html和数据库交互的一个桥梁
为您推荐：
其他类似问题
您可能关注的内容
&#xe675;换一换
回答问题，赢新手礼包&#xe6b9;
个人、企业类
违法有害信息,请在下方选择后提交
色情、暴力
我们会通过消息、邮箱等方式尽快将举报结果通知您。在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。
问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
我的问题是:
1、java有自己的数据库a，php也有自己的数据库b。
2、java和php的数据库表结构不一样
3、现在php要获取java数据库a里面的数据来写入到自己数据库b里面
4、如果java库和php库不在同一个服务器或者在同一个服务器（又该怎么解决这个问题呢？）
5、（java有一条新数据就同时写入到php数据库，有两条就写入两条）或者（不进行时时写入，2小时、5小时这样也可以） 不知道我的问题描述的清楚不清楚，请大侠帮我看看，谢谢了
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
JAVA有新数据插入就推送一条信息到PHP中，PHP接收插入。。。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
我最近做的项目也是对接一个JAVA商城.实现方式 采用HTTP 传送JSON格式的数据..
JAVA方有数据修改或者增加---&调用PHP对外接口(验证IP,验证数据合法性等等........)
PHP同样................
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
因为以前不想用java程序触发php，主要不不太清楚具体如何弄，所以我处理类似的问题的时候是采取下面的方法，如果你对数据同步时间要求不是很高的话。
java插入一条信息，状态为未被数据库b调用
php定时访问一个java的rest api，java调出带有状态标记的数据（未被调用的数据josn）发送给php
php插入成功后，将数据id json串再发回给java api
java将这些id状态标成已经被调用，再验证一下两次发送和接受回来的id号是否一致，如果有出入再把没有insert成功的数据再发送回php，不然就是success。结束
中间把vaildation都考虑清楚，要是api都在内网会比较安全
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
php难道不能先连a，拿到数据后断开a，再连接b，然后更新数据？似乎不存在跨语言问题，即便用的数据库不同类型比如sql server和mysql，同样可以使用pdo等扩展嘛。。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
数据库不存在语言的界限，都是通过网络协议通信的，java或php都可以连接数据库a和b，同时连也可以。如果真的先java和php交互，可以考虑使用thrift RPC框架进行交互。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
通过接口来交互，最好不要直连数据库，发生错误时会导致调试困难。可以使用跨语言的RPC框架来进行交互，Thrift也是一个不错的选择
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
你好，你的问题其实并没有涉及不同编程语言的差异。仅仅是两个数据库，如何做到同一种编程语言同一个进程同时操作呢？这其实没有问题啊，比如java，网上的例子常常只有一个数据库源，而事实上，你完全可以配置两个；我相信Python也是差不多的。
同步到新浪微博
分享到微博？
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：
在 SegmentFault，学习技能、解决问题
每个月，我们帮助 1000 万的开发者解决各种各样的技术问题。并助力他们在技术能力、职业生涯、影响力上获得提升。