JSとNode.jsとMySQLでToDoListを作りたい

###前提・実現したいこと
ToDoListを作成したい
ボタンを押すと、jsがリクエストを送り、返って来たJSONファイルを分析して<li>データ</li>という形で表示していく
また削除ボタンが押されると削除される

###発生している問題・エラーメッセージ
リクエストを送るとエラー等は出ないが、ページ移動してJSONファイルの中身が表示されてしまう

###該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3	<head>
4		<meta charset="utf-8">
5		<meta name="viewport" content="width=device-width, initial-scale=1">
6		<title>ToDoList</title>
7		<link rel="stylesheet" href="./style.css">
8		<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
9	</head>
10	<body onload = "displayList()">
11		<div id="content">
12      <div id="wrapper">
13				<h2>ToDoList</h2>
14				<form method="get" action="http://localhost:1234">
15					<button type="submit" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>更新</button>
16				</form>
17
18				<div>
19					<ul id = "lists">
20					</ul>
21				</div>
22
23				<form method="post" class="input-group" action="http://localhost:1234">
24					<span class="input-group-addon">ToDo:</span>
25					<input type="text" class="form-control" name="todo" size="140">
26					<span class="input-group-btn">
27						<button type="submit" class="btn btn-default">追加</button>
28					</span>
29		    </form>
30			</div>
31		</div>
32
33		<script src="./script.js"></script>
34		<!--<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
35		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>-->
36	</body>
37</html>

javascript
1function parseJSON(jsdata){
2  var data = eval("("+jsdata+")");
3  var resultData = "["+data.todo+"]";
4  return resultData;
5}
6
7function displayList(){
8  var jsdata = getJSON();
9  var data = parseJSON(jsdata);
10
11  for (var i = 0; i < jsdata.length; i++) {
12    var ele = document.createElement("li");
13    var str = document.createTextNode(data[i].todo);
14    var btn = document.createElement("button");
15    btn.type = "submit"
16    btn.value = data[i].id;
17    //ele.id = data[i].id;
18    ele.appendChild(str);
19    ele.appendChild(btn);
20    document.getElementById("lists").appendChild(ele);
21  }
22}
23
24function getJSON(){
25  var xmlHttpRequest = new XMLHttpRequest();
26  xmlHttpRequest.onreadystatechange = function()
27  {
28      var READYSTATE_COMPLETED = 4;
29      var HTTP_STATUS_OK = 200;
30
31      if( this.readyState == READYSTATE_COMPLETED
32       && this.status == HTTP_STATUS_OK )
33      {
34          // レスポンス ヘッダでJSONのデータであることを確認する※1
35          if( this.getResponseHeader( 'Content-Type' ).indexOf( 'application/json' ) != -1 )
36          {
37              var obj;
38              if( window.JSON )
39              {
40                  obj= JSON.parse( this.responseText );
41              }
42              else
43              {
44                  obj= eval( '(' + this.responseText + ')' );
45              }
46          }
47      }
48  }
49
50  var requestUrl = 'http://localhost:1234';
51
52  var obj = xmlHttpRequest.open( 'GET', requestUrl );
53  xmlHttpRequest.send( null );
54  return obj;
55}

Javascript
1function response(req, res) {
2  var data = "";
3  var json_stringify_allow = [
4    "id",
5		"todo"
6	];
7
8  function makeJSON() {
9    var sql = 'SELECT * FROM todolist';
10    var alldata = [];
11    var query = connection.query(sql);
12    query
13      .on('error',function(err){
14          console.log("err is:", err);
15      })
16      .on('result',function(rows){
17          alldata.push(rows);
18      })
19      .on('end',function(){
20        var json_text = JSON.stringify(alldata,json_stringify_allow, "\t");
21        res.writeHead(200, {"Content-type": "text/text"});
22        res.write(json_text);
23        console.log(json_text);
24        res.end();
25      });
26  }
27  function getData(chunk) {
28    data += chunk;
29  }
30
31  function getDataEnd() {
32    var obj = qs.parse(data);
33    console.log(data);
34    var sql = "INSERT INTO todolist(todo) VALUES ('" + obj.todo + "')";
35    console.log(sql);
36    var query = connection.query(sql);
37    query
38      .on('error',function(err){
39          console.log("err is:", err);
40      })
41      .on('result',function(rows){
42          console.log(rows);
43      })
44      .on('end',function(){
45        res.end();
46        console.log("POST FINISH");
47      });
48  }
49
50  function deletePost() {
51    var obj = qs.parse(data);
52    var sql = "DELETE FROM todolist WHERE id = '" + obj.id + "'";
53    var query = connection.query(sql);
54    query
55      .on('error',function(err){
56          console.log("err is:", err);
57      })
58      .on('result',function(rows){
59          console.log(rows);
60      })
61      .on('end',function(){
62        res.end();
63        console.log("DELETED");
64      });
65  }
66
67
68  if (req.method == "POST") {
69    console.log("POST");
70    req.on('data', getData);
71    req.on('end', getDataEnd);
72    res.end();
73  } else if(req.method == "GET") {
74    console.log("GET");
75    makeJSON();
76  }else{
77    console.log("DELETE");
78    req.on('data', getData);
79    req.on('end', deletePost);
80    deletePost('data');
81  }
82}
83
84var http = require("http");
85var mysql = require("mysql");
86var connection = mysql.createConnection({
87  host     : 'localhost', //接続先ホスト
88  user     : 'root',      //ユーザー名
89  password : 'pass',  //パスワード
90  database : 'todo_db',    //DB名
91  port     : 3306 //ポート,デフォルトでも3306
92});
93connection.connect();
94var qs = require("querystring");
95var server = http.createServer();
96server.on("request", response);
97server.listen(1234);
98console.log("server started.");

###試したこと

###補足情報(言語/FW/ツール等のバージョンなど)

行動規範の内容に同意します

回答1件

ベストアンサー

更新ボタン押下した際、formのactionにmethodでリクエストされる。
※formの挙動の話で、ajaxとは関係ないです。
↓これだと、http://localhost:1234に対してGETでリクエストが行われる。

<form method="get" action="http://localhost:1234">
     <button type="submit" class="btn btn-default" aria-label="Left Align"><span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>更新</button>
</form>

これが、

リクエストを送るとエラー等は出ないが、ページ移動してJSONファイルの中身が表示されてしまう

の原因です。

で、他にもいくつかおかしな所があるので、表示部分だけ指摘しときます。
###１．Content-typeをtext/textで返却しているのに、application/jsonでチェックしている。
→node.js側のtext/textが誤りでしょう。

###２．非同期なのか同期にしたいのかわからない。

var obj = xmlHttpRequest.open( 'GET', requestUrl );

だと、非同期通信になります。
だけど、下でobjを返却しているので、同期通信させたいようにも見えます。
とはいえ、同じobjという変数名で、非同期の手当（xmlHttpRequest.onreadystatechangeの実装）をしている。

例えば、同期とするならば、
var obj = xmlHttpRequest.open( 'GET', requestUrl );
↓
var obj = xmlHttpRequest.open( 'GET', requestUrl , false);
にして、
xmlHttpRequest.onreadystatechange内で宣言しているvar obj;を削除。

これで、xmlHttpRequest.send( null );でレスポンスが返ってくるまで処理待ちとなり、
返ってきたらxmlHttpRequest.onreadystatechangeが呼び出されて、objに返却値が入ります。

###３．var data = parseJSON(jsdata);は、不要かと思います。

function displayList(){
  var jsdata = getJSON();

  for (var i = 0; i < jsdata.length; i++) {
    var ele = document.createElement("li");
    var str = document.createTextNode(jsdata[i].todo);
    var btn = document.createElement("button");
    btn.type = "submit"
    btn.value = jsdata[i].id;

で問題ないと思います。

あとは、こちらで環境作った時に起こったことなのですが、
JSとnode.jsのポート違うとクロスドメイン扱い（そのままだと情報を受け取れない）となるので、
１．の対応の際、その手当もしてあげると良いです。、
↓こんな感じ

var header = {
                "Content-type": "application/json",
                "Access-Control-Allow-Origin": "*"
        }        
res.writeHead(200, header);

投稿2016/05/04 22:34