###前提・実現したいこと
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件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2016/05/28 06:36