JQueryでURL取得から文字列作成

2023/09/06 03:10

このQ&Aのポイント

JQueryを使用して開いているページのURLから指定したパラメータを取得し、新しいURLを作成する方法について教えてください。
また、作成した新しいURLを使用して特定のセレクタにデータをロードする方法も知りたいです。
初心者なので、詳しく説明していただけると助かります。

ベストアンサー

JQueryでURL取得から文字列作成

2015/01/21 10:50

やりたいこととして開いているページのURLを取得し .param()で指定したパラメータ(catg)だけを抜き出す抜き出したパラメーターを指定した文字列の末尾にくっつけて新しいURLとして loadを用いて特定のセレクタを空のdivに流し込む以上のことを行いたいです書いては見たのですが動作せずで・・・ <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script type="text/javascript"> $(function() { var url = $.url().param(); url.catg; var str; str = "http://www.test.com" + url +"/"; $('#sample') .load('str dummy'); }); </script> <div id="sample"></div> 初心者のためあまり理解せずに書いている状態ですどのようにすればよいかご教授いただけませんでしょうか？

40104
お礼率56% (18/32)

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

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

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

ベストアンサー

sanzero
ベストアンサー率56% (58/102)

2015/01/21 12:46 回答No.1

そもそもurlというメソッドはjQueryにありません。おそらく、その書き方からすると、jQuery-URL-Parserというプラグインを使うのではと思います。 http://www.webopixel.net/javascript/416.html そのプラグインを読み込んだらこんな感じで書けば良いと思います。 $(function() { var catg = $.url().param(”catg”), load_url = "http://www.test.com/" + catg; // load_url 内のdummy_idブロック内の要素を取得 $('#sample').load(load + ' #dummy_id'); }); javascriptの開発にはfirefoxのfirebugかchromeの開発者ツールのコンソールを見るとよいです。

質問者

お礼 2015/02/05 09:28

ありがとうございます！ご指摘いただいた内容で試行錯誤して実装することができました！

関連するQ&A

jQueryにて背景のURLを取得
jQueryにて背景のURLを取得しimgを表示する場合で背景を縦横の倍率を50％に縮小するにはjavascriptをどうすればいいのでしょうか？【javascript】 jQuery(function($){ var ori_img = $("#crop_img"); crop_window.css({'background-image': 'url('+ori_img.attr('src')+')'}); }); 【HTML部分】 <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <div id="crop"> <img src="./test.jpg" id="crop_img" alt="" > <div id="crop_window"></div> </div>
- ベストアンサー
- AJAX
jQueryが動きません。
表題のとおりです。 fademover(http://www.detelu.com/fademover/)を動かそうと思って導入しても動いてくれません。 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script src="jquery.fademover.js"></script> <script> $(function(){ $('body').fadeMover({'effectType': 2,'inSpeed': 5000}); }); </script> の部分。 Chromeだと Uncaught TypeError: Object [object Object] has no method 'fadeMover' index.html:14 (anonymous function) index.html:14 n ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 o.fireWith ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 e.extend.ready ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:2 c.addEventListener.B Safariだと TypeError: 'undefined' is not a function (evaluating '$('body').fadeMover({'effectType': 2,'inSpeed': 5000})') と出ます。 jsやjqueryはあまりいじったことないので手が出ない状態です。よろしくお願いします。
- 締切済み
- JavaScript
jquery3系がうまくいかない
jquery3系が出ていたので使ってみたのですが、CDNはうまくいったのですが、そのものをダウンロードして使うほうがうまくいきません。 https://code.jquery.com/jquery-3.1.1.min.js のソースコードをコピペしてjquery-3.1.1.min.jsというファイルを自分で作って下記のようにしているのですが、CDNが読み込まれなかった場合に読み込むというやり方のようです。    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> <script>window.jQuery || document.write('<script src="/js/jquery-3.1.1.min.js"><\/script>')</script>   ・もちろん下記のようにもしましたが駄目でした。    <script>window.jQuery || document.write('<script src="/js/jquery-3.1.1.min.js"><\/script>')</script>  
- ベストアンサー
- JavaScript
jquery
とあるサイトの 1つのソースの中に <scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> と <scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"> があるのですがこの二つは意味が違うのでしょうか？バージョンが 1.7.1と1.11.1になっていますが 1.11.1が数字が高いから、1.11.1だけあればいいのでしょうか？
- 締切済み
- JavaScript
何をする為のjqueryなのでしょうか？
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> は何をする為のjqueryなのでしょうか？ googleと言う単語がパスの中に入ってますが googleに関連するものでしょうか？
- ベストアンサー
- JavaScript
スクレイピングした内容をvalue値に入れたい
下記のようなページがあります。 ++++++++++++++++++++++++++++++++++++++++++ 【http://hoge.ne.jp/index.html】 <html> <table border="1"> <tbody> <tr> <td class="class3">東京</td> </tr> </tbody> </table> </html> ++++++++++++++++++++++++++++++++++++++++++ 【出来たこと】上記の東京という文字を抜き出すスクレイピングページを作りました。 ****************************************** 【http://hogehoge.com/index.html】 <html> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.xdomainajax.js"></script> <script> url = 'http://hoge.ne.jp/index.html'; $.get(url, function(data){ var content4 = $(data.responseText).find('.class3').text(); $("#text4").text(content4); }); </script> <div id="text4"></div> </html> 結果　→　東京 ************************************** 【出来なかったこと】これを、<input type="text" name="tx" value="東京">　のような形でフォーム内に取り入れることを考えています。しかしながら、下記のようにうまくいきません。 ●●だめ　その1●● <html> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.xdomainajax.js"></script> <script> url = 'http://hoge.ne.jp/index.html'; $.get(url, function(data){ var content4 = $(data.responseText).find('.class3').text(); $("#text4").text(content4); }); </script> <input type="text" name="tx" value="<div id='text4'></div>"> </html> 結果　→　表示されず ●●だめ　その2●● <html> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.xdomainajax.js"></script> <script> url = 'http://hoge.ne.jp/index.html'; $.get(url, function(data){ var content4 = $(data.responseText).find('.class3').text(); $("#text4").text(content4); }); var tx4 = content4; document.write("<input type='text' name='tx' value='" + tx4 + "' />"); </script> </html> 結果　→　表示されず【お願いしたいこと】 <input type="text" name="tx" value="東京">の形で表示させる方法についてアドバイスいただきたくお願いいたします。
- ベストアンサー
- JavaScript
スクレイピングで取得した文字を変数表示
javascriptでiphoneアプリを作成中です。ゲームにあたり、自社サーバーのhoge.ne.jp/read1000.php上のデータベース情報をスクレイピンクしてiphone上で表示させます。下記により、「hoge.ne.jp/read1000.php」にあるソースの中から「吉本」の文字をスクレイピング表示することが可能です。 ****【hoge.ne.jp/read1000.php】(DBサーバー)******************** 　　　　　　<td class="class3_sql_name">吉本</td> ****【hogehoge.com/index.html】(iphone仮想サーバー)************** 　 <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.xdomainajax.js"></script> <script> url = 'http://hoge.ne.jp/read1000.php'; $.get(url, function(data){ var content3_sql_name = $(data.responseText).find('.class3_sql_name').text(); $("#text3_sql_name").text(content3_sql_name); }); </script> <div id="text3_sql_name"></div>　 //←この部分にhoge.ne.jpからスクレイピング　　　　　　　　　　　　　　　　　　　　　　した吉本の文字が表示される ************************************************************ やりたいことここで取得できた「吉本」の文字を変数としてjavascript上で表示させたいと考えています。下記のようにしたのですがグローバル変数、ローカル変数とも表示出来ません。どうすれば表示できるでしょうか? ****【hogehoge.com/index.html】(iphone仮想サーバー)************* <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script type="text/javascript" src="./js/jquery.xdomainajax.js"></script> <script> url = 'http://hoge.ne.jp/read1000.php'; $.get(url, function(data){ var content3_sql_name = $(data.responseText).find('.class3_sql_name').text(); $("#text3_sql_name").text(content3_sql_name); //テスト用としてグローバル変数追加 content3=$("#text3_sql_name").text(content3_sql_name); }); </script> <script> document.write(""+content3_sql_name+""); </script> <script> document.write(""+content3+""); </script> 　↑上記のふたつとも表示出来ない宜しくお願い致します。
- 締切済み
- JavaScript
jQueryでajax
ajax（jQuery使用）を使った以下のサンプルは、セレクトボックスを選択すると、ボタンを表示するのですが、そのボタンをクリックしても、アラート（This is success!）が表示されません。 ajaxで吐き出した<button>ボタン</button>のボタンのクリックイベントが検知しないような感じですが、いったいどこが間違っているのかわかりません。どなたか、ご教授いただけると助かります。 htmlソース ------------------------------------------- <meta http-equiv="content-script-Type" content="text/javascript" /> <meta http-equiv="content-style-Type" content="text/css" /> <link rel="stylesheet" href="./photo.css" media="all" /> <title> テスト</title> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript"> $(document).ready(function() { $("button").click(function() { alert("Test is success!"); }); $(".first").change(function() { var param = ''; $.ajax ({ type: "POST", url: "ajax.php", data: param, cache: false, success: function(res) { $("#result").html(res); } }); }); }); </script> </head> <body> <select name="first" class="first" id="first"> <option value="1">項目１</option> <option value="2">項目２</option> </select> <p>結果：</p> <div id="result" style="width:808px;"></div> </body> </html> phpソース ---------------------------------------- <?php echo '<button>ボタン</button>'; ?>
- ベストアンサー
- AJAX
jqueryのアニメーションが動かない！！
$(".skinTitleArea").css("opacity","0"); $(function(){ $(".skinTitleArea").animate({"opacity","1"},500); }; って入れても動かない。 http://ameblo.jp/koko5666/ アメブロなのですが、append等はちゃんと反映されてるのでjquery本体は読み込まれてます。なのにアニメーションanimateが動かない。入れるとjqueryが読み込まなくなって、他の記述も反映されなくなる。 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script> <script src="https://dl.dropbox.com/u/63681173/loveinstagram/jquery.common.js"></script> アニメーションが入ってるjavascriptは現在消してます https://dl.dropbox.com/u/63681173/loveinstagram/jquery.common.js
- ベストアンサー
- JavaScript
Jqueryの$.getで目当ての外部ファイルを読
jqueryの$.getで目当ての外部ファイルを読み込む方法でつまづいてしまいました。 searchファイル (resultsファイルを非同期通信で読み込むはずなのですが、読み込んでくれません。) <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script> <script type="text/javascript"> function getContents(){ //http://localhost/hoge/results/color_id:をブラウザ上で開くとファイルが返ってきます var http = $.get("http://localhost/hoge/results/color_id:",null, function(data) {$("#main").html(data);}); } </script> //読み込んだデータが表示される箇所なんですが・・・ <div id="main"></div> http://anond.hatelabo.jp/20101206224349 このサイトに書かれているとおりに外部のHTMLを読み込む事むJqueryを書いたのですが、全く反応してくれません。何か間違っているのでしょうか？
- ベストアンサー
- JavaScript