为什么我的页面不刷新表单提交?

I've made a simple quiz application with one question to answer; when the user submits the form the answer is posted to a MySQL database. Then a function is run that does a database query and translates the data in the database table to JSON, which I then visualize using a D3 script.

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

The full code is here on github and I've included snippets below.

完整的代码在github上，我在下面包含了一些代码片段。

My question: index.php page first loads, a D3 script takes the JSON and builds a small bar chart which is displayed next to the from. Screenshot is here.

我的问题:索引。php页面首先加载，D3脚本获取JSON并构建一个小条形图，该条形图显示在from旁边。截图在这里。

The problem I am having is that after the user submits the form, although the database is updated correctly, the page isn't refreshed. This means the JSON and the bar chart aren't updated.

我遇到的问题是，在用户提交表单之后，尽管数据库得到了正确的更新，但是页面并没有刷新。这意味着JSON和条形图不会更新。

I have to manually refresh (command-r) in order to see the correct (updated) visualization.

我必须手动刷新(命令-r)才能看到正确的(更新的)可视化。

What I am trying to accomplish: to get the chart to refresh when "Submit" is pressed so the updated results are presented to the user.

我要做的是:当“提交”被按下时，让图表刷新，这样更新后的结果就会呈现给用户。

I don't know what I'm doing wrong and could use a pointer on whether I need to be looking at the PHP or JavaScript side to get the chart to refresh (and the page to reload the updated JSON) on form submit.

我不知道我做错了什么，我可以使用一个指针来判断我需要查看PHP还是JavaScript来刷新表单提交中的图表(以及重新加载更新的JSON的页面)。

Index.php:

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

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

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

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();

2 个解决方案

#1

Force the javascript to reload, just in case it's trying to read the cache or something:

强制javascript重新加载，以防它试图读取缓存或其他东西:

window.location.reload();

to

来

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.

forcedReload是一个布尔标志，如果是这样，就会导致页面总是从服务器重新加载。如果是false或未指定，浏览器可以从缓存重新加载页面。

#2

Instead of fixing current solution, i would like to propose a better solution. if you use ajax to post your data to server and get a json response back, which you can use to render your chart. you can also use ajax form plugin to apply to your current form.

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