遠隔サーバー情報取得後発動のjavascript

2023/09/06 14:22

このQ&Aのポイント

スマートフォンアプリをjavascriptで作る方法として、遠隔サーバーから情報を取得する手法について紹介します。
現在の実装では、端末情報を取得した後にサーバーからデータを取得し、それを表示させる仕組みとなっています。
しかし、クリックによるタイマーの設定により、リスクや混雑時の問題が生じる可能性があります。

ベストアンサー

遠隔サーバー情報取得後発動のjavascript

2016/01/27 09:30

スマートフォンアプリをjavascriptで作っております。 ●【現在できていること】【1】まずは、アプリ内から、自分の端末情報(下記の場合「G:8116556330」(取得方法はappleのシステムに準ずる)を取ります。(下記はわかりやすくするために固定で記載してますが、実際にはjavascriptによる読み込みとなります) 【2】次に、そのデータに関する情報を、自社サーバーのデータに取りに行きます。 ( $.post("https://hoge.jp/search.php", {search_term : name_id}, function(data)) 【3】その情報を表示させます。【現在の仕様】【3】を表示させるためには【1】【2】が完全取得された後に【3】用のfunctionを発動させなければなりません。【1】取得のタイムラグ、【2】取得のタイムラグ、およびサーバーから端末までのタイムラグがあることから、現在、下記のようにbodyが読み込まれて5秒後に「document.getElementById('search_button2').click();」の形で時差クリックさせ「.click(function(e)」を発動させて【3】を表示させています。【困りごと】上記の方法だと、回線の混雑にかかわらず5秒後にクリックが発動されてしまうため、混雑時には表示できないリスクがあります。【やりたいこと】サーバーから端末に完全に情報を取得出来てから、即座に【3】用のfunctionを発動させたいです。または、クリックなど使用せず下記のGETスクリプト内で自動発動する方法があれば尚嬉しいです。 HTMLの読み込み後であればonloadが使用できますが、サーバー情報取得後というのが分かりません。ご指導いただきたくお願いいたします。【GETスクリプト】 <script type="text/javascript"> var name_id; name_id = 'G:8116556330'; $(document).ready(function(){ $("#search_button2").click(function(e){ e.preventDefault(); ajax_search(); }); }); function ajax_search(){ $("#search_results").show(); $.post("https://hoge.jp/search.php", {search_term : name_id}, function(data){ if (data.length>0){ $("#search_results").html(data); } }) } </script> 【時差スクリプト(body読み込み後5秒後にボタンをクリック)】 <SCRIPT language="JavaScript"> function loadHello(){ 　document.getElementById('search_button2').click(); } 　setTimeout(loadHello, 5000); </script> 【Body要素　ボタン　表示場所】 <body onLoad="loadHello()"> <a id="search_button2">search_button2</a> <div id="search_results"></div> </body>

tajix14
お礼率72% (175/242)

JavaScript
回答数1
ありがとう数1

みんなの回答 （1）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

t_ohta
ベストアンサー率38% (5076/13261)

2016/01/27 13:10 回答No.1

$.post のsuccess処理の中で document.getElementById('search_button2').click(); を実行すればいいんじゃないでしょうか？それと、jQuery 使って書いている所と、純粋なJavaScriptで書いている部分が混在してますが、統一した方がいいと思いますよ。

質問者

お礼 2016/01/28 12:21

有難うございます。当方の書き方が悪く、$.postが【3】より早く発動するというかきかたをしてしまいました。実際は、【3】の後に$.postが発動します。ただ、success処理の中で document.getElementById('search_button2').click(); を実行というヒントを頂きましたので、うまい処理が組めそうです。本当にありがとうございました。

関連するQ&A

1つのファイル上で複数のjavascriptを作動
ボタンを押したり、キーを入力すると別ファイルを呼び出すjavascriptがあります。今回、同じページに同スクリプトを2つ設置しました。 ********************************************* 【Script1】キーを入力すると./find.phpを呼び出す ********************************************* <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <script type='text/javascript'> $(document).ready(function(){ $("#search_results").slideUp(); $("#search_button").click(function(e){ e.preventDefault(); ajax_search(); }); $("#search_term").keyup(function(e){ e.preventDefault(); ajax_search(); }); }); function ajax_search(){ $("#search_results").show(); var search_val=$("#search_term").val(); $.post("./find.php", {search_term : search_val}, function(data){ if (data.length>0){ $("#search_results").html(data); } }) } </script> ************************************************* Script 1 を呼び出すキー入力画面 ************************************************* <form id="searchform" method="post"> <input type="text" name="search_term" id="search_term"/> <input type="submit" value="全表示" id="search_button" /> </form> ********************************************* 【Script 2】キーを入力すると./find_op.phpを呼び出す ********************************************* <script type='text/javascript'> $(document).ready(function(){ $("#search_results_op").slideUp(); $("#search_button_op").click(function(e){ e.preventDefault(); ajax_search(); }); $("#search_term_op").keyup(function(e){ e.preventDefault(); ajax_search(); }); }); function ajax_search(){ $("#search_results_op").show(); var search_val=$("#search_term_op").val(); $.post("./find_op.php", {search_term : search_val}, function(data2){ if (data2.length>0){ $("#search_results_op").html(data2); } }) } </script> ************************************************* Script 2 を呼び出すキー入力画面 ************************************************* <form id="searchform_op" method="post"> <input type="text" name="search_term_op" id="search_term_op" /> <input type="submit" value="全表示" id="search_button_op" /> </form> ********************************************* 問題点「Script 1 を呼び出すキー入力画面」上で文字を入力したりボタンを押したりすると、なぜかScript2が稼働してしまいます。 1つのページの中で、「Script 1」「Script2」がそれぞれ別々に稼働するためにはどこを変更すればよいでしょうか?
- ベストアンサー
- JavaScript
javascriptの動的読み込みについて教えてください
javascriptの動的読み込みについて教えてくださいいつもお世話になります。 jqueryを勉強中のものです。少しややこしいのですが、以下のmenu.htmlとmain.htmlを持ったframe.htmlで、メニューの試験ボタンを押してmain.htmlの<div id="target_id">にload.htmlを動的に読み込んだ時、loadされたhelloボタンが作動しません。 menu.htmlのtest()中のalert(data);でload.htmlの<script>が読み込まれていることは確認できるのですが・・何が原因でどこが悪いのでしょうか？よろしくご指導お願いします。 frame.html ----------------------------------------------------------- <html> <head> <title>Dynamic Load Test</title> </head> <frameset name="frame" cols="180,*"> <frame name="menu" src="menu.html"> <frame name="MainPanel" src="main.html"> </frameset> </html> ----------------------------------------------------------- menu.html ----------------------------------------------------------- <html> <head> <script src="http://code.jquery.com/jquery-latest.js"></script> <script type="text/javascript"></script> </head> <body> <button onClick="test();">試験</button> </body> </html> ----------------------------------------------------------- main.html ----------------------------------------------------------- <html> <head> </head> <body> <h1>main.html</h1> </body> <div id="target_id"></div> </html> ----------------------------------------------------------- load.html ----------------------------------------------------------- <h1>load.html</h1> <script type="text/javascript"></script> <button onClick="hello();">hello</button> -----------------------------------------------------------
- ベストアンサー
- JavaScript
getElementsByNameで要素が取得できない
久々にJavaScriptを組みました。以下のソースコードなんですが、ボタンクリック時にalertで「1」が表示されるはずだと思っているのですが、「0」が返ってきます。何かおかしなところはありますでしょうか？宜しくお願いします。 <html> <head> <script language="javascript"> function test(){ var obj = document.getElementsByName("name1"); alert(obj.length); } </script> </head> <body> <div name="name1"></div> <button onclick="test();">TEST</button> </body> </html>
- ベストアンサー
- JavaScript
同じ内容のスクリプトを同一ページに実装
同じボタンを特定回数連続で自動クリックするjavascriptを組みました。 (スクリプト名 loadHello) 下記で問題なく動作しました。 <script type="text/javascript"> //Searchボタンを0.5秒ごとに12回クリック window.onload = function loadHello(){ var counter = 1; var timerId = setInterval(function(){ 　document.getElementById('search_button').click(); if(counter >= 12){ clearInterval(timerId); } counter++; }, 500); } </script> <form id="searchform" name="searchform" method="POST"> <input type="hidden" name="play" id="play" value=""> <a id="search_button">search_button</a> </form> 次に、同じページに同様の働きをするloadHello2を組みました。 <script type="text/javascript"> //Searchボタンを0.5秒ごとに12回クリック window.onload = function loadHello2(){ var counter2 = 1; var timerId2 = setInterval(function(){ 　document.getElementById('search_button2').click(); if(counter2 >= 12){ clearInterval(timerId2); } counter2++; }, 500); } </script> <form id="searchform2" name="searchform2" method="POST"> <input type="hidden" name="play" id="play" value=""> <a id="search_button2">search_button2</a> </form> 上記のloadHelloとloadHello2を同じページに記載すると、なぜかloadHello2だけしか動作しません。単純なミスと思いますが、ご指導いただきたくお願いいたします。
- ベストアンサー
- JavaScript
2度押し防止のJavascript
先日、「買い」のボタンを押すと、100購入～800購入までがずらりと出てくるJavascriptをこちらでお教えいただきました。(ONEONE様　有難うございます) その際、「買いのボタン」の2度押し防止スクリプトも同時に組んでいただきました。それが末尾のスクリプトになります。質問買いボタンの2度押し防止は出来ていますが、100購入　200購入　300購入の連続買いができてしまう状況です。この連続買いの防止のjavascriptをご教示いただければと思います。当方は、 <script type="text/javascript"> jQuery(function($){ $("#btn0").click(function (e) { e.preventDefault(); $("#kai").show(); $(this).prop("disabled", true); }); $("#b_btn").click(function (e) { $(this).prop("disabled", true); }); }); </script> としてみたのですが、うまく行きませんでした。よろしくお願いいたします。 *************************************************************************** 現状 (買いボタンの2度押し防止は機能しているが　　　　100購入　200購入の連続買いができる状態) *************************************************************************** <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script> <form action="abc.cgi" method="post" name="form1" id="form1"> <button id="btn0">買い</button> <div id="kai" style="display:none"> <button id="b_btn" type="submit" name="b100" value="100">100購入</button><br> <button id="b_btn" type="submit" name="b200" value="200">200購入</button><br> <button id="b_btn" type="submit" name="b300" value="300">300購入</button><br> <button id="b_btn" type="submit" name="b400" value="400">400購入</button><br> <button id="b_btn" type="submit" name="b500" value="500">500購入</button><br> <button id="b_btn" type="submit" name="b600" value="600">600購入</button><br> <button id="b_btn" type="submit" name="b700" value="700">700購入</button><br> <button id="b_btn" type="submit" name="b800" value="800">800購入</button><br> </div> </form> <BR> <script type="text/javascript"> jQuery(function($){ $("#btn0").click(function (e) { e.preventDefault(); $("#kai").show(); $(this).prop("disabled", true); }); }); </script> ***********************************************************************
- ベストアンサー
- JavaScript
JavaScriptでプルダウンのサイズを取得
JavaScriptにてプルダウンのサイズ(<option>の数)を取得したいと思っています。 document.getElementById("pulldown").length　にて取得できると思うのですが試してみたところ無反応でした。どう書けばよろしいのでしょうか。 <html> <head> 　　　　<script type="text/JavaScript"> 　　　　　　　　　　　　　　alert(document.getElementById("pulldown").length); 　　　　</script> </head> <body> <form name="form"> <select name="pulldown" id="pulldown"> <option value="5">5</option> </select> </form> </body> </html>
- ベストアンサー
- JavaScript
子ウィンドウの情報を取得したい
window.openを複数行い、各ウィンドウの情報を取得したいのですが配列変数などで管理せずwindowなどで取得は可能でしょうか？試しに作成したソースです --ココカラ(oya.html)-- <html> <head> <script type="text/javascript">  </script> </head> <body> <input type="button" value="openKoA" onclick="openKoA()"> <input type="button" value="koListA" onclick="koListA()"> <br> <input type="button" value="openKoB" onclick="openKoB()"> <input type="button" value="koListB" onclick="koListB()"> </body> </html> --ココマデ(oya.html)-- --ココカラ（ko.html）-- <html> <body> <input type="text" id="t1" value="aa"> </body> </html> --ココマデ(ko.html)-- 以上、よろしくお願いします。
- 締切済み
- JavaScript
JavaScript onClick
JavaScript初心者です。クリックしたら音が出るようにしたいのですが音がでません。どなたかご回答よろしくお願いします。 <html> <head> <script language = "JavaScript">  </script> </head> <body> <bgsound src = # id = music autostart = true loop = true> <a href = # onClick = sound("img/oto.mp3")> <img src="img/picture.jpg"> </a> </body> </html>
- ベストアンサー
- JavaScript
javascriptでinput属性の入力
複数のボタンがあります。それぞれのボタンによって、value値を変えたいと考えています。通常であれば <button class='button' type='submit' name='volume' value='350'>350購入</button> <button class='button' type='submit' name='volume' value='450'>450購入</button> という形を利用しますが、理由があり、 type='submit' を使用できません。そこで、 <input id="button350" type="button" value="350購入" /> <input id="button450" type="button" value="450購入" /> というsubmit属性の無いボタンを使用しながら、「javascriptを使いname value を抽出しsubmitまで持っていく」ことを考えています。そこで、下記のようなものを2種類(350と450は別の記載方法でテスト)作ってみましたが、いずれもsubmitは出来ますが、value値を渡すことが出来ません。どのように書けば、name属性にvalue値を渡すことが可能でしょうか? <form action="abc.php" method="post" name="form2" id="form2"> <script> $(function(){ $('#button350').click(function() { $('input[type=\'submit\']'); $('input[name=\'volume\']'); $('input[value=\'350\']'); $('#form2').submit(); }); $('#button450').click(function() { $('input[type=\'submit\'],[name=\'d4_buy_stock_volume2\'],[value=\'450\']'); $('#form2').submit(); }); }); </script> <BR> <BR> <input id="button350" type="button" value="350購入" /> <BR> <input id="button450" type="button" value="450購入" /> </form>
- ベストアンサー
- JavaScript
JavaScriptでエレメントのIDを取得
JavaScriptで、エレメントのIDを取得する方法がわからず困っています。 [画像]ここをクリック [画像]ここをクリック上記が画面配置のイメージなのですが、「ここをクリック」の文字をクリックした時に、そのクリックされた<a>タグのIDを取得したいのです。以下が試行錯誤したソースの一部です。 [html] <img src="./test_01.gif" name="testImg01"> <a href="javascript" id="test_01" onclick="getID(this);">ここをクリック</> <img src="./test_02.gif" name="testImg02"> <a href="javascript" id="test_02" onclick="getID(this);">ここをクリック</a> [JavaScript] function getID(element) { var id = document.getElementById(id); alert(id); } 上記コードで得られたのは「null」という値でした。色々検索してはいるのですが、思うように値を取得できません。どうか知恵をお貸しください。
- ベストアンサー
- JavaScript