絶対完全無料ツールの紹介

エンジニア目線のブログです

jqueryでpostする時のclassの書き方

jQueryでpostしてその結果をjsonで受け取ってバリデーションエラーか正常にPOSTされたかを非同期で表示するとき。


html:
<div id="csrf">
<input type="hidden" value="" >
<span></span>
</div>

js:
var param = {
csrf : $('#csrf input').val(),
};

と書くよりも、

html:
<div>
<input type="hidden" value="<?=$csrf?>" id="csrf_in">
<span id="csrf_out"></span>
</div>
js:
var param = {
csrf : $('#csrf_in').val(),
};

と書くほうが処理が速いし、htmlのデザインが変更したときも対処しやすいという事がわかった。
例えば、あとでレスポンス表示をtableとあわして表示したいときDOM風に値を表示するといちいちJS側でもコードを書き直さないといけない。


書き直さないといけない例
js:
var param = {
csrf : $('#csrf input').val(),
};


var param = {
csrf : $('table tr').siblings('#csrf input').val(),
};

HTMLのデザインの変化に対応できるjqueryでの値の取得方法は一見スマートではないかもしれないけれど、IDとかclassでPOSTするタグとレスポンス表示タグ(主にspan)を1つずつ書いたほうがいいと思った。

2013.10.06