PHP+JavaScript+HTML变量之间赋值及传递

简介:

        本文是最近做WAMP网站的学习知识,这做这个网站过程中需要通过新闻通告的超链接显示相应的具体内容,所以就涉及到一些相关变量赋值传递的内容,包括:HTML超链接传递值通过JavaScript显示、JavaScript变量转换成PHP变量、超链接实现传递给PHP连接数据库(重点)、PHP输出JavaScript内容。

一. HTML超链接传递值


        首先讲述通过HTML超链接<A href=></A>实现跳转,再通过JavaScript实现获取传递的值。代码如下:其中testA.php是超链接,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>
<?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>

        其中核心代码是:
        <A href="testB.php?newid=<?php echo $result; ?>" >跳转链接</A>
        设置URL链接,需要注意的是HTML中嵌套PHP的变量,同时可以与PHP中SQL查询赋值比较下:
        $result=$hgi->doquery('2',"select * from Course_News where CN_Nid='".$_GET['newid']."';"); 
        然后在testB.php中通过JavaScript显示其值:
        var src = document.getElementById("new_id").value = location.href;
        <script>document.write(src);</script>



二. JavaScript变量转换PHP值


        此时已经通过获取了var idparams[1] = 10001,但是我想实现的效果是通过id数据库主键,获取数据库的内容,而数据库的那部分代码如下:
        $result=$hgi->doquery('2',"select * from Course_News where CN_Nid='".$id."';"); 
        所以只需要把$id赋值为JavaScript的var型变量即可。引用 
mingfish2 发表的贴“怎么将js变量赋值给php?”
        由于PHP或Ajax学习较少,所以我没有实现,仅引用别人的方法和思想。通常采用的方法如下:
        1.通过Ajax实现js变量赋值给PHP (引用:http://www.xgllseo.com/?p=3241)
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中进行编程";
        此处我更想分享的是它的一些原理知识:
        JS变量赋值给PHP时,你需要知道JS是客户端语言可以直接在浏览器上运行,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,JS搭起客户与服务器交互的桥梁。
        2.通过表单GET或POST方法获取值
        (参考:http://jingyan.baidu.com/article/fd8044faf3cda05030137a47.html)
        通过Javascript将客户端要传递的数据先交给表单中的一个隐匿的标签中,然后以提交表单的形式,PPHP通过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>

三. 超链接实现传递给PHP连接数据库


        其实上面“一二”讲述的就是如何实现过程如下:
        HTML=>超链接=>JavaScript=>PHP=>数据库
       
由于Ajax没有实现,所以我后来发现一个更简单的方法,就是在超链接设置参数的时候,其实就可以直接获取相关参数,并不需要JavaScript去处理字符串获取相应的值。代码如下:
        //testA.php设置超链接
        <A href="main_right_yk4-1-content.php?newid=<?php echo $id; ?>">超链接</A>
       
//testB.php中获取数据库内容
        $hgi=new HttpPostInf();
        $result=$hgi->doquery('2',"select * from Course_News whereCN_Nid='".$_GET['newid']."';"); 
       
//解析json
        $dj=json_decode($result,true);
       
后面的文章我会讲述PHP和数据库的相关知识,此处你只需要知道如何获取连接即可。由于项目是我和另一个同学完成,他把后台数据库操作都用PHP类封装长好了(采用新浪SAE),所以我前端调用非常方便(采用apache)。该部分可以实现的初步效果如下图所示:
 

四. PHP输出JavaScript内容


        该部分比较简单,将PHP变量放在HTML的隐匿类型的标签中,然后Javascript通过document.getElementById("").value来获取标签的值,即可得到PHP的变量值。也可以直接进行php与js变量的赋值。代码如下:
<script>                 //PHP变量能赋值给JS编程运算
<?php $m=10; ?>          //php的变量$m
var js = 20;             //js变量js
var n=<?php echo $m; ?>; //php值赋值给js变量n
document.write(js+n);    //结果:php的值能赋值给JS变量,并且可以在JS程序中运用
</script>
        该代码输出的结果为30。另一种代码如下:
<?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
    //其它处理
?>

        最后希望文章对大家有所帮助,下一篇想写写WAMP关于数据库方面的知识(Window+Apache+MySQL+PHP)
        (By:Eastmount 2015-2-20 下午4点  http://blog.csdn.net/eastmount/)

目录
相关文章
|
2月前
|
开发框架 JavaScript 前端开发
精选HTML、JavaScript、ASP代码片段集锦
这些代码片段代表了HTML, JavaScript和ASP的基本应用,可被集成到更复杂的项目中。它们注重实用性,并且易于理解,旨在帮助开发者快速开始项目构建或进行学习。尽管ASP不如其他服务器端技术(如Node.js, PHP, Ruby等)现代,但它在遗留系统中仍非常普遍,了解基础仍具有价值。
115 14
|
11月前
|
存储 API PHP
PHP 弱类型变量的实现原理
淘宝商品详情API接口
|
6月前
|
存储 PHP
PHP中如何定义常量以及常量和变量的主要区别
常量和变量在PHP中扮演着不同的角色,各有各的应用场景。常量用于存储不会改变的值,具有全局作用域,定义后在整个脚本中都可以访问。变量则用于存储在程序执行过程中可能改变的值,作用域可以是局部的或全局的。掌握常量和变量的定义和区别,有助于编写出更加清晰、可维护的代码。希望本文能帮助你更好地理解和使用PHP中的常量和变量。
131 20
|
6月前
|
JavaScript 前端开发 开发者
JavaScript基础——JavaScript变量名称命名规范
JavaScript变量命名规范是编写高质量代码的重要部分。通过遵循基本规则、使用常见命名约定并应用最佳实践,可以提高代码的可读性和可维护性。希望本文能帮助开发者在日常编程中更好地理解和应用JavaScript变量命名规范,从而编写出更清晰、更可靠的代码。
299 11
|
8月前
|
人工智能 程序员 UED
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
307 21
【01】完成新年倒计时页面-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
7月前
|
前端开发
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
170 1
【2025优雅草开源计划进行中01】-针对web前端开发初学者使用-优雅草科技官网-纯静态页面html+css+JavaScript可直接下载使用-开源-首页为优雅草吴银满工程师原创-优雅草卓伊凡发布
|
8月前
|
前端开发 JavaScript
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
170 14
【02】v1.0.1更新增加倒计时完成后的放烟花页面-优化播放器-优化结构目录-蛇年新年快乐倒计时领取礼物放烟花html代码优雅草科技央千澈写采用html5+div+CSS+JavaScript-优雅草卓伊凡-做一条关于新年的代码分享给你们-为了C站的分拼一下子
|
8月前
html+js+css实现的建筑方块立体数字时钟源码
html+js+css实现的建筑方块立体数字时钟源码
438 33
|
8月前
|
JavaScript 前端开发 容器
盘点JavaScript中所有声明变量的方式及特性
本文详细介绍了JavaScript中变量定义的多种方式,包括传统的`var`、`let`和`const`,以及通过`this`、`window`、`top`等对象定义变量的方法。每种方式都有其独特的语法和特性,并附有代码示例说明。推荐使用`let`和`const`以避免作用域和提升问题,谨慎使用`window`和`top`定义全局变量,不建议使用隐式全局变量。掌握这些定义方式有助于编写更健壮的JS代码。
139 11
|
10月前
|
存储 移动开发 前端开发
高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容
本文深入探讨了高效的 HTML 与 CSS 编写技巧,涵盖语义化标签、文档结构优化、CSS 预处理、模块化设计、选择器优化、CSS 变量、媒体查询等内容,旨在提升开发效率、网站性能和用户体验。
265 5