如何使用php调用javascript函数
how to call to javascript function using php?
这个问题比我们想象的要复杂。
如果满足某些条件,我需要从php调用javascript中的函数。
php代码和javascript函数在同一个文件中。
我不需要生成java脚本函数的代码,因为在带有参数的函数中执行是无效的,而且我还需要更改函数的内容。
如何调用php代码中的CreateSVG();
第58行?非常感谢。
我的完整文件如下:
<?php
require_once("includes/initialize.php");
?>
<!DOCTYPE html>
<html>
<head>
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
</head>
<body>
<div id="frame_shape">
<div id="main">
<h2>OOP Class Demo using PHP</h2>
<h2>Drawing shape usinig user parameteres.</h2>
<p>
Please enter two numbers to calculate the area of rectangle or tringle and press submit...
<p>
<form method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>">
<br>width<input type=text name='width'>
<br>height<input type=text name='height'>
<h2>select shape</h2>
<input type="radio" name="shape" value="Rectangle" /> Rectangle
<br><input type="radio" name="shape" value="Tringle" /> Tringle
<br><input type="submit" name="submit" value="Submit Form"><br>
</form>
<br/><br/>
</div>
<div id="retangle">
<div id="svgContainer"></div>
</div>
<div id="Tringle"></div>
<div id="contener">
<?php
echo("<br>");
if (isset($_POST['submit'])) {
if (!empty($_POST['shape'])) {
if ($_POST['shape'] === 'Rectangle') {
// create object of rectangle and calculate it is area
$rect = new Rectangle ($_POST['width'], $_POST['height']);
echo 'rectangle of this size would have the area of ', $rect->GetArea(), "<br />";
//echo '<script type="text/javascript">', 'CreateSVG();', '</script>';
echo '<script>CreateSVG();</script>';
}
else if ($_POST['shape'] === 'Tringle'){
// create object of tringle and calculate it is area by extends
$tri = new Triangle ($_POST['width'], $_POST['height']);
echo 'triangle of this sizes would have the area of ', $tri->GetArea();
}
}
}
?>
</div>
</div>
<script>
$(document).ready(function() {
function CreateSVG(){
var xmlns = "http://www.w3.org/2000/svg";
var boxWidth = <?php echo $_POST['width'];?>;
var boxHeight = <?php echo $_POST['height'];?>;
alert(boxWidth + ' ' + boxHeight);
var svgElem = document.createElementNS (xmlns, "svg");
svgElem.setAttributeNS (null, "viewBox", "0 0 " + boxWidth + " " + boxHeight);
svgElem.setAttributeNS (null, "width", boxWidth);
svgElem.setAttributeNS (null, "height", boxHeight);
svgElem.style.display = "block";
var g = document.createElementNS (xmlns, "g");
svgElem.appendChild (g);
g.setAttributeNS (null, 'transform', 'matrix(1,0,0,-1,0,300)');
// draw linear gradient
var defs = document.createElementNS (xmlns, "defs");
var grad = document.createElementNS (xmlns, "linearGradient");
grad.setAttributeNS (null, "id", "gradient");
grad.setAttributeNS (null, "x1", "0%");
grad.setAttributeNS (null, "x2", "0%");
grad.setAttributeNS (null, "y1", "100%");
grad.setAttributeNS (null, "y2", "0%");
var stopTop = document.createElementNS (xmlns, "stop");
stopTop.setAttributeNS (null, "offset", "0%");
stopTop.setAttributeNS (null, "stop-color", "#ff0000");
grad.appendChild (stopTop);
var stopBottom = document.createElementNS (xmlns, "stop");
stopBottom.setAttributeNS (null, "offset", "100%");
stopBottom.setAttributeNS (null, "stop-color", "#0000ff");
grad.appendChild (stopBottom);
defs.appendChild (grad);
g.appendChild (defs);
// draw borders
var coords = "M 0, 0";
coords += " l 0, 300";
coords += " l 300, 0";
coords += " l 0, -300";
coords += " l -300, 0";
var path = document.createElementNS (xmlns, "path");
path.setAttributeNS (null, 'stroke', "#000000");
path.setAttributeNS (null, 'stroke-width', 10);
path.setAttributeNS (null, 'stroke-linejoin', "round");
path.setAttributeNS (null, 'd', coords);
path.setAttributeNS (null, 'fill', "url(#gradient)");
path.setAttributeNS (null, 'opacity', 1.0);
g.appendChild (path);
var svgContainer = document.getElementById ("svgContainer");
svgContainer.appendChild (svgElem);
}
});
</script>
</body>
</html>
将CreateSVG()Javascript函数移动到HEAD区域,并移除文档。就绪语法,以便标头读取。。。
<?php
require_once("includes/initialize.php");
?>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>OOP Class Demo using PHP by yossi levi.</title>
<script src="http://www.centerwow.com/gotemp/gotemptics.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript">
function CreateSVG() {
/* Add the existing function here */
}
</script>
<style>
body { font-size:20px; background:#00CCFF; }
button { margin:2px; }
/* Styles removed for simplicity */
</style>
</head>
在您的方法中,您试图调用一个尚未定义的函数。
以下示例将对您有所帮助:
<?php
----
----
if (< SOME CONDITION >) {
echo "<script language=javascript>CreateSVG()</script>";
}
----
----
?>
将<?php if (condition) :?>
块放在此函数之间
<?php if (condition): ?>
<script>
$(document).ready(function() {
function CreateSVG(){
var xmlns = "http://www.w3.org/2000/svg";
var boxWidth = <?php echo $_POST['width'];?>;
var boxHeight = <?php echo $_POST['height'];?>;
alert(boxWidth + ' ' + boxHeight);
var svgElem = document.createElementNS (xmlns, "svg");
svgElem.setAttributeNS (null, "viewBox", "0 0 " + boxWidth + " " + boxHeight);
svgElem.setAttributeNS (null, "width", boxWidth);
svgElem.setAttributeNS (null, "height", boxHeight);
svgElem.style.display = "block";
var g = document.createElementNS (xmlns, "g");
svgElem.appendChild (g);
g.setAttributeNS (null, 'transform', 'matrix(1,0,0,-1,0,300)');
// draw linear gradient
var defs = document.createElementNS (xmlns, "defs");
var grad = document.createElementNS (xmlns, "linearGradient");
grad.setAttributeNS (null, "id", "gradient");
grad.setAttributeNS (null, "x1", "0%");
grad.setAttributeNS (null, "x2", "0%");
grad.setAttributeNS (null, "y1", "100%");
grad.setAttributeNS (null, "y2", "0%");
var stopTop = document.createElementNS (xmlns, "stop");
stopTop.setAttributeNS (null, "offset", "0%");
stopTop.setAttributeNS (null, "stop-color", "#ff0000");
grad.appendChild (stopTop);
var stopBottom = document.createElementNS (xmlns, "stop");
stopBottom.setAttributeNS (null, "offset", "100%");
stopBottom.setAttributeNS (null, "stop-color", "#0000ff");
grad.appendChild (stopBottom);
defs.appendChild (grad);
g.appendChild (defs);
// draw borders
var coords = "M 0, 0";
coords += " l 0, 300";
coords += " l 300, 0";
coords += " l 0, -300";
coords += " l -300, 0";
var path = document.createElementNS (xmlns, "path");
path.setAttributeNS (null, 'stroke', "#000000");
path.setAttributeNS (null, 'stroke-width', 10);
path.setAttributeNS (null, 'stroke-linejoin', "round");
path.setAttributeNS (null, 'd', coords);
path.setAttributeNS (null, 'fill', "url(#gradient)");
path.setAttributeNS (null, 'opacity', 1.0);
g.appendChild (path);
var svgContainer = document.getElementById ("svgContainer");
svgContainer.appendChild (svgElem);
}
});
</script>
<?php endif; ?>
在脚本标记的末尾插入此代码。。。
<?php
if (isset($_POST['submit'])) {
if (!empty($_POST['shape'])) {
if ($_POST['shape'] === 'Rectangle') {
echo "CreateSVG();";
}
}
}
?>
像这样。。。正在显示代码的一部分。。。
$("#Tringle").text($("#Tringle").width() +' '+ $("#Tringle").height() );
$("#Tringle").text($("#Tringle").width() +' '+ $("#Tringle").height() +', left: '+ $("#Tringle").position().left +' top: '+ $("#Tringle").position().top);
<?php
if (isset($_POST['submit'])) {
if (!empty($_POST['shape'])) {
if ($_POST['shape'] === 'Rectangle') {
echo "CreateSVG();";
}
}
}
?>
});
</script>
相关文章:
- 创建一个类似链接的按钮,并通过Javascript函数打开一个新的弹出窗口
- 正在全局范围中查找JavaScript函数
- 如何将输入(type=text)从html表单传递到javascript函数
- 如何调用这个匿名 JavaScript 函数
- 通过Ajax将JavaScript函数传递给PHP文件
- 在javascript函数中设置全局变量
- 如何在执行此特定onclick事件时执行JavaScript函数
- 使用javascript函数在页面初始化后加载jquery
- javascript函数同步
- 如何将一个JavaScript函数回调为多个函数
- 在javascript函数中使用php变量
- 代码背后调用一个JavaScript函数的按钮点击-C#
- 将JavaScript函数与HTML分离
- 组合两个javascript函数
- 在 Java 中的 JavaScript 函数中插入 Wicket 值
- javascript函数内部的代码用逗号而不是分号分隔
- href属性内的javascript函数
- 使用html表单中的参数调用JavaScript函数
- 分析Javascript函数中的多个对象
- javascript函数的:和=之间的区别