質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.48%
MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

Q&A

0回答

470閲覧

DBからのデータを受信したい。

Nitta

総合スコア96

MySQL

MySQL(マイエスキューエル)は、TCX DataKonsultAB社などが開発するRDBMS(リレーショナルデータベースの管理システム)です。世界で最も人気の高いシステムで、オープンソースで開発されています。MySQLデータベースサーバは、高速性と信頼性があり、Linux、UNIX、Windowsなどの複数のプラットフォームで動作することができます。

Node.js

Node.jsとはGoogleのV8 JavaScriptエンジンを使用しているサーバーサイドのイベント駆動型プログラムです。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

Ajax

Ajaxとは、Webブラウザ内で搭載されているJavaScriptのHTTP通信機能を使って非同期通信を利用し、インターフェイスの構築などを行う技術の総称です。XMLドキュメントを指定したURLから読み込み、画面描画やユーザの操作などと並行してサーバと非同期に通信するWebアプリケーションを実現することができます。

0グッド

1クリップ

投稿2018/03/22 11:45

はじめまして、node初心者のものです。
今、顧客マスターを作成してます。
mysqlからデータ取得し、格納しselectタグで
選択時、ajaxでデータをpost送信しそれを
また返して表示としたいのですが、うまくいきません。

js側
// nodeのコアモジュールのhttpを使う
var http = require('http');
var ejs = require('ejs');
var qs = require('querystring');
var fs = require('fs');
var config = require('./config');
var server = http.createServer();
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>

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

miyabi-sun

2018/03/22 13:22

teratailの質問文・回答文はMarkdownで生成されます。コードは```(バッククォート3つ)の行で囲うようにしないとインデントが飛んだりしてエライコッチャになりますので、質問文の修正対応をよろしくお願いします。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.48%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問