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

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

新規登録して質問してみよう
ただいま回答率
85.50%
jQuery Mobile

jQuery Mobileとはスマートフォンとタブレット用に最適化されたフレームワークです。様々な携帯端末にjQueryで作られたユーザーインターフェイスシステムを提供します。

Node.js

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

JavaScript

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

Q&A

解決済

2回答

6546閲覧

クライアントjsの変数をサーバサイドjsで取得したい

usr1tsk

総合スコア7

jQuery Mobile

jQuery Mobileとはスマートフォンとタブレット用に最適化されたフレームワークです。様々な携帯端末にjQueryで作られたユーザーインターフェイスシステムを提供します。

Node.js

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

JavaScript

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

0グッド

0クリップ

投稿2016/05/26 23:15

編集2016/05/26 23:18

###前提・実現したいこと
時刻表アプリを実現したい。フロントエンドはjQuery Mobile。サーバサイドはNode.js、DBはmysql。時刻表はHTMLのテーブルで表示し、編集できるようにする。保存ボタンを押したら、フロントエンドで編集した時刻表のデータをDBへ登録する。

###発生している問題・エラーメッセージ
HTML上のテーブルで編集したデータをNode.jsへ渡したいが、方法が分からない。
postリクエストの場合はform内のデータしか渡せない。テーブルの<td>タグ単位でデータを取得し、オブジェクトとしてサーバ側へ渡したい。もしくはDOMを丸ごとサーバー側へ渡したい。

エラーメッセージ

###該当のソースコード

ここにご自身が実行したソースコードを書いてください

###試したこと
http://qiita.com/armorik83/items/78bd3d785d0a97c82711
上記の方法を試した。しかし、サーバ上の変数をクライアントで受け取る、一方的な方法だった。クライアントのオブジェクトをサーバ上へ送りたい。

###補足情報(言語/FW/ツール等のバージョンなど)
言語:JavaScript
FW:express(nodejs),jquery mobile

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

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

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

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

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

guest

回答2

0

POSTリクエストで送信可能なのは文字列だけですので、何らかの手段で文字列にシリアライズする必要があります。

  • table.outerHTML
  • table要素ノードを二次元配列にし、JSON.stringify
  • table要素ノードをCSV文字列に変換

シリアライズした文字列は <input trpe="hidden"> に埋め込むか、XMLHttpRequest で送信して下さい。

Re: usr1tsk さん

投稿2016/05/26 23:35

think49

総合スコア18156

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

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

usr1tsk

2016/06/11 11:38

回答ありがとうございます。回答頂いたthink49様とteratailに心から敬意を表します。
guest

0

ベストアンサー

送信したデータをサーバ側でパース(デシリアライズ)することを考えると一度テーブル内のデータをObjectにしてからapplication/x-www-form-urlencoded、あるいはapplication/jsonで送信するのが妥当な方法だと思います。

jQuery mobileを使っているならajax()メソッドを使うと比較的お手軽に送信できます。

javascript

1/** 2 * データ例: 3 * 実際はテーブルから成形する 4 */ 5var row = { 6 from: { 7 station: 'Shibuya', 8 time: '13:03' 9 }, 10 to: { 11 station: 'Ikebukuro', 12 time: '13:18' 13 } 14}; 15 16 17/** 18 * ajaxを使った非同期POST 19 * これを送信ボタンを押した時に発火させるといい 20 */ 21$.ajax({ 22 type: "POST", 23 url: "/api/time-table/", 24 25 // シリアライズは勝手にやってくれる 26 data: row, 27 28 // jsonでシリアライズする場合 29 dataType: 'json', 30}) 31.done(function(res){ 32 // POST成功時の処理 33}) 34.fail(function(res){ 35 // POST失敗時の処理 36});

サーバサイドではexpress.jsでbody-parserをミドルウェアとして読み込む必要があります。

javascript

1var bodyParser = require('body-parser'); 2 3// application/x-www-form-urlencodedで送信する場合 4app.use(bodyParser.urlencoded({ extended: false })); 5 6// application/jsonで送信する場合 7app.use(bodyParser.json()); 8 9 10app.post('/api/time-table/', (req, res) => console.log(req.body)); 11// req.body => {from: {station: 'Shibuya', time: '13:03'}, to: {station: 'Ikebukuro', time: '13:18'}}

投稿2016/05/31 00:22

nukosuke

総合スコア145

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

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

usr1tsk

2016/06/11 07:54

欲しかった答えがここにありました。大変助かりました。ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

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

ただいまの回答率
85.50%

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

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

質問する

関連した質問