javascript - 为什么我的页面在表单提交时不刷新？

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 的页面)提交。

索引.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>

主要.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();
  };

表单.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 Is a Boolean flag, which, when it is true, causes the page to always be reloaded from the server. If it is false or not specified, the browser may reload the page from its cache.