Question

所以我正在写一个网站，我想让用户按小时，天，周，月过滤他们的图表。所以我想我会放一些按钮让他们选择他们想要的东西。现在我不希望页面刷新我只想在屏幕上更新图表。所以这就是我所拥有的只有1个php文件。

我有两个问题：

1）我的按钮选择仅返回声明的第一个按钮，因此在这种情况下无论我点击什么，它总是返回小时。

2）当我选择按钮时，我认为我需要重新加载页面的那一部分以呈现更新？我不确定我是否曾经使用过AJAX或以前的任何东西。或多或少只是想把东西串起来。

<?php
include("chartsphp4free/lib/inc/chartphp_dist.php"); 
$p = new chartphp(); 

if(strcmp($_POST["filter"],"hour")==0){
   //hour
   $sql = "select for hour";
   $result = $conn->query($sql);
}

if(strcmp($_POST["filter"],"day")==0){ 
  //day
   $sql = "select for day";
   $result = $conn->query($sql);
}
if(strcmp($_POST["filter"],"week")==0){ 
   //week
   $sql = "select for week";
   $result = $conn->query($sql);
}
if(strcmp($_POST["filter"],"month")==0){ 
   //month
   $sql = "select for month";
   $result = $conn->query($sql);
}


    if ($result->num_rows > 0) {
        $dataStuff = [];

        while($row = $result->fetch_assoc()) {

        $holder = array($row["time"],$row["clicks"]);
        array_push($dataStuff,$holder);

        }
        $p->data = array($dataStuff);
   }

$p->chart_type = "line"; 

$out = $p->render('c1'); 

?> 


<!DOCTYPE html> 
<html> 
    <head> 
        <script src="chartsphp4free/lib/js/jquery.min.js"></script> 
        <script src="chartsphp4free/lib/js/chartphp.js"></script> 
        <link rel="stylesheet" href="chartsphp4free/lib/js/chartphp.css"> 
    <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
    </head> 
    <body> 
 <form id="formoid" action="testGraph.php" title="" method="post">
       <div>
            <input type="submit" id="submitButton" name="Hour"  value="Hour" >
            <input type="submit" id="submitButton" name="Day"   value="Day" >
            <input type="submit" id="submitButton" name="Week"  value="Week" >
            <input type="submit" id="submitButton" name="Month" value="Month" >
        </div>
 </form>
        <div style="width:40%; min-width:450px;"> 
            <?php echo $out; ?> 
        </div> 
    </body> 
</html> 



<script type='text/javascript'>


  /* attach a submit handler to the form */
    $("#formoid").submit(function(event) {

      /* stop form from submitting normally */
      event.preventDefault();

      /* get the action attribute from the <form action=""> element */
      var $form = $( this ),
          url = $form.attr( 'action' );

      /* Send the data using post with element id name and name2*/
      var posting = $.post( url, { filter: $('#submitButton').val() } );
      alert($('#submitButton').val());
      /* Alerts the results */
      posting.done(function( data ) {
        alert('success');
      });
    });
</script>

代码更新：现在按钮按下工作并显示正确的值，但我的图表不会更新。我尝试更新内部html但它给我一个错误的PHP回声。对此有任何想法。

<?php

include("chartsphp4free/lib/inc/chartphp_dist.php"); 

$p = new chartphp(); 

if(isset($_POST["filter"])){
  echo $_POST["filter"];
}

if(!isset($_POST["filter"]))
{
   $sql = "SELECT COUNT(timeClicked) as clicks, o_ID, EXTRACT(hour from timeClicked) as time FROM adTracker GROUP BY o_ID, time";
   $result = $conn->query($sql);
}
   //hour
if(strcmp($_POST["filter"],"hour")==0)
{
   $sql = "SELECT gour";
   $result = $conn->query($sql);
}
   //day
if(strcmp($_POST["filter"],"day")==0)
{
   $sql = "SELECT day";
   $result = $conn->query($sql);
}
   //week
if(strcmp($_POST["filter"],"week")==0)
{
   $sql = "SELECT week";
   $result = $conn->query($sql);
}
   //month
if(strcmp($_POST["filter"],"month")==0)
{
   $sql = "SELECT month";
   $result = $conn->query($sql);
}


    if ($result->num_rows > 0) {
        $dataStuff = [];

        while($row = $result->fetch_assoc()) {

        $holder = array($row["time"],$row["clicks"]);
        array_push($dataStuff,$holder);
        }

        $p->data = array($dataStuff);
   }


$p->chart_type = "line"; 

// Common Options 
$p->title = "Chris and Wyn Test"; 
$p->ylabel = "Clicks"; 
$p->xlabel = "Hour";

$p->options["axes"]["yaxis"]["tickOptions"]["prefix"] = ''; 

$out = $p->render('c1'); 

?> 


<!DOCTYPE html> 

<html>
<head>
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
   <script src="chartsphp4free/lib/js/jquery.min.js"></script> 
  <script src="chartsphp4free/lib/js/chartphp.js"></script> 
  <link rel="stylesheet" href="chartsphp4free/lib/js/chartphp.css"> 
</head>

<body>


<form id="formoid" action="testGraph.php" title="" method="post">
       <div>
            <input type="submit" class="submitButton" name="Hour"  value="Hour" >
            <input type="submit" class="submitButton" name="Day"   value="Day" >
            <input type="submit" class="submitButton" name="Week"  value="Week" >
            <input type="submit" class="submitButton" name="Month" value="Month" >
        </div>
 </form>

 <div id= "graph1" style="width:40%; min-width:450px;"> 
            <?php echo $out; ?> 
  </div>

</body>

<script type='text/javascript'>
  /* attach a submit handler to the form */
    $(".submitButton").click(function(event) {

      /* stop form from submitting normally */
      event.preventDefault();
            /* get the action attribute from the <form action=""> element */
      var $form = $('#formoid'),
          url = $form.attr( 'action' );
      /* Send the data using post with element id name and name2*/
      var posting = $.post( url, { filter: $(this).val() } );
      /* Alerts the results */
       alert($(this).val());
      posting.done(function( data ) {
        alert('success');
        document.getElementById("graph1").innerHTML = '<?php echo $out; ?>';

      });
    });

</script>

Answer 1

理想情况下，表单应该只有一个submit按钮，但您有多个提交按钮。相反，您可以使用button type ="button"。

还会有唯一的ID。因此，您可以使用class作为选择器，然后点击使用$(this)获取当前目标

<强> HTML

<div>
        <input type="button" class="submitButton" name="Hour"  value="Hour" >
        <input type="button" class="submitButton" name="Day"   value="Day" >
        <input type="button" class="submitButton" name="Week"  value="Week" >
        <input type="button" class="submitButton" name="Month" value="Month" >
    </div>

<强> JS

$(".submitButton").click(function(event) {
  var _getValue = $(this).val();
  // Rest of the code.
  // Use this _getValue to send to request the ajax
})

Answer 2

添加类属性

 <form id="formoid" action="testGraph.php" title="" method="post">
       <div>
            <input type="submit" class="submitButton" name="Hour"  value="Hour" >
            <input type="submit" class="submitButton" name="Day"   value="Day" >
            <input type="submit" class="submitButton" name="Week"  value="Week" >
            <input type="submit" class="submitButton" name="Month" value="Month" >
        </div>
 </form>

而不是提交使用点击以触发ajax请求

  /* attach a submit handler to the form */
    $(".submitButton").click(function(event) {

      /* stop form from submitting normally */
      event.preventDefault();
            /* get the action attribute from the <form action=""> element */
      var $form = $('#formoid'),
          url = $form.attr( 'action' );
      /* Send the data using post with element id name and name2*/
      var posting = $.post( url, { filter: $(this).val() } );
      /* Alerts the results */
       alert($(this).val());
      posting.done(function( data ) {
        alert('success');

      });
    });

小提琴：https://jsfiddle.net/giantomakin/umvjps9r/

AJAX按钮过滤器更新CODE UPDATE（查看新代码）

2 个答案: