个人中心
gpt4 book ai didi

javascript - AJAX 按钮过滤器更新代码更新(查看新代码)

转载 作者：行者123 更新时间：2023-11-28 05:50:28 25 4
gpt4 key购买 nike

因此，我正在编写一个网站，希望用户能够按小时、天、周、月过滤图表。所以我想我应该放一些按钮让他们选择他们想要的东西。现在我不想刷新页面，我只想在屏幕中更新图表。所以这就是我所拥有的全部内容在 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 echo 错误。对此有任何想法。 

<?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>

最佳答案

理想情况下，表单应该只有一个 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
})

关于javascript - AJAX 按钮过滤器更新代码更新(查看新代码)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/38125422/

25 4 0
文章推荐： javascript - 如何在 JavaScript 中将必填表单字段设为空白
文章推荐： c++ - TFS 构建 - 将 MSBuild 项目值发送到 vstest 运行时
文章推荐： ios - iOS 中的 FirebaseInstanceId 是什么？
文章推荐： c++ - 尝试运行 cocos2dx Debug.win32 时缺少 appcrt140d.dll。 dll从哪里获取？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com