php - 如何使用php调用javascript函数？-6ren

php - 如何使用php调用javascript函数？

转载作者：行者123 更新时间：2023-12-02 19:24:29

26

4

这个问题比我们想象的更复杂。

如果满足某些条件，我需要从 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">&nbsp;
        <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 区域，并删除 document.Ready 语法，以便 header 读取...

<?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 - 如何使用php调用javascript函数？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12191983/

26

4

0

文章推荐： javascript - jQueryUI 和 SlidesJS 冲突

文章推荐： c# - Javascript 执行 .cs 中的代码？

文章推荐： javascript - 指定单击链接时要加载的 xml 文件

详解C语言sscanf()函数、vsscanf()函数、vscanf()函数
C语言sscanf()函数：从字符串中读取指定格式的数据头文件： ?
php - 如何解释at()函数； substr()函数;伪代码中的exist()函数
最近，我有一个关于工作预评估的问题，即使查询了每个功能的工作原理，我也不知道如何解决。这是一个伪代码。下面是一个名为foo()的函数，该函数将被传递一个值并返回一个值。如果将以下值传递给foo函数，
VBS教程：函数-CStr 函数
CStr 函数返回表达式，该表达式已被转换为 String 子类型的 Variant。 CStr(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CSng 函数
CSng 函数返回表达式，该表达式已被转换为 Single 子类型的 Variant。 CSng(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-CreateObject 函数
CreateObject 函数创建并返回对 Automation 对象的引用。 CreateObject(servername.typename [, location]) 参数 serv
VBS教程：函数-Cos 函数
Cos 函数返回某个角的余弦值。 Cos(number) number 参数可以是任何将某个角表示为弧度的有效数值表达式。说明 Cos 函数取某个角并返回直角三角形两边的比值。此比值是
VBS教程：函数-CLng 函数
CLng 函数返回表达式，此表达式已被转换为 Long 子类型的 Variant。 CLng(expression) expression 参数是任意有效的表达式。说明通常，您可以使
VBS教程：函数-CInt 函数
CInt 函数返回表达式，此表达式已被转换为 Integer 子类型的 Variant。 CInt(expression) expression 参数是任意有效的表达式。说明通常，可
VBS教程：函数-Chr 函数
Chr 函数返回与指定的 ANSI 字符代码相对应的字符。 Chr(charcode) charcode 参数是可以标识字符的数字。说明从 0 到 31 的数字表示标准的不可打印的
VBS教程：函数-CDbl 函数
CDbl 函数返回表达式，此表达式已被转换为 Double 子类型的 Variant。 CDbl(expression) expression 参数是任意有效的表达式。说明通常，您可
VBS教程：函数-CDate 函数
CDate 函数返回表达式，此表达式已被转换为 Date 子类型的 Variant。 CDate(date) date 参数是任意有效的日期表达式。说明 IsDate 函数用于判断 d
VBS教程：函数-CCur 函数
CCur 函数返回表达式，此表达式已被转换为 Currency 子类型的 Variant。 CCur(expression) expression 参数是任意有效的表达式。说明通常，
VBS教程：函数-CByte 函数
CByte 函数返回表达式，此表达式已被转换为 Byte 子类型的 Variant。 CByte(expression) expression 参数是任意有效的表达式。说明通常，可以
VBS教程：函数-CBool 函数
CBool 函数返回表达式，此表达式已转换为 Boolean 子类型的 Variant。 CBool(expression) expression 是任意有效的表达式。说明如果 ex
VBS教程：函数-Atn 函数
Atn 函数返回数值的反正切值。 Atn(number) number 参数可以是任意有效的数值表达式。说明 Atn 函数计算直角三角形两个边的比值 (number) 并返回对应角的弧
VBS教程：函数-Asc 函数
Asc 函数返回与字符串的第一个字母对应的 ANSI 字符代码。 Asc(string) string 参数是任意有效的字符串表达式。如果 string 参数未包含字符，则将发生运行时错误。
VBS教程：函数-Array 函数
Array 函数返回包含数组的 Variant。 Array(arglist) arglist 参数是赋给包含在 Variant 中的数组元素的值的列表（用逗号分隔）。如果没有指定此参数，则
VBS教程：函数-Abs 函数
Abs 函数返回数字的绝对值。 Abs(number) number 参数可以是任意有效的数值表达式。如果 number 包含 Null，则返回 Null；如果是未初始化变量，则返回 0。
VBS教程：函数-FormatPercent 函数
FormatPercent 函数返回表达式，此表达式已被格式化为尾随有 % 符号的百分比（乘以 100 ）。 FormatPercent(expression[,NumDigitsAfterD
VBS教程：函数-FormatNumber 函数
FormatNumber 函数返回表达式，此表达式已被格式化为数值。 FormatNumber( expression [,NumDigitsAfterDecimal [,Inc

首页

博学

6Ren·AI

商城

php - 如何使用php调用javascript函数？