###前提・実現したいこと
HTMLでぺら1サイトを作っています。
li内のボタンを押すと指定のサーバーへ情報を送るシステムを実装したいです。
「#btn_1」をクリックすると「192.168.111.111/api」へ「btn:A」「pc:1」「lang:jp」、
「#btn_2」をクリックすると「192.168.111.111/api」へ「btn:B」「pc:1」「lang:jp」、
「#btn_3」をクリックすると「192.168.111.111/api」へ「btn:C」「pc:1」「lang:jp」
という情報を送りたいです。
###発生している問題・エラーメッセージ
そもそも書き方がわからず混乱しております。
下記のようなコードを書いてみましたがこれで機能するのでしょうか?
また、これだと冗長すぎると思うのですが短くまとめられるところはありますか?
###該当のソースコード
<script> $( function() { $( '#btn_1' ) .click( function() { var hostUrl= 'http://192.168.111.111/api'; var param1 = "A"; var param2 = 1; var param3 = "jp"; $.ajax({ url: hostUrl, type:'POST', dataType: 'json', data : {btn : param1, pc : param2, lang : param3 }, }) }); $( '#btn_2' ) .click( function() { var hostUrl= 'http://192.168.111.111/api'; var param1 = "B"; var param2 = 1; var param3 = "jp"; $.ajax({ url: hostUrl, type:'POST', dataType: 'json', data : {btn : param1, pc : param2, lang : param3 }, }) }); $( '#btn_3' ) .click( function() { var hostUrl= 'http://192.168.111.111/api'; var param1 = "C"; var param2 = 1; var param3 = "jp"; $.ajax({ url: hostUrl, type:'POST', dataType: 'json', data : {btn : param1, pc : param2, lang : param3 }, }) }); } ); </script> <ul id="list"> <li id="button_1" ><img src="/img/jp/JP1.png" width="345px" alt="" id="title_1"></li> <li id="button_2"><img src="/img/jp/JP2.png" width="345px" alt="" id="title_2"></li> <li id="button_3"><img src="/img/jp/JP3.png" width="345px" alt="" id="title_3"></li> </ul>
ご回答ありがとうございます。
masaya_ohashi様とyambejp様のものをヒントにし、組み直してみました(データの型も修正しています。)。
switchで切り替える手法も取り入れてみたいと思います。
こちら、おかしいところありますでしょうか。
<script> $(".ajax_send") .click(function() { var _this = this; var pramObj = new Object({ "btn":$(_this).data('post-btn'), "pc":$(_this).data('post-pc'), "lang":$(_this).data('post-lang') }); parseInt($(this).data('post-pc')) + "&lang=" + $(this).data('post-lang'); $.ajax({ url:hostUrl, type:'POST', dataType:'text', data:pramObj, }).done(function(data) { }).fail(function(XMLHttpRequest, textStatus, errorThrown) { }).always(function( jqXHR, textStatus ) { }); }); }); </script> <li id="button_1" class="ajax_send" data-post-btn="A" data-post-pc="1" data-post-lang="jp"><img src="/img/jp/JP1.png" width="345px" alt="" id="title_1"></li> <li id="button_2" class="ajax_send" data-post-btn="B" data-post-pc="1" data-post-lang="jp"><img src="/img/jp/JP2.png" width="345px" alt="" id="title_2"></li> <li id="button_3" class="ajax_send" data-post-btn="C" data-post-pc="1" data-post-lang="jp"><img src="/img/jp/JP3.png" width="345px" alt="" id="title_3"></li>
回答2件
あなたの回答
tips
プレビュー
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2017/11/21 02:27