如何将文件内容从 php 脚本分配给 Jquery 脚本变量？

Question

我想将 html 文件读取到 php 脚本（控制器）中的变量 $shtml。然后将此变量传递给 jQuery 变量，并在 jQuery 中执行具有特定属性搜索的特定 div，即从文件中提取一些数据。我无法将 html 文件内容获取到 jQuery 脚本 - 脚本停止工作。这个怎么做？

更正的问题：

<?php
....// action in Controller
  $filenameHtml = "some.html";
  $file1 = fopen( $filenameHtml, 'r');
  $shtml1 = json_encode( fgets($file1) );
 return $this->render('RecRecipBundle::dish/blue.html.twig', array(
            'shtml1' => $shtml1,
        ));
...
?>

树枝模板：

{% block %}
<script type="text/javascript">

 document.getElementById('click_me').addEventListener( "click", function(event) {
    ( function(event) {
        var filestr = "{{ shtml1 }}" ;
        var parsed = jQuery.parseJSON( filestr ); //if i add this line the script stops working
        //alert ("parsed" + parsed);
        alert(filestr);  // prints : &quot;&lt;!DOCTYPE html PUBLIC &quot;-//W3C//DTD XHTML 1.0 Transitional//EN&quot; &quot;http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd&quot;&gt;
&quot;
        alert(this);
    }).call(document.getElementById('click_me'), event);
});            
</script> {% endblock %}

原问题：

PHP 控制器：

/**
 * Lists all Dish entities.
 *
 * @Route("/blue", name="blue")
 * @Method({"GET", "POST"})
 */
public function blueAction(Request $request)
{

$filenameHtml = "/var/www/RecB1_28/dwnl/Blueberries_raw_nutr.html";
$shtml1 = fgets($file1);

// 它不适用于任何文件读取方法：fread、fscanf、file、file_get_contents

$ans = $request->request->get('ans', ''); // will use later to pass jQuery variable to the php script

( isset($ans) and !is_null($ans) ) ? $ans : ''; // print_r($ans);
( isset($shtml1) and !is_null($shtml1) ) ? $shtml1 : ''; // 

return $this->render('RecRecipBundle::dish/blue.html.twig', array(
        'ans' => $ans,
        'shtml1' => $shtml1,
        'my_php_variable' => "just to check if prints",
    ));
}  //   public function blueAction(Request $request

树枝模板：

{% extends "RecRecipBundle::layout.html.twig" %}

{% block body %}

<!-- works only with 'my_php_variable', if i use 'shtml1' script stops working -->
    <a href="#" id="click_me">Click Me</a>

   <br><br> WORKS:  my_php_variable = {{my_php_variable}} 
    <br><br> WORKS: shtml1= {{shtml1}}
       {# <br><br> WILL USE LATER TO PASS jQUERY variable: ans = {{ ans }}, #}

{% endblock %}

{% block footer %} {% endblock %}        

{% block javascripts %}

<script type="text/javascript">


 document.getElementById('click_me').addEventListener("click", function(event) {
    (function(event) {
        // .html() returns the html as plain text
        var filestr ='{{my_php_variable}}' // script works, alert window pops-out
        //var filestr ='{{shtml1}}' // script does not work, alert window does not pop-out
        //var filestr ='{{shtml1}} '.html(); // script does not work, alert window does not pop-out
        alert(this);
    }).call(document.getElementById('click_me'), event);
});       

</script>

{% endblock %}

Answer 1

将值从 php / twig 传递到 javascript 的最佳方法是将其编码为 json。这样特殊字符将被转义，如果是字符串，该值将用双引号引起来。

因此，在您的 twig 文件中，您可以将值作为 json 传递，然后在 javascript 中对其进行解码。这适用于任何类型的变量，因此您也可以发送数组或对象：

<script type="text/javascript">
    var php_variable = JSON.parse( {{ my_php_variable|json_encode() }} );

    // the rest of your script block
</script>

你也可以在 php 函数中使用json_encode()，而不是在 twig 中，只要你只使用一次。

编辑：根据您的编辑，这是错误的：

var filestr = "{{ shtml1 }}" ;

json_encode() 负责变量的编码 - 并在必要时引用 - 因此您不应手动添加引号。应该是这样的：

var filestr = {{ shtml1 }};