Question

我的代码有问题。代码将显示表但不显示some.php位于名为bin的文件夹中的图形，js也位于该文件夹中我真的不知道为什么当我试着直接看一些时它不起作用。 php图表显示，但当我点击index.php上的按钮没有图表显示，我也试图把bin / js / js链接但它导致一个问题，我不能再点击按钮2有人可以给我想法为什么会发生这种情况？或者有人可以给我一个我可以工作的例子

index.php

<!DOCTYPE html>
<html>
<head>
  <style>
  p { color:red; margin:4px; }
  b { color:blue; }
  </style>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>

</head>
<body>

 <div class="action-button">
    <button id="1" value="1074">Button 1</button>
    <button id="2" value="1074">Button 2</button>
 </div>

  <div id="output"></div>

<script>
    $("button").click(function () {
      var attr = $(this).attr("id");
      var val = $(this).val();

     $.ajax({
     type: "POST",
      url: "bin/some.php",
      data: { lookbookID: attr, type: val }
    }).done(function( html ) {
      $("#output").html(attr + ' - ' +  val + ' - ' + html);
    });
});
</script>
</body>
</html>

some.php

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Raphaël · Analytics</title>
        <link rel="stylesheet" href="demo.css" type="text/css" media="screen">
        <link rel="stylesheet" href="demo-print.css" type="text/css" media="print">
        <script src="js/raphael.js"></script>
        <script src="js/popup.js"></script>
        <script src="js/jquery.js"></script>
        <script src="js/analytics.js"></script>

    </head>
    <body>
<?php 
echo "lookbookID: ".$_POST['lookbookID']." - "; 
echo " type: ".$_POST['type']
?>
        <table id="data">
            <tfoot>
                <tr>
                    <th>1</th>
                    <th>2</th>
                    <th>3</th>
                    <th>4</th>
                    <th>5</th>
                    <th>6</th>
                    <th>7</th>
                    <th>8</th>
                    <th>9</th>
                    <th>10</th>
                    <th>11</th>
                    <th>12</th>
                    <th>13</th>
                    <th>14</th>
                    <th>15</th>
                    <th>16</th>
                    <th>17</th>
                    <th>18</th>
                    <th>19</th>
                    <th>19</th>
                    <th>20</th>
                    <th>22</th>
                    <th>23</th>
                    <th>24</th>
                    <th>25</th>
                    <th>26</th>
                    <th>27</th>
                    <th>28</th>
                    <th>29</th>
                    <th>30</th>
                    <th>31</th>
                </tr>
            </tfoot>
            <tbody>
                <tr>
                    <td>8</td>
                    <td>25</td>
                    <td>27</td>
                    <td>25</td>
                    <td>54</td>
                    <td>59</td>
                    <td>79</td>
                    <td>47</td>
                    <td>27</td>
                    <td>44</td>
                    <td>44</td>
                    <td>51</td>
                    <td>56</td>
                    <td>83</td>
                    <td>12</td>
                    <td>91</td>
                    <td>52</td>
                    <td>12</td>
                    <td>40</td>
                    <td>8</td>
                    <td>60</td>
                    <td>29</td>
                    <td>7</td>
                    <td>33</td>
                    <td>56</td>
                    <td>25</td>
                    <td>1</td>
                    <td>78</td>
                    <td>70</td>
                    <td>68</td>
                    <td>2</td>
                </tr>
                </tbody>
            </table>
           <div id="holder"></div>

    </body>
</html>

Answer 1

您的方法存在两个问题

ajax请求检索整个文档，并且您正尝试在页面中注入该文档。你不应该这样做。
为了安全起见，jQuery .html方法会删除所有JavaScript代码，因此不会执行任何js。

你可以尝试使用

$("#output")[0].innerHtml = attr + ' - ' +  val + ' - ' + html

这可能适用于某些浏览器，但正如我已经注意到的，这是无效的。因为它是一个完整的文档，你可以尝试使用iframe，或修改php只返回一段html而不是完整的文档。

为什么Raphael js Graph无法使用.html（）

1 个答案: