网页中的不同语言PHP JavaScript Html之间变量传递的

最新推荐文章于 2023-03-31 17:15:44 发布

相惜恨离

最新推荐文章于 2023-03-31 17:15:44 发布

阅读量3.7k

点赞数 2

相关变量的赋值传递————参考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变量。

设置url链接，需要注意的是HTML中嵌套PHP的变量/

然后在testB.php中通过JavaScript显示其值：

var src =document.getElementById("new_id").value = location.href;

二，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设置超链接

//testB.php中获取数据库内容

$hgi = new HttpPostlnf();

四 PHP输出JavaScript内容

该部分比较简单，将php变量放在html的隐匿类型的标签中，然后JavaScript通过document.getElementById("").value来获取标签的值，即可得到PHP的变量值。也可以直接进行PHP与js变量的赋值。

<?php $m =10;?>

var js = 20;

var n = <?php echo $m;?>;

document.write(js+n);

</script>

另外一种代码如下：

<?php

$test = "It's a test!";

var test_js = document.getElementById("test").value;

</script>

<?php

——————————————————————————————————————————————————————————————————————————————‘

附一篇前后端数据交互方法作为扩展阅读 https://github.com/nimojs/blog/issues/13#hash_htmlvalue1

HTML赋值

输出到Element的value或者data—name

同样可以使用js控制和获取

$('input').val();

$('div').data('a);

优点：不占用全局变量，有JS自由获取。

使用建议：

适合传递简单数据，也非常适合多个简单数据与Element绑定关系。

<ul>

<li>nimojs<span data-userid="1">删除</span></li>

</ul>

$('span').on('click',function(){

$.post("/ajax/",$(this).data("userid"),function(data){

})

JS赋值

将数据填充到<script>的JavaScript变量声明中。

var a = "<?php echo $a;?>";

</script>

或者使用Smarty后端模板引擎：

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数据

</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（）实现。

相惜恨离

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
网页中的不同语言PHP JavaScript Html之间变量传递的

相关变量的赋值传递————参考http://blog.csdn.net/eastmount/article/details/43888009#1、HTML超链接传递值首先讲诉通过HTML超链接实现跳转，再通过Javascript实现获取传递的值。代码如下：其中testA.php是超链接，testB.php是获取传递值。testA.php的函数内容值传递
复制链接

扫一扫