編集履歴

質問編集履歴

表示内容変更

2018/03/26 22:36

投稿

Nitta

スコア96

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -38,7 +38,7 @@
 >是非、返信お願いします。
-```node.ja
+```node.js
 // nodeのコアモジュールのhttpを使う

表記内容

2018/03/26 22:36

投稿

Nitta

スコア96

test CHANGED Viewed

	@@ -1 +1 @@
1	- ajax通信をnodeで~~利用したい!~~
1	+ ajax通信をnodeでやることはできますか？

test CHANGED Viewed

File without changes

表記内容

2018/03/26 06:26

投稿

Nitta

スコア96

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -18,7 +18,13 @@
+試した事：
+①mysqlからデータは取得可能でテンプレートにもデータ格納可能。
+(ejsにデータ表示され、selectタブで選択可能を確認)
-試した事：jqueryのイベントではalertが上がる。
+②jqueryのイベントではalertが上がる。
 (ajax～failを停止して確認済み)
@@ -52,7 +58,7 @@
-//mysqlに接続
+//mysqlに接続(自作モジュール)
 var connection   = require('./mysqlConnection');

表記内容の変更

2018/03/26 06:25

投稿

Nitta

スコア96

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -18,7 +18,13 @@
+試した事：jqueryのイベントではalertが上がる。
+(ajax～failを停止して確認済み)
->ajaxから送信する際のイベントの実施方法が
+>ajaxから送信する際のイベントの設定方法が
 >悪いのでしょうか？それとも受信側のｺｰﾄﾞが悪いのでしょうか？

表記内容

2018/03/26 06:14

投稿

Nitta

スコア96

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -14,6 +14,8 @@
 >それをデータ送信するようにしています。
+>(mysqlからデータ取得し、selectタグに挿入は可能)
 >ajaxから送信する際のイベントの実施方法が

表記内容変更

2018/03/26 05:35

投稿

Nitta

スコア96

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -1,11 +1,21 @@
 >はじめまして、node初心者のものです。
+>mysql+nodeでやっています。
 >今、ajax通信でデータ送信したものを
 >nodeに送りそのデータでコンソールを
 >上げたいのですが、上がりません。
+>ajaxから送るデータはdbから取得したもので
+>それをデータ送信するようにしています。
 >ajaxから送信する際のイベントの実施方法が
 >悪いのでしょうか？それとも受信側のｺｰﾄﾞが悪いのでしょうか？
@@ -142,9 +152,7 @@
-//↑↑↑初期状態でselectタグにmysqlからのデータを格納し、
+//↑↑↑初期状態でselectタグにmysqlからのデータを格納。
-//ここまではデータ格納でき、問題ない

表記内容

2018/03/26 05:33

投稿

Nitta

スコア96

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -6,7 +6,7 @@
 >上げたいのですが、上がりません。
->ajaxから送信する際のイベントを実施の仕方が
+>ajaxから送信する際のイベントの実施方法が
 >悪いのでしょうか？それとも受信側のｺｰﾄﾞが悪いのでしょうか？

表記内容変更

2018/03/26 05:13

投稿

Nitta

スコア96

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -6,7 +6,11 @@
 >上げたいのですが、上がりません。
+>ajaxから送信する際のイベントを実施の仕方が
+>悪いのでしょうか？それとも受信側のｺｰﾄﾞが悪いのでしょうか？
->コードは以下になります。
+>わかる方いらっしゃいましたら、ご教授下さい。
 >是非、返信お願いします。
@@ -144,8 +148,6 @@
 app.use(function(req, res, next){
     res.header("Access-Control-Allow-Origin","*");
@@ -178,35 +180,13 @@
 ```html
-<html>
-  <head ng-app = "myApp">
-    <link href="C:\Program Files\webserver\Test2\Views\reset2.css" rel="stylesheet" type="text/css">
-    <!--↓AngularJS -->
-    <script src="//code.angularjs.org/1.5.7/angular.min.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
-    <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
-    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
     <script>
 	//selectで選択
 	$(function() {
-    		$('#selectCst').change(function() {
+    		$('#selectCst').change(function() {
@@ -242,20 +222,16 @@
 	});
     </script>
-    <title>customer</title>
+  <title>customer</title>
   </head>
   <body>
     Customer_Master
     <div id="customerDisplay"></div>
@@ -284,8 +260,4 @@
-</body>
-</html>
 ```

表記方法変更

2018/03/26 04:58

投稿

Nitta

スコア96

test CHANGED Viewed

File without changes

test CHANGED Viewed

@@ -10,7 +10,7 @@
 >是非、返信お願いします。
-'''node.ja
+```node.ja
 // nodeのコアモジュールのhttpを使う
@@ -156,7 +156,7 @@
 })
-//↓ajaxからのデータを受信しできない。console上がらない。
+//↓ajaxからのデータを受信できない。console上がらない。
 app.post('/',function(req, res){
@@ -172,11 +172,11 @@
 app.listen(8124, '127.0.0.1');
-'''
+```
 >表示側
-'''html
+```html
 <html>
@@ -288,4 +288,4 @@
 </html>
-'''
+```

表記内容を変更

2018/03/26 04:06

投稿

Nitta

スコア96

test CHANGED Viewed

	@@ -1 +1 @@
1	- ajax通信を~~利用して~~nodeで~~データを送受信する。~~
1	+ ajax通信をnodeで利用したい!

test CHANGED Viewed

@@ -1,9 +1,291 @@
->node初心者のものです。
->ajaxでデータ送信したものをもとに
->mysqlからデータを取得し、表示させる方法はありますでしょうか？
->ご存じの方おられましたら、返信お願いします。
->
+>はじめまして、node初心者のものです。
+>今、ajax通信でデータ送信したものを
+>nodeに送りそのデータでコンソールを
+>上げたいのですが、上がりません。
+>コードは以下になります。
+>是非、返信お願いします。
+'''node.ja
+// nodeのコアモジュールのhttpを使う
+var http = require('http');
+var ejs  = require('ejs');
+var fs     = require('fs');
+var server = http.createServer();
+const bodyParser = require('body-parser');
+var express  = require('express');
+const app = express();
+//mysqlに接続
+var connection   = require('./mysqlConnection');
+var nitta = [];
+my_sql = "";
+my_sql = "select CST_CD, CST_NAME from users ;"
+//接続します
+connection.connect();
+var query = connection.query(my_sql);
+//イベント発生
+query
+  //エラー用
+  .on('error', function(err) {
+    console.log('err is: ', err );
+  })
+  //結果用
+  .on('result', function(rows) {
+	console.log(rows);
+	nitta.push(rows);
+  })
+  //終了
+  .on('end', function() {
+    console.log('end');
+    connection.destroy(); //終了
+  });
+//urlencodedとjsonは別々に初期化する
+app.use(bodyParser.urlencoded({
+    extended: true
+}));
+app.use(bodyParser.json());
+//ejsを使用するための設定
+app.set('views',  __dirname + "\Views\");
+app.set('view engine', 'ejs');
+app.get('/', function(req, res) {
+     //ejs テンプレートエンジンでレンダリング
+    res.render('index.ejs', {
+          message : nitta
+     });
+});
+//2018.03.13追記
+app.get('/', function (req, res) {
+    res.sendFile(__dirname + '\Views\reset.css');
+});
+//↑↑↑初期状態でselectタグにmysqlからのデータを格納し、
+//ここまではデータ格納でき、問題ない
+app.use(function(req, res, next){
+    res.header("Access-Control-Allow-Origin","*");
+    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
+    next();
+})
+//↓ajaxからのデータを受信しできない。console上がらない。
+app.post('/',function(req, res){
+    var obj = {};
+    console.log('body: ' + JSON.stringify(req.body.name));
+    var rejson = JSON.stringify(req.body);
+    res.send(rejson);
+});
+app.listen(8124, '127.0.0.1');
+'''
+>表示側
+'''html
+<html>
+  <head ng-app = "myApp">
+    <link href="C:\Program Files\webserver\Test2\Views\reset2.css" rel="stylesheet" type="text/css">
+    <!--↓AngularJS -->
+    <script src="//code.angularjs.org/1.5.7/angular.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
+    <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
+    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
+    <script>
+	//selectで選択
+	$(function() {
+    		$('#selectCst').change(function() {
+			var str = $('#selectCst option:selected').text();
+			alert(str);
+        		$.ajax({
+          		　　async: false,
+              		　　url: 'http://localhost:8124',
+          		　　type: 'post',
+			    //↓挿入したいデータ(mysqlでのカラム:CST_NAME)
+          		　　data:{"name": str },
+          		　　dataType: 'json'
+                	}).done(function(res){
+                 	　　alert('OK!');
+                	}).fail(function(xhr, status, error){
+                   	　　alert('Error!');
+                	});
+    		});
+	});
+    </script>
+    <title>customer</title>
+  </head>
+  <body>
+    Customer_Master
+    <div id="customerDisplay"></div>
+    <div id="sqlDisplay"></div>
+    <form id="form1" action="/" method="post">
+	//selectタグにmysqlからのデータ差し込み
+	<select id="selectCst">
+		<option value= "0" >Please select!!</option>
+		<% message.forEach(function(messageItem) { %>
+        	<option value = "<%= messageItem.CST_CD %>"><%= messageItem.CST_NAME %></option>
+    		<% }); %>
+	</select>
+    </form>
+</body>
+</html>
+'''

質問内容の表示方法を大幅に変更

2018/03/26 03:37

投稿

Nitta

スコア96

test CHANGED Viewed

	@@ -1 +1 @@
1	- ~~DBからの~~データ送信を受信~~し表示ししたい~~
1	+ ajax通信を利用してnodeでデータを送受信する。

test CHANGED Viewed

@@ -1,327 +1,9 @@
->大変失礼しました。node初心者のものです。
+>node初心者のものです。
->今、顧客マスターを作成し、
+>ajaxでデータ送信したものをもとに
->最終的には業務システムを(仕事で)作成予定です。
+>mysqlからデータを取得し、表示させる方法はありますでしょうか？
->今、混乱してるのがmysqlからデータ取得し、
+>ご存じの方おられましたら、返信お願いします。
->格納しselectタグで(ここまではOK)
->選択時、ajaxでデータをpost送信し
->それをsql文で検索し
->また返して表示としたいのですが、うまくいきません。
->なんとかしないとやばいので返信の程、宜しくお願いします。
-```javascript,mysql,node
-var ejs  = require('ejs');
-var path = require('path');
-const bodyParser = require('body-parser');
-var express  = require('express');
-const app = express();
-//mysqlに接続
-var connection   = require('./mysqlConnection');
-var nitta = [];
-my_sql = ""
-my_sql = "select CST_CD, CST_NAME from users ;"
-//接続します
-connection.connect();
-var query = connection.query(my_sql);
-//イベント発生
-query
-//エラー用
-.on('error', function(err) {
-console.log('err is: ', err );
-})
-//結果用
-.on('result', function(rows) {
-console.log(rows);
-nitta.push(rows);
-})
-//終了
-.on('end', function() {
-console.log('end');
-connection.destroy(); //終了
-});
-//urlencodedとjsonは別々に初期化する
-app.use(bodyParser.urlencoded({
-extended: true
-}));
+>
-app.use(bodyParser.json());
-// ejsを使用するための設定
-app.set('views',  __dirname + "\Views\");
-app.set('view engine', 'ejs');
-app.get('/', function(req, res) {
-//ejs テンプレートエンジンでレンダリング
-res.render('index.ejs', {
-message : nitta
-});
-});
-//2018.03.13追記
-app.get('/', function (req, res) {
-res.sendFile(__dirname + '\Views\reset.css');
-});
-app.use(function(req, res, next){
-res.header("Access-Control-Allow-Origin","*");
-res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
-next();
-})
-//postデータ受信
-app.post('/',function(req, res){
-var obj = {};
-console.log('body: ' + JSON.stringify(req.body.name));
-var rejson = JSON.stringify(req.body);
-res.send(rejson);
-//ここへmysql接続処理？
-});
-app.listen(8124, '127.0.0.1');
-```
-ejs側
-```
-<html>
-<head ng-app = "myApp">
-<link href="C:\Program Files\webserver\Test2\Views\reset2.css" rel="stylesheet" type="text/css">
-<!--↓AngularJS -->
-<script src="//code.angularjs.org/1.5.7/angular.min.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
-<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
-<script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
-<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
-<script>
-$(function() {
-$('#selectCst').change(function() {
-var str = $('#selectCst option:selected').text();
-alert(str);
-$.ajax({
-async: false,
-url: 'http://localhost:8124',
-type: 'post',
-//↓挿入したいデータ(mysqlでのカラム:CST_NAME)
-data:{"name": str },
-dataType: 'json'
-}).done(function(res){
-console.debug(res);
-}).fail(function(xhr, status, error){
-alert(status);
-});
-});
-});
-</script>
-<title>customer</title>
-</head>
-<body>
-Customer_Master
-<div id="customerDisplay"></div>
-<div id="sqlDisplay"></div>
-<form id="form1" action="/" method="post">
-<select id="selectCst">
-<option value= "0" >Please select!!</option>
-<% message.forEach(function(messageItem) { %>
-<option value = "<%= messageItem.CST_CD %>"><%= messageItem.CST_NAME %></option>
-<% }); %>
-</select>
-<p>
-<input type="button" name="btnInsert" id="btnInsert" value="add">
-<input type="button" name="btnUpdate" id="btnUpdate" value="update">
-<input type="button" name="btnDelete" id="btnDelete" value="delete">
-//↓↓mysqlからの返信データをこちらに差し込みたい
-</p>
-CST_CD:<input type="text" name= "txtCstCd" id="txtCstCd">
-<a href="" name="linkMaxCd" id="linkMaxCd">Max</a>　<br />
-CST_NAME:<input type="text" name= "txtCstName" id="txtCstName"><br />
-TOWN_CD:<input type="text" name= "txtTownCd" id="txtTownCd"><br />
-ADDRESS:<input type="text" name= "txtAddress" id="txtAddress"><br />
-TEL:<input type="text" name= "txtTel" id="txtTel"><br />
-BIRTH:<input type="text" name= "txtBirth" id="txtBirth"><br />
-SEX_CD:<input type="text" name= "txtSexCd" id="txtSexCd">
-</form>
-</body>
-</html>
-```**__~~### ボールドテキスト~~__**