LoginSignup
29

More than 5 years have passed since last update.

Node.jsとjQuery.Ajaxの通信

Last updated at Posted at 2017-02-11

node.jsとJQueryのajaxとを通信してみる

今回機会があり、フロント側のことしか学習してこなかった著者がバックとの通信を始め、色々とハマったことがあるのでメモ程度として使う

node.jsとJQueryの導入

たくさんの紹介サイトがあるので、導入部分は割愛
jQuery入門講座
著者も学習当初はよく利用したサイト

いまアツいJavaScript!ゼロから始めるNode.js入門〜5分で環境構築編〜
導入から簡単な動きの確認もできます。

npmを使って必要なモジュールをインストールする

今回はexpressというモジュールを使用
導入
Expressのインストール

実際に通信をしてみる

今回はjson形式をnode.jsに送ってみる
以下ソースコード

sample.html
<!DOCTYPE html>
<html lang="ja">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
     <script type="text/javascript" src="jquery-3.1.1.min.js"></script>
    <title>sample</title>
</head>
<body>
<input type="button" id="gonode" value="通信">

<script>
$(function(){
    $('gonode').click(function(){
        alert('');
        $.ajax({
          async: false,
              url: 'http://localhost:8124',
          type: 'post',
          data:{"name": "musa"},
          dataType: 'json'
                }).done(function(res){
                 console.debug(res);
                }).fail(function(xhr, status, error){
                   alert(status);
                });

    });
});                
</script>
</body>
</html>
node.js
var express = require('express');
var bodyParser = require('body-parser');
var app = express();

app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());

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

これで準備万端。通信開始
コンソール上にbody: musaと表示されて成功!!

と思いきや

alertでerrorが出できた。
どうやらfail処理に行ってしまったようだ(doneは成功時の処理、failは失敗時の処理)
なぜなのか理解できなかったので、ネットで聞いたり、調べていくと

CORSという聞いたことのない単語が

以下説明と解決策
expressにてCORSを許可する

なるほどと思い、早速やってみる

node.js
var express = require('express');
var bodyParser = require('body-parser');
var app = express();

app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());
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();
})
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);

すると、doneの処理にいき、ブラウザのconsole上に{name:"musa"}と表示されるようになった。

まとめ

サーバー周りはやっぱり苦手。
JavaScriptとnode.jsの接続方法はたくさんあったが、難しかったから自分流にやってみたが、うまくできる人はもっと上手くできるのかもしれないと思った。
これを応用すれば、データベースの接続も可能だと思うので、今度はデータベースの接続をする(むしろそれが目的)

以下利用したOS,サーバー等
ubuntu(仮想マシン)
apache2

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
29