Question

我做了一个简单的测验申请，有一个问题要回答;当用户提交表单时，答案将发布到MySQL数据库。然后运行一个函数来执行数据库查询并将数据库表中的数据转换为JSON，然后使用D3脚本进行可视化。

完整代码为here on github，我在下面提供了一些代码段。

我的问题：首先加载index.php页面， a D3 script takes the JSON and builds a small bar chart which is displayed next to the from。屏幕截图为here。

我遇到的问题是，在用户提交表单后，虽然数据库已正确更新，但页面不会刷新。这意味着JSON和条形图不会更新。

我必须手动刷新（command-r）才能看到正确（更新）的可视化。

我想要完成的任务：在按下“提交”时刷新图表，以便将更新的结果呈现给用户。

我不知道我做错了什么，并且可以使用指针来确定我是否需要查看PHP或JavaScript方面以获取图表以刷新（以及重新加载更新的JSON的页面）提交。

Index.php：

<form action="form.php" method="post">
     <fieldset>
     <legend>Choose your favourite option:</legend>
     <label>Susan <input type="radio" name="author" id="Susan" value="Susan"></label><br/>
     <label>Camile <input type="radio" name="author" id="Camile" value="Camile"></label><br/>
     <input type="submit" value="Save" />
    </fieldset>
 </form>

main.js

 var ele = document.getElementById("form");

  if(ele.addEventListener){
    ele.addEventListener("submit", reload, false);  //Modern browsers
  } 
  else if (ele.attachEvent){
    ele.attachEvent('onsubmit', reload);            //Old IE
  }

  function reload() {
    window.location.reload();
    console.log("reloaded");
    drawChart();
  };

form.php的

 include "toJson.php";
 $link = mysqli_connect("localhost", "root", "root", "quiz");

  if (!$link) {
  die('Connect Error (' . mysqli_connect_errno() . ')' . mysqli_connect_error());
  }

  $update = "INSERT INTO `quiz`.`answers` (`name`) VALUES ('" . mysqli_real_escape_string($link, $_POST['author']) .  "')";

  mysqli_query($link, $update);

  updateJson();

  mysqli_close($link);

toJson.php

$location = $_SERVER['HTTP_HOST'] . $_SERVER['REQUEST_URI'];
header("Location: " . $location);

function updateJson () {

  $link = mysqli_connect("localhost", "root", "root", "quiz");

  if (!$link) {
    die('Connect Error (' . mysqli_connect_errno() . ')' . mysqli_connect_error());
   }

  $result = mysqli_query($link, "SELECT * FROM `answers`");

  $arr = array();

  while($row = mysqli_fetch_array( $result )) {
  $arr[] = $row;
  print_r($row);
  echo "<br/>";
 }

 //write to json file
 $fp = fopen('data.json', 'w');
 fwrite($fp, json_encode($arr));
 fclose($fp);

  mysqli_close($link);

  }

  updateJson();

Answer 1

强制javascript重新加载，以防它正在尝试读取缓存或其他内容：

window.location.reload();

到

window.location.reload(true);

forcedReload是一个布尔标志，当它为true时，会导致始终从服务器重新加载页面。如果为false或未指定，浏览器可能会从其缓存中重新加载页面。

Answer 2

我想提出一个更好的解决方案，而不是修复当前的解决方案。如果您使用ajax将数据发布到服务器并获取json响应，则可以使用它来呈现图表。您还可以使用ajax表单插件来应用于当前表单。

为什么我的页面不会在表单上刷新提交？

2 个答案: