はじめまして、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></head> <body> Customer_Master <div id="customerDisplay"></div> <div id="sqlDisplay"></div><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>
<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>
あなたの回答
tips
プレビュー