Question

我有一个php文件，可以在我的html页面的头部动态打印脚本。除非数据已发布，否则php不会打印任何内容。一旦我从我的页面上的表单发布数据，我想要刷新php文件，在头部打印脚本。我看起来像这样：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <link href="graph.css" rel="stylesheet" type="text/css" />

    <?php include("graph.php"); ?>
<script src="jquery.js"></script>
<script type="text/javascript"> 
    $(document).ready(function(){
        //On-load defaults                     
        var critSelected = 'sex';      
        $(".criteria#sex").addClass("criteriaSelected");

        //Action for update button
        $("form#update").submit(function() {
            var formData = $("form#update").serialize();
                $.ajax({
                    type: "POST",
                    url: "graph.php",
                    data: formData + "&criteria=" + critSelected,
                    success: function(data){
                        $('div.graph').fadeOut(function(){$('div.graph').html(data).fadeIn();});
                    }
                });
            return false;
        });
    });</script>
</head>

<body>
<form id="update" method="post">
<div class="leftnav" align="center">

    <div id="title" align="center">
        <select name="graphContent" style="width:150px">
            <option value="Age Distribution">Age Distribution</option>
            <!-- <option value="sex">Sex Distribution</option>
            <option value="volvloc">Volume vs. Location</option>
            <option value="treatment">Treatment Distibution</option> -->
        </select>
        <br />
        <br />
    </div>

    <div id="criteria" align="right">
        <br />
        <div class="criteria" name="sex" id="sex" style="float:left">&nbsp;&nbsp;By Sex&nbsp;&nbsp;</div>
        <div class="criteria" name="loc" id="patient_location" style="float:left">&nbsp;&nbsp;By Location&nbsp;&nbsp;</div>
        <div class="criteria" name="type" id="patient_type" style="float:left">&nbsp;&nbsp;In/Out Patient&nbsp;&nbsp;</div><br />
        <br />
    </div>

    <div id="constraints" align="left">
        <br />
        Age Range : &nbsp&nbsp;
        <input type="text" value="0" style="width:30px" name="ageLow" />
        &nbsp;to&nbsp
        <input type="text" value="110" style="width:30px" name="ageHigh" />
        <br />
        <br />
        Location : 
        <input type="checkbox" value="TR" name="tr" />TR 
        <input type="checkbox" value="RO" name="ro" />RO
        <input type="checkbox" value="Tilch" name="tilch" />Tilch<br />
    </div>

    <div class="submit" align="center" style="padding-top:100px">
    <button type="submit" name="submit"><b>Update Graph</b></button>
    </form>
    </div>


</div>

<div class="graph" style="display:none">
    <div id="chart_div"></div>
</div>

</body>

</html>

一旦Ajax函数完成了php帖子，我需要成功用更新的文件替换php include。 graph.php将生成的脚本如下所示：

<script type="text/javascript" src="https://www.google.com/jsapi"></script>
<script type="text/javascript">
  google.load("visualization", "1", {packages:["corechart"]});
  google.setOnLoadCallback(drawChart);
  function drawChart() {
    var data = new google.visualization.DataTable();
    data.addColumn('string', 'Task');
    data.addColumn('number', 'Hours per Day');
    data.addRows(5);
    data.setValue(0, 0, 'Work');
    data.setValue(0, 1, 11);
    data.setValue(1, 0, 'Eat');
    data.setValue(1, 1, 2);
    data.setValue(2, 0, 'Commute');
    data.setValue(2, 1, 2);
    data.setValue(3, 0, 'Watch TV');
    data.setValue(3, 1, 2);
    data.setValue(4, 0, 'Sleep');
    data.setValue(4, 1, 7);

    var chart = new google.visualization.PieChart(document.getElementById('chart_div'));
    chart.draw(data, {width: 450, height: 300, title: 'My Daily Activities'});
  }
</script>

谢谢！

Answer 1

你不能在这里做你想做的事。看起来你想重新加载你的javascript并让它执行。它不会那样做。即使你将新的html放入页面正文中，放在html中的javascript也不会像普通页面加载那样执行。您应该在响应中发回一些json数据并将其发送到最初加载的javascript函数。该函数应输出新图表。

jQUERY刷新包含的PHP文件

1 个答案: