相关变量的赋值传递————参考http://blog.csdn.net/eastmount/article/details/43888009#
1、HTML超链接传递值
首先讲诉通过HTML超链接<A href=></A>实现跳转,再通过Javascript实现获取传递的值。代码如下:其中testA.php是超链接,testB.php是获取传递值。
testA.php的函数内容
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>值传递</title>
</head>
<body>
<?php
$result=10001;
?>
<A href="testB.php?newid=<?php echo $result; ?>" >跳转链接</A>
</body>
</html>
testB.php代码如下
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>值接收</title>
</head>
<body>
<input id="new_id" type="hidden">
<script language=javascript runat="server">
var src = document.getElementById("new_id").value = location.href;
//alert(src);
var params = src.split('?');
//输出newid=10001中的id
if(params[1]) {
var idparams = params[1].split('=');
}
</script>
<P>输出src完整路径:<script>document.write(src);</script>
<P>输出params[1]获取参数:<script>document.write(params[1]);</script>
<P>输出id值:<script>document.write(idparams[1]);</script>
</body>
</html>
这里面主要涉及到的是一个PHP将变量传递给HTML,以URL展示出来,然后JavaScript通过location.href形式然后获取当前浏览器的url,在拿到刚刚开始的PHP变量。
<a href = "testB.php"?newid=<?php echo $result;?>">跳转链接</a>
设置url链接,需要注意的是HTML中嵌套PHP的变量/
然后在testB.php中通过JavaScript显示其值:
var src =document.getElementById("new_id").value = location.href;
<script>document.write(src);</script>
二,JavaScript变量转换PHP值
如何把前端的值付给PHP通常有几种常见的办法
1,通过Ajax实现js变量付给PHP
JS部分代码
$('button').click(function(){
var js2_101=30;
$.ajax({
type:'GET',
url:"3.php",
data:{text:js2_101},
success: function(data){
alert(data)
}
});
return false;
});
PHP部分代码
$m2_10=$_GET['text'];
$php2=10;
echo $m2_10+$php2."<---JS赋值给php,可以在PHP中进行编程";
一些值得分享和学习的细节:
javascript变量复制给PHP时,因为JavaScript是客户端语言,可以直接在浏览器上运行,php是服务器语言在后台运行,所以js变量不能直接赋值给php。什么是客户端语言,什么是服务器语言呢?其实查看网页源代码我们就可以直接看到js的源代码但是却不能看到php的源代码。
使用ajax定义一个js变量,将变量赋值给data,再将data的参数赋值给php变量。
而PHP能赋值给js php是在服务器端别解析,服务端不会解析JS代码,JS代码和HTML在服务器端都是原样输出的。只有标注PHP能识别的位置,PHP才会去进行解析并执行。而JS则是到了客户端才被客户的浏览器解析。
如果需要把js变量赋值给PHP,这就涉及交互了,就是所谓的提交。因为但凡你在浏览器看到的页面,无论是PHP,ASP,JSP等等,都是HTML文档,本地需要修改服务器端的数据,当然是跟服务器进行交互。而进行交互的中间人就是JS。
2.通过表单GET或者POST方法获取值
通过JavaScript将客户端要传递的数据交给表单中的一个隐匿的标签中,然后以提交表单的形式,PHP通过POST方法获取该数据。
1)mainfunc.js代码:
function func(){
var a = "Javascript变量";
document.getElementById("test").value = a;
}
2)test.php代码。
<?php
if(isset($_POST['sub'])){
$test = $_POST['test'];
echo "<br>".$test."----php变量显示";
}
?>
<form action="" method="post">
<input type="hidden" id="test" name="test"/>
<input type="submit" id="sub" value="变量转换" />
</form>
这段代码先将test表单的value通过js中的document.getElementById改为了var a,然后通过提交表单然后php从提交的表单中获得js中的变量,实际上还是一个url传递变量。
三.超链接实现传递给PHP链接数据库
其实上面讲述的就是如何实现如下的过程
HTML——>超链接——>JavaScript——>PHP——>数据库
实现代码如下
//testA.php设置超链接
<a href ="abc.php?newid=<?php echo $id;?>">超链接</a>
//testB.php中获取数据库内容
$hgi = new HttpPostlnf();
四 PHP输出JavaScript内容
该部分比较简单,将php变量放在html的隐匿类型的标签中,然后JavaScript通过document.getElementById("").value来获取标签的值,即可得到PHP的变量值。也可以直接进行PHP与js变量的赋值。
<script>
<?php $m =10;?>
var js = 20;
var n = <?php echo $m;?>;
document.write(js+n);
</script>
另外一种代码如下:
<?php
$test = "It's a test!";
?>
<input type = "hidden" id = "test" name = "test" value = "<?=$test;?>" />
<script>
var test_js = document.getElementById("test").value;
</script>
<?php
//
?>
——————————————————————————————————————————————————————————————————————————————‘
附一篇前后端数据交互方法作为扩展阅读 https://github.com/nimojs/blog/issues/13#hash_htmlvalue1
HTML赋值
输出到Element的value或者data—name
<input type = "hidden" value = "<?php echo $a;?>" />
<div data-value = "<?php echo $a;?>"</div>
同样可以使用js控制和获取
$('input').val();
$('div').data('a);
优点:不占用全局变量,有JS自由获取。
使用建议:
适合传递简单数据,也非常适合多个简单数据与Element绑定关系。
<ul>
<li>nimojs<span data-userid="1">删除</span></li>
<li>nimo22<span data-userid="2">删除</span></li>
<li>nimo33<span data-userid="3">删除</span></li>
<li>nimo44<span data-userid="4">删除</span></li>
<li>nimo55<span data-userid="5">删除</span></li>
</ul>
<script>
$('span').on('click',function(){
$.post("/ajax/",$(this).data("userid"),function(data){
//
})
})
<script>
JS赋值
将数据填充到<script>的JavaScript变量声明中。
<script>
var a = "<?php echo $a;?>";
</script>
或者使用Smarty后端模板引擎:
<script>
var a = "{$a}";
</script>
优点:传递数据非常方便。前端直接调用$a变量使用数据
缺点
1、为了传递一个字符串数据占用了全局变量$a,当有很多数据需要传输时则会占用很多全局变量。
2、如果返回数据存在换行将会导致JS报错
优化:
可以通过指向的某一个变量存放所有后端返回的内容,最小程度占用全局变量。例:
// PHP 代码
var SERVER_DATA = {
username: {$username},
userid: {$userid},
title: {$title}
}
// 渲染结果
var SERVER_DATA = {
username: "NimoChu",
userid: 1,
title: 'F2E'
}
使用建议:
需要最快速传递给JS并十分确定此数据稳定时,使用此方式。数据格式复杂的建议使用script填充JSON或AJAX获取JSON方法
script填充JSON
什么是JSON ——JSON语法是JavaScript对象表示法语法的子集。
数据子啊名称/值对中
数据有逗号分隔
花括弧保存对象
方括号保存数组
填充JSON数据到<script>标签中,前端通过DOM获取JSON字符创并解析成对象。
<!--PHP 代码-->
<script type="text/json" id="data"><?php echo json_encode($data) ?></script>
<!-- 页面渲染结果 -->
<script type="text/json" id="data">{"username":"nimojs","userid":1}</script>
<script>
var data = JSON.parse($('#data').html());
//{username:"nimojs",userid:1}
</script>
优点:
页面加载完成后就可以获取到数据。不占用全局变量,可传递大量数据集合。
缺点:
数据量特别大是会导致页面初次加载变慢。变慢并不只是文件大小导致的,也因为服务器查询数据并返回合集是需要时间,可使用AJAX获取JSON完成按需加载和加载等待。
使用建议:
适合传递在DOM记在完成时就需要用到大量数据集合。例如:前端控制页面渲染,后端将JSON数据源填充到<script>由前端使用Javascript模板引擎进行页面渲染。
AJAX获取JSON
使用AJAX获取JSON数据
<span id = "showdata">查看资料</span>
<div style="display:none;" id = "box">
<h2>用户信息</h2>
<p id ="info"><img src="loading.gif" /></p>
</div>
$('#showdata').on('click',function(){
$('#box').show();
$getJSON('/ajax/userdata/',function(oData){
$('#info').html('用户民:’ + oData.username + '<br>用户ID:’ +oData.userid);
})
})
这是一个通过AJAX获取用户资料的示例。流程如下:
1、页面上只显示查看资料
2、用户点击查看资料
3、显示用户信息和loading图片
4、想服务器发送获取用户信息和AJAX请求
5、服务器返回JSON字符串,$.getJSON自动将返回的JSON字符串转换为对象
6、填充内容到(p id ="info")
优点:
不占用全局变量和DOM节点,可以自由控制获取数据的触发条件(页面加载完成时,用户点击查看资料时或用户点击某个按钮时)。当开始获取数据时,可使用loading图片占位提示用户数据正在读取。方式页面加载所有数据导致页面加载缓慢。
缺点:
会产生额外的HTTP请求。不能在DOM加载完成以后立即获取。需要发送请求-接受响应。
使用建议:
适合加载非主要信息、设定触发条件(用户点击查看资料时,并提示友好的数据读取等待提示)
——————————————————————————————————————————————————————————————————————————————
所以再次回顾我之前的二维码生成代码,其实我要做的就几件事情,第一件事情就是从表单中读取数据,获得用户的输入,第二个事情将用户输入传入到后台处理 第三个 把返回结果输出到页面
表单可以直接提交,利用action属性,规定表单提交的位置。如果我想做成动态刷新,不需要重新加载的话。
那么我就用ajax实现,ajax实现其实就是要防止表单的提交,也就是在调用onsubmit这个事件的时候,要返回false,然后ajax主要的问题就创建一个XMLHttpRequest对象,然后利用XMLHttpRequest.responseText()实现。