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

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

ただいまの
回答率

89.99%

ajax通信をnodeでやることはできますか?

受付中

回答 1

投稿 編集

  • 評価
  • クリップ 0
  • VIEW 2,270

Nitta

score 79

>はじめまして、node初心者のものです。
>mysql+nodeでやっています。
>今、ajax通信でデータ送信したものを
>nodeに送りそのデータでコンソールを
>上げたいのですが、上がりません。

>ajaxから送るデータはdbから取得したもので
>それをデータ送信するようにしています。
>(mysqlからデータ取得し、selectタグに挿入は可能)

試した事:
①mysqlからデータは取得可能でテンプレートにもデータ格納可能。
(ejsにデータ表示され、selectタブで選択可能を確認)
②jqueryのイベントではalertが上がる。
(ajax~failを停止して確認済み)

>ajaxから送信する際のイベントの設定方法が
>悪いのでしょうか?それとも受信側のコードが悪いのでしょうか?
>わかる方いらっしゃいましたら、ご教授下さい。
>是非、返信お願いします。

// 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');


>表示側

    <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>
  • 気になる質問をクリップする

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

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

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

質問への追記・修正、ベストアンサー選択の依頼

  • miyabi-sun

    2018/03/26 12:52

    コードのエスケープはシングルクォート(': Shift+7)ではなく、バッククォート(`: Shift+@)で行ってください。編集画面の所でプレビューがありますのでちゃんとコードブロックになることを確認してください。

    キャンセル

  • 退会済みユーザー

    2018/03/26 14:38

    複数のユーザーから「やってほしいことだけを記載した丸投げの質問」という意見がありました
    「質問を編集する」ボタンから編集を行い、調査したこと・試したことを記入していただくと、回答が得られやすくなります。

  • Nitta

    2018/03/26 14:50

    大変申し訳ないです。前回のものも含め一旦消去できないでしょうか?再度良く検討したいためです。

    キャンセル

回答 1

0

teratailを「サポートセンター」だとは思わないでください。
作業依頼のような投稿をして、課題や仕事を無償でやってもらえる場ではありません。
あなたがそのようなつもりで質問しているのだと他のユーザーから誤解されないように、丁寧な質問を心がけましょう。
質問の仕方がわからない時は、このページに書かれている事を参考にしてみてください。
https://teratail.com/help/question-tips

とのことです。

課題や仕事を無償でやってもらえる場と捉えている場合は、発注しましょう。
そうでない場合は、上記ページを参考に質問文を大幅に改善しましょう。

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

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

  • ただいまの回答率 89.99%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる

同じタグがついた質問を見る