前提・実現したいこと
時刻表アプリを実現したい。フロントエンドは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
-
気になる質問をクリップする
クリップした質問は、後からいつでもマイページで確認できます。
またクリップした質問に回答があった際、通知やメールを受け取ることができます。
クリップを取り消します
-
良い質問の評価を上げる
以下のような質問は評価を上げましょう
- 質問内容が明確
- 自分も答えを知りたい
- 質問者以外のユーザにも役立つ
評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。
質問の評価を上げたことを取り消します
-
評価を下げられる数の上限に達しました
評価を下げることができません
- 1日5回まで評価を下げられます
- 1日に1ユーザに対して2回まで評価を下げられます
質問の評価を下げる
teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。
- プログラミングに関係のない質問
- やってほしいことだけを記載した丸投げの質問
- 問題・課題が含まれていない質問
- 意図的に内容が抹消された質問
- 過去に投稿した質問と同じ内容の質問
- 広告と受け取られるような投稿
評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。
質問の評価を下げたことを取り消します
この機能は開放されていません
評価を下げる条件を満たしてません
質問の評価を下げる機能の利用条件
この機能を利用するためには、以下の事項を行う必要があります。
- 質問回答など一定の行動
-
メールアドレスの認証
メールアドレスの認証
-
質問評価に関するヘルプページの閲覧
質問評価に関するヘルプページの閲覧
+2
POSTリクエストで送信可能なのは文字列だけですので、何らかの手段で文字列にシリアライズする必要があります。
table.outerHTML- table要素ノードを二次元配列にし、
JSON.stringify - table要素ノードをCSV文字列に変換
シリアライズした文字列は <input trpe="hidden"> に埋め込むか、XMLHttpRequest で送信して下さい。
Re: usr1tsk さん
投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
checkベストアンサー
+1
送信したデータをサーバ側でパース(デシリアライズ)することを考えると一度テーブル内のデータをObjectにしてからapplication/x-www-form-urlencoded、あるいはapplication/jsonで送信するのが妥当な方法だと思います。
jQuery mobileを使っているならajax()メソッドを使うと比較的お手軽に送信できます。
/**
* データ例：
* 実際はテーブルから成形する
*/
var row = {
from: {
station: 'Shibuya',
time: '13:03'
},
to: {
station: 'Ikebukuro',
time: '13:18'
}
};
/**
* ajaxを使った非同期POST
* これを送信ボタンを押した時に発火させるといい
*/
$.ajax({
type: "POST",
url: "/api/time-table/",
// シリアライズは勝手にやってくれる
data: row,
// jsonでシリアライズする場合
dataType: 'json',
})
.done(function(res){
// POST成功時の処理
})
.fail(function(res){
// POST失敗時の処理
});サーバサイドではexpress.jsでbody-parserをミドルウェアとして読み込む必要があります。
var bodyParser = require('body-parser');
// application/x-www-form-urlencodedで送信する場合
app.use(bodyParser.urlencoded({ extended: false }));
// application/jsonで送信する場合
app.use(bodyParser.json());
app.post('/api/time-table/', (req, res) => console.log(req.body));
// req.body => {from: {station: 'Shibuya', time: '13:03'}, to: {station: 'Ikebukuro', time: '13:18'}}投稿
-
回答の評価を上げる
以下のような回答は評価を上げましょう
- 正しい回答
- わかりやすい回答
- ためになる回答
評価が高い回答ほどページの上位に表示されます。
-
回答の評価を下げる
下記のような回答は推奨されていません。
- 間違っている回答
- 質問の回答になっていない投稿
- スパムや攻撃的な表現を用いた投稿
評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。
15分調べてもわからないことは、teratailで質問しよう！
- ただいまの回答率 88.32%
- 質問をまとめることで、思考を整理して素早く解決
- テンプレート機能で、簡単に質問をまとめられる
2016/06/11 20:38