現在PerlのフレームワークであるMojoliciousとJavascriptのjQueryを使ってAjaxを利用したアプリケーションを作ろうとしているのですが、クライアント側で、サーバに送信するためのJSON形式のデータがうまく作れません。

例えば、ブラウザ上の表のセルをダブルクリックしたときにそのデータを書き換えられるようにし、その更新データをJSONでサーバ側に送りたいのですが、
<table>
<tr><th>name</th><th>email</th></tr>
<tr><td class="name">山田</td><td class="email">yamada**@gmail.com</td></tr>
</table>
とある表のセルの山田のアドレスをyamada**@gmail.com -> yamada**@yahoo.co.jpと変更した場合、javascript(jQuery)で次のようなJSONデータを作りたいです。
{ "email" : "yamada**@yahoo.co.jp"}
左側のemailは動的にセルのclass属性から取得したいのですが、方法が分かりません。
実際にはemail以外にも多数の列がありますので、なるべく動的にclass属性を取得したいのですが、良いJSONの生成方法やJSONを用いた他のデータ構造があれば教えていただきたいです。

このQ&Aに関連する最新のQ&A

A 回答 (4件)

>ANo.3



すみません、ダブルクォーテーションとシングルクォーテーションの対応が間違ってますが、
適宜調整して下さい。
    • good
    • 0

JavaScriptオブジェクトをJSON形式でダンプするライブラリとか、


(No.1、No.2で紹介されているのもこのタイプだと思います)
XMLデータを{タグ名:ノードバリュー}に対応させたJavaScriptオブジェクトに変換するライブラリは多いですが、
それ以前の処理、
つまりclassなどからオブジェクトを生成したり、JSONに変換するという独自ルールを使うなら、
自分でオブジェクトに変換したり、JSONで出力しないとダメなのでは?


-----------
var property='email';
var json='{"'+ property + '": "' + document.getElementsByClassName(property)[0] + '"}';

alert(json);

-----------
var property='email';
var object={};
object[property]=document.getElementsByClassName(property)[0];

/*** objectをjsonにダンプするライブラリを使用して下さい ***/
var dump=ライブラリ関数(object);

alert(dump);

------------
なお、classは複数存在させることが可能ですので、
<td class="email">・・・</td>
<td class="email">・・・</td>
となっている場合でも、1つめのemailしか取得できないようにしています。

もし全部を取得するのであれば、
配列にするなど、何らかの処理を施す必要がありますが、
HTMLドキュメントのフォーマットなどに合わせて調整してみてください。
    • good
    • 0

JSON.stringify は ES5 で標準化されたので最近のブラウザなら使用可能です。


http://es5.github.com/#x15.12.3
未対応ブラウザには json2.js を適用すれば対応できます。
http://json.org/js.html

他の手段としては CSV に変換しても良さそうです。
http://codezine.jp/article/detail/2364
http://www.ietf.org/rfc/rfc4180.txt

"name","email"
"山田","yamada**@gmail.com"
"佐藤","satou**@gmail.com"
    • good
    • 0

IEのJscriptでサポートしてるかどうか調べてませんが、


javascript1.7から
 var str = JSON.stringify(value[, replacer [, space]]);
というメソッドがあります。使えそうですね
(参考)
https://developer.mozilla.org/en/JavaScript/Refe …

というより、やっぱりサーバー側でJSONデータに組み立てたほうがよいかな。

※GETやPOSTで送れるのは文字列です。マルチパートでバイナリーファイルも送れますが...
    • good
    • 0

このQ&Aに関連する人気のQ&A

お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!

このQ&Aを見た人はこんなQ&Aも見ています

このQ&Aを見た人が検索しているワード

このQ&Aと関連する良く見られている質問

QHTMLフォームのSELECTの幅を一定にするためには?

HTMLフォームのSELECTの幅を一定にするためにはどのようにすれば
いいのでしょうか?

CSS等で設定できるとありがたいのですが、やり方がわかりません。

Aベストアンサー

<select style="width: 200px">

Q外部ファイルにしたら文字化けしてしまいました

FC2ブログで下記【1】を

<script type="text/javascript">
<!--
【1】
// -->
</script>

で囲んで直接プラグインに書き込んだら
文字化けせずに表示されたのですが、

外部ファイルにして

<script type="text/javascript" src="【1】のJSファイルのパス"></script>

をプラグインに書き込んだら、
画像リンクはうまく表示されたのですが、
文字化けしてしまいました。

文字化けしない方法はないでしょうか?


【1】
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先のアドレス(数字は画像と対応)
jmp[0] = "http://~";
jmp[1] = "http://~";
jmp[2] = "http://~";
jmp[3] = "http://~";
jmp[4] = "http://~";
// 画像のアドレス(数字はジャンプ先のアドレスと対応)
img[0] = "img/img1.jpg";
img[1] = "img/img2.jpg";
img[2] = "img/img3.jpg";
img[3] = "img/img4.jpg";
img[4] = "img/img5.jpg";
n = Math.floor(Math.random()*jmp.length);
document.write("<a href='"+jmp[n]+"' target='_blank'>");
document.write("<img src='"+img[n]+"' border='0'>");
document.write("</a>");

FC2ブログで下記【1】を

<script type="text/javascript">
<!--
【1】
// -->
</script>

で囲んで直接プラグインに書き込んだら
文字化けせずに表示されたのですが、

外部ファイルにして

<script type="text/javascript" src="【1】のJSファイルのパス"></script>

をプラグインに書き込んだら、
画像リンクはうまく表示されたのですが、
文字化けしてしまいました。

文字化けしない方法はないでしょうか?


【1】
// ランダムに画像を表示する
jmp = new Array();
img = new Array();
// ジャンプ先...続きを読む

Aベストアンサー

自分は5歳児だろうが主婦だろうが手は抜きません。


とりあえず試しに、

<script type="text/javascript" src="JSファイルへのパス" charset="Shift-JIS"></script>

~と言う風にしてみて下さい( charset="Shift-JIS" というのを付け足す)。それで文字化けが直るようなら、貴方のJSファイルの文字コードは「Shift-JIS」と言う事になります。FC2のBlogサービスですか?それでHPやBlogを作っているのなら、基本的には文字コードはサーバ側、つまりこの場合は「EUC-JP」に統一するべき~という事になります。

一般的に、Windowsの標準の環境だと。前段で述べた様な、様々な種類の文字コードを扱う事が出来ないので。事実上、作業は「Shift-JIS」1択と言う事になります。また『メモ帳(notepad.exe)』では「改行コード」を編集出来ないので、HTMLやJavaScript(JSファイル)を編集するには力不足です。何か特別なソフトとかを使わずに、Windows標準の『メモ帳(notepad.exe)』でJSファイルを編集したのであれば、十中八九、文字コードは「Shift-JIS」になっているはずです。


>文字コード
「文字コード」とは、コンピュータ上でテキストファイル(*.txt)をやり取りする時の方式の事で、現在では100種類近くの文字コードがあります。インターネット上でよく使われる文字コードは、「UTF-8」、「Shift-JIS」、「EUC-JP」~の3種類で、基本的にはこれだけ押さえておけばOKです。

考え方としては、日本語や英語のように。同じ意味を持つ文書でも色んな国の言葉で書く事が出来る様に。コンピュータ上での文書の表し方にも方言というか、色んな国の言葉がある様な物だと思ってて下さい。先に述べた「改行コード」や「BOM無し」とかは忘れて下さい。

で、初心者はコレだけ覚えて置いて欲しいのですが…

・半角英数文字だけなら文字化けは起きない

~と(実際は違いますが、話がややこしくなるので簡単にします)。半角英数文字ってのは「abc,?!#123456+-=」みたいな文字の事です。全角文字とは違うので注意して下さい(全角文字 → abc,?!#123456+-=)。従って逆説的に言えば「日本語を使う時は常に文字コードの影響を受ける」と言う事です。

自分は5歳児だろうが主婦だろうが手は抜きません。


とりあえず試しに、

<script type="text/javascript" src="JSファイルへのパス" charset="Shift-JIS"></script>

~と言う風にしてみて下さい( charset="Shift-JIS" というのを付け足す)。それで文字化けが直るようなら、貴方のJSファイルの文字コードは「Shift-JIS」と言う事になります。FC2のBlogサービスですか?それでHPやBlogを作っているのなら、基本的には文字コードはサーバ側、つまりこの場合は「EUC-JP」に統一するべき~という事になります。

...続きを読む

Qテキストエリア内の文字の装飾

<textarea>で囲んだ文章を、部分的に
・色を変えたり
・太字にしたり
・大きさを変えたり
etc...
したいのですが、このエリアで囲まれた文章は
<br>すら、htmlとして認識されませんよね?
(素直に記述上で改行すれば、反映されますが)

テキストエリア内で、htmlのように文字修飾をするには
どうすればよいのでしょうか?
ついでに、テキストエリアの背景なのも設定できる
ものなのでしょうか?

フレームとして、新たなページを1つ作るのは
できるだけ避けたいのです。

Aベストアンサー

TEXTAREAってのは、あくまでも複数行入力可能な「入力用」の要素ですからね。あまり色々書ける方が不都合なんです。そのままサーバのプログラム(cgiとか)にテキスト・データとして渡したりしますので。

#入力用以外に使うこともできますけど、あまりいい方法ではないです、色んな面で。

入力用ではなくて、表示用に右にスクロールバーのついた領域が欲しいということなら、IE5.5とNetscape6以上でしたらスタイルシートだけで可能です。

<html>
<head>
<title>TEXTAREAみたいなスタイルシート</title>
<style>
<!--
div.ScrollBox {overflow:auto;width:300px;height:50px;border:1px black solid;margin:0px}
-->
</style>
<body>
<div class="ScrollBox">
<p>
ここに、色々文章を書きます。<br>
この中は、タグによる<em>マークアップができます</em>のでお好きなように。<br>
DIV要素を大きさ固定にして、そこからはみ出すようだったら<strong>スクロールバーがでる</strong>ようにしてるだけなんですけどね。
</p>
</div>
</body>
</html>

この方法ですとDIV要素の中も普通のHTMLですので、まぁ何でも書けます。DIV要素のスタイル設定の方に背景を指定すれば当然背景も設定できます。

TEXTAREAってのは、あくまでも複数行入力可能な「入力用」の要素ですからね。あまり色々書ける方が不都合なんです。そのままサーバのプログラム(cgiとか)にテキスト・データとして渡したりしますので。

#入力用以外に使うこともできますけど、あまりいい方法ではないです、色んな面で。

入力用ではなくて、表示用に右にスクロールバーのついた領域が欲しいということなら、IE5.5とNetscape6以上でしたらスタイルシートだけで可能です。

<html>
<head>
<title>TEXTAREAみたいなスタイルシート</title>...続きを読む

Q