teratail
回答率
85.30%
teratail header banner
teratail header banner
質問するログイン新規登録
トップに関する質問ajax通信をnodeでやることはできますか？

編集履歴

質問編集履歴

11

表示内容変更

2018/03/26 22:36

投稿

Nitta
Nitta

スコア96

title CHANGED
File without changes
body CHANGED
@@ -18,7 +18,7 @@
18
18
  >悪いのでしょうか？それとも受信側のｺｰﾄﾞが悪いのでしょうか？
19
19
  >わかる方いらっしゃいましたら、ご教授下さい。
20
20
  >是非、返信お願いします。
21
- ```node.ja
21
+ ```node.js
22
22
  // nodeのコアモジュールのhttpを使う
23
23
  var http = require('http');
24
24
  var ejs = require('ejs');

10

表記内容

2018/03/26 22:36

投稿

Nitta
Nitta

スコア96

title CHANGED
@@ -1,1 +1,1 @@
1
- ajax通信をnodeで利用したい!
1
+ ajax通信をnodeでやることはできますか？
body CHANGED
File without changes

9

表記内容

2018/03/26 06:26

投稿

Nitta
Nitta

スコア96

title CHANGED
File without changes
body CHANGED
@@ -8,7 +8,10 @@
8
8
  >それをデータ送信するようにしています。
9
9
  >(mysqlからデータ取得し、selectタグに挿入は可能)
10
10
 
11
+ 試した事：
12
+ ①mysqlからデータは取得可能でテンプレートにもデータ格納可能。
13
+ (ejsにデータ表示され、selectタブで選択可能を確認)
11
- 試した事：jqueryのイベントではalertが上がる。
14
+ ②jqueryのイベントではalertが上がる。
12
15
  (ajax～failを停止して確認済み)
13
16
 
14
17
  >ajaxから送信する際のイベントの設定方法が
@@ -25,7 +28,7 @@
25
28
  var express = require('express');
26
29
  const app = express();
27
30
 
28
- //mysqlに接続
31
+ //mysqlに接続(自作モジュール)
29
32
  var connection = require('./mysqlConnection');
30
33
 
31
34
  var nitta = [];

8

表記内容の変更

2018/03/26 06:25

投稿

Nitta
Nitta

スコア96

title CHANGED
File without changes
body CHANGED
@@ -8,7 +8,10 @@
8
8
  >それをデータ送信するようにしています。
9
9
  >(mysqlからデータ取得し、selectタグに挿入は可能)
10
10
 
11
+ 試した事：jqueryのイベントではalertが上がる。
12
+ (ajax～failを停止して確認済み)
13
+
11
- >ajaxから送信する際のイベントの実施方法が
14
+ >ajaxから送信する際のイベントの設定方法が
12
15
  >悪いのでしょうか？それとも受信側のｺｰﾄﾞが悪いのでしょうか？
13
16
  >わかる方いらっしゃいましたら、ご教授下さい。
14
17
  >是非、返信お願いします。

7

表記内容

2018/03/26 06:14

投稿

Nitta
Nitta

スコア96

title CHANGED
File without changes
body CHANGED
@@ -6,6 +6,7 @@
6
6
 
7
7
  >ajaxから送るデータはdbから取得したもので
8
8
  >それをデータ送信するようにしています。
9
+ >(mysqlからデータ取得し、selectタグに挿入は可能)
9
10
 
10
11
  >ajaxから送信する際のイベントの実施方法が
11
12
  >悪いのでしょうか？それとも受信側のｺｰﾄﾞが悪いのでしょうか？

6

表記内容変更

2018/03/26 05:35

投稿

Nitta
Nitta

スコア96

title CHANGED
File without changes
body CHANGED
@@ -1,7 +1,12 @@
1
1
  >はじめまして、node初心者のものです。
2
+ >mysql+nodeでやっています。
2
3
  >今、ajax通信でデータ送信したものを
3
4
  >nodeに送りそのデータでコンソールを
4
5
  >上げたいのですが、上がりません。
6
+
7
+ >ajaxから送るデータはdbから取得したもので
8
+ >それをデータ送信するようにしています。
9
+
5
10
  >ajaxから送信する際のイベントの実施方法が
6
11
  >悪いのでしょうか？それとも受信側のｺｰﾄﾞが悪いのでしょうか？
7
12
  >わかる方いらっしゃいましたら、ご教授下さい。
@@ -70,8 +75,7 @@
70
75
  res.sendFile(__dirname + '\Views\reset.css');
71
76
  });
72
77
 
73
- //↑↑↑初期状態でselectタグにmysqlからのデータを格納し、
78
+ //↑↑↑初期状態でselectタグにmysqlからのデータを格納。
74
- //ここまではデータ格納でき、問題ない
75
79
 
76
80
  app.use(function(req, res, next){
77
81
  res.header("Access-Control-Allow-Origin","*");

5

表記内容

2018/03/26 05:33

投稿

Nitta
Nitta

スコア96

title CHANGED
File without changes
body CHANGED
@@ -2,7 +2,7 @@
2
2
  >今、ajax通信でデータ送信したものを
3
3
  >nodeに送りそのデータでコンソールを
4
4
  >上げたいのですが、上がりません。
5
- >ajaxから送信する際のイベントを実施の仕方が
5
+ >ajaxから送信する際のイベントの実施方法が
6
6
  >悪いのでしょうか？それとも受信側のｺｰﾄﾞが悪いのでしょうか？
7
7
  >わかる方いらっしゃいましたら、ご教授下さい。
8
8
  >是非、返信お願いします。

4

表記内容変更

2018/03/26 05:13

投稿

Nitta
Nitta

スコア96

title CHANGED
File without changes
body CHANGED
@@ -2,7 +2,9 @@
2
2
  >今、ajax通信でデータ送信したものを
3
3
  >nodeに送りそのデータでコンソールを
4
4
  >上げたいのですが、上がりません。
5
+ >ajaxから送信する際のイベントを実施の仕方が
6
+ >悪いのでしょうか？それとも受信側のｺｰﾄﾞが悪いのでしょうか？
5
- >コードは以下になります。
7
+ >わかる方いらっしゃいましたら、ご教授下さい。
6
8
  >是非、返信お願いします。
7
9
  ```node.ja
8
10
  // nodeのコアモジュールのhttpを使う
@@ -71,7 +73,6 @@
71
73
  //↑↑↑初期状態でselectタグにmysqlからのデータを格納し、
72
74
  //ここまではデータ格納でき、問題ない
73
75
 
74
-
75
76
  app.use(function(req, res, next){
76
77
  res.header("Access-Control-Allow-Origin","*");
77
78
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
@@ -88,22 +89,11 @@
88
89
  ```
89
90
  >表示側
90
91
  ```html
91
- <html>
92
- <head ng-app = "myApp">
93
- <link href="C:\Program Files\webserver\Test2\Views\reset2.css" rel="stylesheet" type="text/css">
94
- <!--↓AngularJS -->
95
- <script src="//code.angularjs.org/1.5.7/angular.min.js"></script>
96
- <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
97
- <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
98
- <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
99
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
100
-
101
92
  <script>
102
93
  //selectで選択
103
94
  $(function() {
95
+ $('#selectCst').change(function() {
104
96
 
105
- $('#selectCst').change(function() {
106
-
107
97
  var str = $('#selectCst option:selected').text();
108
98
  alert(str);
109
99
  $.ajax({
@@ -120,13 +110,11 @@
120
110
  });
121
111
  });
122
112
  });
123
-
124
-
125
113
  </script>
126
-
127
- <title>customer</title>
114
+ <title>customer</title>
128
115
  </head>
129
116
  <body>
117
+
130
118
  Customer_Master
131
119
  <div id="customerDisplay"></div>
132
120
  <div id="sqlDisplay"></div>
@@ -141,6 +129,4 @@
141
129
  </select>
142
130
  </form>
143
131
 
144
- </body>
145
- </html>
146
132
  ```

3

表記方法変更

2018/03/26 04:58

投稿

Nitta
Nitta

スコア96

title CHANGED
File without changes
body CHANGED
@@ -4,7 +4,7 @@
4
4
  >上げたいのですが、上がりません。
5
5
  >コードは以下になります。
6
6
  >是非、返信お願いします。
7
- '''node.ja
7
+ ```node.ja
8
8
  // nodeのコアモジュールのhttpを使う
9
9
  var http = require('http');
10
10
  var ejs = require('ejs');
@@ -77,7 +77,7 @@
77
77
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
78
78
  next();
79
79
  })
80
- //↓ajaxからのデータを受信しできない。console上がらない。
80
+ //↓ajaxからのデータを受信できない。console上がらない。
81
81
  app.post('/',function(req, res){
82
82
  var obj = {};
83
83
  console.log('body: ' + JSON.stringify(req.body.name));
@@ -85,9 +85,9 @@
85
85
  res.send(rejson);
86
86
  });
87
87
  app.listen(8124, '127.0.0.1');
88
- '''
88
+ ```
89
89
  >表示側
90
- '''html
90
+ ```html
91
91
  <html>
92
92
  <head ng-app = "myApp">
93
93
  <link href="C:\Program Files\webserver\Test2\Views\reset2.css" rel="stylesheet" type="text/css">
@@ -143,4 +143,4 @@
143
143
 
144
144
  </body>
145
145
  </html>
146
- '''
146
+ ```

2

表記内容を変更

2018/03/26 04:06

投稿

Nitta
Nitta

スコア96

title CHANGED
@@ -1,1 +1,1 @@
1
- ajax通信を利用してnodeでデータを送受信する。
1
+ ajax通信をnodeで利用したい!
body CHANGED
@@ -1,5 +1,146 @@
1
- >node初心者のものです。
1
+ >はじめまして、node初心者のものです。
2
- >ajaxでデータ送信したものをもとに
2
+ >今、ajax通信でデータ送信したものを
3
+ >nodeに送りそのデータでコンソールを
3
- >mysqlからデータを取得し、表示させる方法はありますでしょうか？
4
+ >上げたいのですが、上がりません。
5
+ >コードは以下になります。
4
- >ご存じの方おられましたら、返信お願いします。
6
+ >是非、返信お願いします。
7
+ '''node.ja
8
+ // nodeのコアモジュールのhttpを使う
9
+ var http = require('http');
10
+ var ejs = require('ejs');
11
+ var fs = require('fs');
12
+ var server = http.createServer();
13
+ const bodyParser = require('body-parser');
14
+ var express = require('express');
15
+ const app = express();
16
+
17
+ //mysqlに接続
18
+ var connection = require('./mysqlConnection');
19
+
20
+ var nitta = [];
21
+
22
+ my_sql = "";
23
+ my_sql = "select CST_CD, CST_NAME from users ;"
24
+
25
+ //接続します
26
+ connection.connect();
27
+
28
+ var query = connection.query(my_sql);
29
+
30
+ //イベント発生
31
+ query
32
+ //エラー用
33
+ .on('error', function(err) {
34
+ console.log('err is: ', err );
35
+ })
36
+ //結果用
37
+ .on('result', function(rows) {
38
+ console.log(rows);
39
+ nitta.push(rows);
40
+ })
41
+ //終了
42
+ .on('end', function() {
43
+ console.log('end');
44
+ connection.destroy(); //終了
45
+ });
46
+
47
+
48
+ //urlencodedとjsonは別々に初期化する
49
+ app.use(bodyParser.urlencoded({
50
+ extended: true
51
+ }));
52
+
53
+ app.use(bodyParser.json());
54
+
55
+ //ejsを使用するための設定
56
+ app.set('views', __dirname + "\Views\");
57
+ app.set('view engine', 'ejs');
58
+
59
+ app.get('/', function(req, res) {
60
+ //ejs テンプレートエンジンでレンダリング
61
+ res.render('index.ejs', {
62
+ message : nitta
63
+ });
64
+ });
65
+
66
+ //2018.03.13追記
67
+ app.get('/', function (req, res) {
68
+ res.sendFile(__dirname + '\Views\reset.css');
69
+ });
70
+
71
+ //↑↑↑初期状態でselectタグにmysqlからのデータを格納し、
72
+ //ここまではデータ格納でき、問題ない
73
+
74
+
75
+ app.use(function(req, res, next){
76
+ res.header("Access-Control-Allow-Origin","*");
77
+ res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
78
+ next();
79
+ })
80
+ //↓ajaxからのデータを受信しできない。console上がらない。
81
+ app.post('/',function(req, res){
82
+ var obj = {};
83
+ console.log('body: ' + JSON.stringify(req.body.name));
84
+ var rejson = JSON.stringify(req.body);
85
+ res.send(rejson);
86
+ });
87
+ app.listen(8124, '127.0.0.1');
88
+ '''
5
- >
89
+ >表示側
90
+ '''html
91
+ <html>
92
+ <head ng-app = "myApp">
93
+ <link href="C:\Program Files\webserver\Test2\Views\reset2.css" rel="stylesheet" type="text/css">
94
+ <!--↓AngularJS -->
95
+ <script src="//code.angularjs.org/1.5.7/angular.min.js"></script>
96
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
97
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
98
+ <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
99
+ <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
100
+
101
+ <script>
102
+ //selectで選択
103
+ $(function() {
104
+
105
+ $('#selectCst').change(function() {
106
+
107
+ var str = $('#selectCst option:selected').text();
108
+ alert(str);
109
+ $.ajax({
110
+ 　　async: false,
111
+ 　　url: 'http://localhost:8124',
112
+ 　　type: 'post',
113
+ //↓挿入したいデータ(mysqlでのカラム:CST_NAME)
114
+ 　　data:{"name": str },
115
+ 　　dataType: 'json'
116
+ }).done(function(res){
117
+ 　　alert('OK!');
118
+ }).fail(function(xhr, status, error){
119
+ 　　alert('Error!');
120
+ });
121
+ });
122
+ });
123
+
124
+
125
+ </script>
126
+
127
+ <title>customer</title>
128
+ </head>
129
+ <body>
130
+ Customer_Master
131
+ <div id="customerDisplay"></div>
132
+ <div id="sqlDisplay"></div>
133
+
134
+ <form id="form1" action="/" method="post">
135
+ //selectタグにmysqlからのデータ差し込み
136
+ <select id="selectCst">
137
+ <option value= "0" >Please select!!</option>
138
+ <% message.forEach(function(messageItem) { %>
139
+ <option value = "<%= messageItem.CST_CD %>"><%= messageItem.CST_NAME %></option>
140
+ <% }); %>
141
+ </select>
142
+ </form>
143
+
144
+ </body>
145
+ </html>
146
+ '''

1

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

2018/03/26 03:37

投稿

Nitta
Nitta

スコア96

title CHANGED
@@ -1,1 +1,1 @@
1
- DBからのデータ送信を受信し表示ししたい
1
+ ajax通信を利用してnodeでデータを送受信する。
body CHANGED
@@ -1,164 +1,5 @@
1
- >大変失礼しました。node初心者のものです。
1
+ >node初心者のものです。
2
- >今、顧客マスターを作成し、
3
- >最終的には業務システムを(仕事で)作成予定です。
4
- >今、混乱してるのがmysqlからデータ取得し、
5
- >格納しselectタグで(ここまではOK)
6
- >選択時、ajaxでデータをpost送信し
2
+ >ajaxでデータ送信したものをもとに
7
- >それをsql文で検索し
8
- >また返して表示としたいのですが、うまくいきません。
3
+ >mysqlからデータを取得し、表示させる方法はありますでしょうか？
9
- >なんとかしないとやばいので返信の程、宜しくお願いします。
4
+ >ご存じの方おられましたら、返信お願いします。
10
-
11
- ```javascript,mysql,node
12
- var ejs = require('ejs');
13
- var path = require('path');
14
- const bodyParser = require('body-parser');
15
- var express = require('express');
16
- const app = express();
17
-
18
- //mysqlに接続
19
- var connection = require('./mysqlConnection');
20
-
21
- var nitta = [];
22
-
23
- my_sql = ""
24
- my_sql = "select CST_CD, CST_NAME from users ;"
25
-
26
- //接続します
27
- connection.connect();
28
-
29
- var query = connection.query(my_sql);
30
-
31
- //イベント発生
32
- query
33
- //エラー用
34
- .on('error', function(err) {
35
- console.log('err is: ', err );
36
- })
37
- //結果用
38
- .on('result', function(rows) {
39
- console.log(rows);
40
-
41
- nitta.push(rows);
42
- })
43
- //終了
44
- .on('end', function() {
45
- console.log('end');
46
- connection.destroy(); //終了
47
- });
48
-
49
- //urlencodedとjsonは別々に初期化する
50
- app.use(bodyParser.urlencoded({
51
- extended: true
52
- }));
5
+ >
53
-
54
- app.use(bodyParser.json());
55
-
56
- // ejsを使用するための設定
57
- app.set('views', __dirname + "\Views\");
58
- app.set('view engine', 'ejs');
59
-
60
- app.get('/', function(req, res) {
61
- //ejs テンプレートエンジンでレンダリング
62
- res.render('index.ejs', {
63
- message : nitta
64
- });
65
- });
66
-
67
- //2018.03.13追記
68
- app.get('/', function (req, res) {
69
- res.sendFile(__dirname + '\Views\reset.css');
70
- });
71
-
72
- app.use(function(req, res, next){
73
- res.header("Access-Control-Allow-Origin","*");
74
- res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
75
- next();
76
- })
77
-
78
- //postデータ受信
79
- app.post('/',function(req, res){
80
- var obj = {};
81
- console.log('body: ' + JSON.stringify(req.body.name));
82
- var rejson = JSON.stringify(req.body);
83
- res.send(rejson);
84
- //ここへmysql接続処理？
85
- });
86
-
87
- app.listen(8124, '127.0.0.1');
88
- ```
89
- ejs側
90
- ```
91
- <html>
92
- <head ng-app = "myApp">
93
- <link href="C:\Program Files\webserver\Test2\Views\reset2.css" rel="stylesheet" type="text/css">
94
- <!--↓AngularJS -->
95
- <script src="//code.angularjs.org/1.5.7/angular.min.js"></script>
96
- <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.js"></script>
97
- <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.js"></script>
98
- <script type="text/javascript" src="https://code.jquery.com/jquery-3.0.0.min.js"></script>
99
- <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js"></script>
100
-
101
- <script>
102
-
103
- $(function() {
104
-
105
- $('#selectCst').change(function() {
106
-
107
- var str = $('#selectCst option:selected').text();
108
-
109
- alert(str);
110
-
111
- $.ajax({
112
- async: false,
113
- url: 'http://localhost:8124',
114
- type: 'post',
115
- //↓挿入したいデータ(mysqlでのカラム:CST_NAME)
116
- data:{"name": str },
117
- dataType: 'json'
118
- }).done(function(res){
119
-
120
- console.debug(res);
121
-
122
- }).fail(function(xhr, status, error){
123
- alert(status);
124
- });
125
-
126
- });
127
-
128
- });
129
-
130
- </script>
131
-
132
- <title>customer</title>
133
- </head>
134
- <body>
135
- Customer_Master
136
- <div id="customerDisplay"></div>
137
- <div id="sqlDisplay"></div>
138
-
139
- <form id="form1" action="/" method="post">
140
- <select id="selectCst">
141
- <option value= "0" >Please select!!</option>
142
- <% message.forEach(function(messageItem) { %>
143
- <option value = "<%= messageItem.CST_CD %>"><%= messageItem.CST_NAME %></option>
144
- <% }); %>
145
- </select>
146
- <p>
147
- <input type="button" name="btnInsert" id="btnInsert" value="add">
148
- <input type="button" name="btnUpdate" id="btnUpdate" value="update">
149
- <input type="button" name="btnDelete" id="btnDelete" value="delete">
150
- //↓↓mysqlからの返信データをこちらに差し込みたい
151
- </p>
152
- CST_CD:<input type="text" name= "txtCstCd" id="txtCstCd">
153
- <a href="" name="linkMaxCd" id="linkMaxCd">Max</a>　<br />
154
- CST_NAME:<input type="text" name= "txtCstName" id="txtCstName"><br />
155
- TOWN_CD:<input type="text" name= "txtTownCd" id="txtTownCd"><br />
156
- ADDRESS:<input type="text" name= "txtAddress" id="txtAddress"><br />
157
- TEL:<input type="text" name= "txtTel" id="txtTel"><br />
158
- BIRTH:<input type="text" name= "txtBirth" id="txtBirth"><br />
159
- SEX_CD:<input type="text" name= "txtSexCd" id="txtSexCd">
160
- </form>
161
-
162
- </body>
163
- </html>
164
- ```**__~~### ボールドテキスト~~__**