加载图表连接到mysql没有刷新页面使用php和javascript

我是新来的。我的程序有问题。

客户端希望图表在打开页面时加载所有数据，然后如果用户在查询输入框中只根据barangay输入，则更改图表的值。

以下是我的代码。

下面的代码使我的表单和它的字段一起图像，我的图表将被张贴。

<form id="frmProtection" name="frmProtection" action="#" method="post" class="center">
    <table class="center">
        <tr>
            <td class="searchBox">
                <input list="brgy" id="searcher" name="filterBRGY" placeholder="Type Barangay..." autocomplete="off"/><br><br>
                <?php    
                  $query="SELECT barangay FROM  `brgy`";
                  $result=mysqli_query($con,$query)or die("Couldn't execute query.");
                  $log=mysqli_fetch_assoc($result);
                ?>
                  <datalist id='brgy'>
                    <option value="<?php 
                                  echo $log['barangay'];
                                  ?>">
                    <?php 
                      while($log=mysqli_fetch_assoc($result)){
                    ?>
                      <option value="<?php echo $log['barangay']; ?>">
                    <?php 
                      }
                    ?>
                  </datalist>
            </td>
            <td>
                <input onclick = "subForm(); return false;" type="submit" name="btnSub" id="btnSub" value="Generate Report"/>
            </td>
        </tr>
    </table>
</form>
<div class="container">
    <table class="center">
        <tr>
            <td>
                <img id="protBar" width="500" height="200" alt="Child Protection Per Age Level - Numerical">
            </td>
            <td>
                <!--<img src="protectionPie.php" width="500" height="200" alt="Child Protection Per Age Level - Percentage">-->
            </td>
        </tr>
    </table>
</div>

—在这里是我的javascript代码，调用php文件protectionBar.php生成我的图表取决于用户的输入。

<script>
function subForm()
{
    $(document).ready(function()
{
     $('#btnSub').click(function(e)
    {
        //e.preventDefault();
        var id = $("#searcher").val();
        $.ajax({
            url: 'charts/protectionBar.php',
            type: 'POST',
            dataType: "html",
            data: { id: id },
            success: function(data)
            {
                $('#protBar').attr('src', data);
            }
        })
    });
 });
}

编辑

抱歉没有张贴我的问题。我的代码是这样的。当我在搜索输入框中输入文本并在第一次尝试时单击提交按钮时，图表被完美加载。但是，如果我再次在搜索框中输入另一次尝试，然后再次单击按钮，则不会加载图表。没有变化，我不知道发生了什么。抱歉，我是jQuery新手。我想，我在jQuery中缺少代码，但我不知道它是什么。

另一个编辑以下代码是protectionBar.php所做的:

<?php
/* Include all the classes -these are classes from pChart*/
include("class/pDraw.class.php");
include("class/pImage.class.php");
include("class/pData.class.php");
//this is where my connection properties goes
include('../config.inc.php');
/* Creating my dataset object */
$myData = new pData();
/* Build the query that will returns the data to graph */
if(isset($_POST['id']))
{
    $idVar = $_POST['id'];
    $str = "SELECT TA.childNumber, TA.ageGroup, TA.totalAbused,CI.brgy FROM `totalabused` TA
            INNER JOIN `child_information` CI ON CI.childNumber=TA.childNumber
     WHERE CI.brgy LIKE '%".$idVar."%'";
}
else {
    $str = "SELECT childNumber, ageGroup, totalAbused FROM `totalabused`";
}
$result=mysqli_query($con,$str) or die("Couldn't execute query.");
//initializing my variables for charting
$abused_6_8=0;
$abused_9_11=0;
$abused_12_14=0;
$abused_15_17=0;
$abused_18_21=0;
$abused_22_24=0;
while($rows=mysqli_fetch_assoc($result)){
    //count numbers of total abused per age group
    if ($rows["ageGroup"]=="6-8"){
        $abused_6_8+=$rows["totalAbused"];
    }
    if ($rows["ageGroup"]=="9-11"){
        $abused_9_11+=$rows["totalAbused"];
    }
    if ($rows["ageGroup"]=="12-14"){
        $abused_12_14+=$rows["totalAbused"];
    }
    if ($rows["ageGroup"]=="15-17"){
        $abused_15_17+=$rows["totalAbused"];
    }
    if ($rows["ageGroup"]=="18-21"){
        $abused_18_21+=$rows["totalAbused"];
    }
    if ($rows["ageGroup"]=="22-24"){
        $abused_22_24+=$rows["totalAbused"];
    }
}
/* Saving the data in the pData array >>it is a class created by pChart*/
$myData->addPoints(array($abused_6_8,$abused_9_11,$abused_12_14,$abused_15_17,$abused_18_21,$abused_22_24));
$myData->addPoints(array("6 - 8", "9 - 11","12 - 14","15 - 17","18 - 21","22 - 24"),"Age_Range");
/* Put the totalAbused column on the abscissa axis */
$myData->setAbscissa("Age_Range");
/* Create a pChart object and associate your dataset */
$myPicture = new pImage(700,300,$myData);
/* Draw the background */ 

$设置=阵列(R => 170,"G"=> 183,"B"=> 87,"冲刺"=> 1,"DashR"=> 190年"DashG"=> 203年"DashB"=> 107);

myPicture -> drawFilledRectangle(0 0700300美元设置);$ TextSettings =阵列("DrawBox"=> TRUE,"BoxRounded"=> TRUE, " R " => 130,"G"=> 2,"B"=> 2,"角"=> 0,"字体名"=>"字体/Bedizen.ttf"、"字形大小"=> 20);

$ myppicture ->drawText(250,30，" abuse PER AGE LEVEL"，$TextSettings);

/*叠加渐变*/$设置=阵列("StartR"=> 219年"StartG"=> 231年"StartB"=> 139年"EndR"=> 1,"EndG"=> 138年"EndB"=> 68年"α"=> 50);myPicture -> drawGradientArea (DIRECTION_VERTICAL 0, 0700300年,设置美元);

/*为图片添加边框*/myPicture -> drawRectangle(0 0699299数组(R => 0,"G"=> 0,"B"=> 0));

/* Choose a nice font */
$myPicture->setFontProperties(array("R"=>255,"G"=>255,"B"=>255,"FontName"=>"fonts/Forgotte.ttf","FontSize"=>16));
/* Define the boundaries of the graph area */
$myPicture->setGraphArea(60,40,670,270);
/* Draw the scale */ 
$scaleSettings = array("GridR"=>200,"GridG"=>200,"GridB"=>200,"DrawSubTicks"=>TRUE,"CycleBackground"=>TRUE); 
$myPicture->drawScale($scaleSettings); 
/* Turn on shadow computing */  
$myPicture->setShadow(TRUE,array("X"=>1,"Y"=>1,"R"=>0,"G"=>0,"B"=>0,"Alpha"=>10)); 
/* Create the per bar palette */
$Palette = array("0"=>array("R"=>188,"G"=>224,"B"=>46,"Alpha"=>100),
                "1"=>array("R"=>224,"G"=>100,"B"=>46,"Alpha"=>100),
                "2"=>array("R"=>255,"G"=>0,"B"=>255,"Alpha"=>100),
                "3"=>array("R"=>46,"G"=>151,"B"=>224,"Alpha"=>100),
                "4"=>array("R"=>109,"G"=>033,"B"=>24,"Alpha"=>100),
                "5"=>array("R"=>97,"G"=>0,"B"=>200,"Alpha"=>100),
                "6"=>array("R"=>0,"G"=>113,"B"=>63,"Alpha"=>100),
                "7"=>array("R"=>0,"G"=>145,"B"=>100,"Alpha"=>100));
/* Draw the chart */  
 $myPicture->drawBarChart(array("DisplayValues"=>TRUE,"Rounded"=>TRUE,"Surrounding"=>-30,"InnerSurrounding"=>30,"OverrideColors"=>$Palette)); 
/* Build the PNG file*/
$myPicture->Render("abusedPerBRGY.png");
//sending back the path to be used as src of #protBar image
echo "charts/abusedPerBRGY.png";

?>

我希望有人能回答这个问题。提前感谢!