フォームの値にスクレイピング結果を入れる方法についてのアドバイスをお願いします

このQ&Aのポイント
  • スクレイピングした結果をフォームの値に入れる方法についてアドバイスをお願いします。
  • 現在、スクレイピングした結果をフォーム内に表示することができません。
  • どのようにすれば、<input type="text" name="tx" value="東京">の形でスクレイピング結果を表示させることができるでしょうか?
回答を見る
  • ベストアンサー

スクレイピングした内容を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="東京">の形で表示させる方法についてアドバイスいただきたくお願いいたします。

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

  • ベストアンサー
  • t_ohta
  • ベストアンサー率38% (5043/13172)
回答No.1

<script> url = 'http://hoge.ne.jp/index.html'; $.get(url, function(data){ var content4 = $(data.responseText).find('.class3').text(); $("#text4").val(content4); }); </script> <input type="text" name="tx" id="text4" value=""> </html>

tajix14
質問者

お礼

ありがとうございました。出来ました。 大変助かりました。深く御礼申し上げます。 お二人ともそれぞれの方法で出来ましたが、 value=""の部分までご指導いただけましたt_ohta様をベストアンサーとさせていただきます。 お二人ともありがとうございました。

その他の回答 (1)

  • sanzero
  • ベストアンサー率56% (58/102)
回答No.2

$("#text4").text(content4); を $("[name='tx']").val(content4); とすればいいんでないかな。 まずはjQueryのセレクターと各種メソッドを覚えることをお勧めします。 そんなに時間はかからないのでさらっと確認するだけでも役立ちますよ。

tajix14
質問者

お礼

ありがとうございました。出来ました。 大変助かりました。深く御礼申し上げます。

関連するQ&A

  • スクレイピングで取得した文字を変数表示

    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>  ↑上記のふたつとも表示出来ない 宜しくお願い致します。

  • ajax通信の戻り値が空になる。

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="jquery.xdomainajax.js"></script> <!-- 追加 --> <script type="text/javascript"> $.ajax( { url: URL, type: 'GET', cache: false, dataType: 'xml' } ) .done(function(res) { console.log(res); } ) .fail(function(res) { console.log('FAIL') } ); </script> </head> 上記のコードの通り(url部分は明記を省略)、jquery.xdomainajax.jsを用いたajax通信を行いたいのですが、通信は成功しているもののコンソールを見ると以下のようになっています。 Object { query: Object, results: Array[0] } 本来ならresultsの部分に返り値が格納されるのですが、空になってしまいます。 なにか原因があればご教授頂きたいです。よろしくお願い致します。

  • 複数jQueryの配置で干渉 設置位置

    Javascript事は全くわかりませんが、色々なプラグインとしてjQueryを利用しています。 ----------------- jQueryに干渉があったようで、正常に動作させたいのですが、疑問があります。 1サイト目(HTML 最下部に配置) <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> 正常に動作します。 2サイト目(HTML head内に配置) <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> 正常に動作します。 上記の2サイトを合体させた:(HTML 最下部に配置) <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> <script src="js/abcd.js" type="text/javascript"></script> すると、 layout.min.jsに不具合がでるようです・・・ <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> でも、ダメです。 <script src="vendor/jquery.min.js" type="text/javascript"></script> を <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> に変更してもダメでした。 tel.js内を、 jQuery.noConflict(); (function($) { $(function(){ を $j に変えたり、 jQuery に 書き替えてもダメでした・・・ そこで、以下のように移動しましたら動作しました。 (HTML header内に配置) <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <script src="js/abcd.js" type="text/javascript"></script> (HTML 最下部に配置) <script src="vendor/jquery.min.js" type="text/javascript"></script> <script src="js/layout.min.js" type="text/javascript"></script> 上記のように、 HTML head部と、HTML 最下部に分けるのは、正しい方法なのでしょうか?

  • <hoge />と<hoge></hoge>の違い

    現在jQueryを使ったプログラムをしていて、気になった点があったので質問させていただきました。 具体的には <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" charset="utf-8"/> <script type="text/javascript"> function show() { } </script> こんなソースを書いていましたが、showメソッドが認識されていませんでした。 そこで <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" charset="utf-8"></script> とかくと、後ろのメソッドも認識されました。 ここで疑問なのは</>と</script>の違いです。 この2つは何がちがうのでしょうか?

  • 同HTML内で複数のjQueryを設置する方法

    Movable Type5で作製しています。 複数のjQueryを使用し、(A)はヘッダーにメニュー、(B)はコメントフォームにテキストをうっすらと出すプラグインを適用させようとしています。 それぞれ単品では問題なく作動するのですが、下記のように記述するとBのみが作動する状態です。 jQueryもjsもよくわからない素人なのでわかりやすくご説明を頂けるとありがたいです。 使用しているものは以下です。 ---------------------------------------- <script type="text/javascript" src="<$mt:Link template="javascript"$>"></script> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.3");</script> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script> <script type="text/javascript"> var $ = jQuery = jQuery.noConflict().extend(true, $); … </script> <script type="text/javascript" src="<$mt:BlogURL$>js/jquery.updnWatermark.js"></script> <script type="text/javascript"> jQuery(document).ready(function($) { $.updnWatermark.attachAll(); }); </script> <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js'></script> <script type="text/javascript" src="<$mt:Link template="javascript"$>"></script> <script type="text/javascript" src="<$mt:Link>index/js/jquery-1.1.3.1.min.js"></script> <script type="text/javascript" src="<$mt:Link>index/js/jquery.easing.min.js"></script> <script type="text/javascript" src="<$mt:Link>index/js/jquery.lavalamp.min.js"></script> <script type="text/javascript"> $(function() { $("#1, #2, #3").lavaLamp({ fx: "backout", speed: 800, click: function(event, menuItem) { return true; } }); }); </script> http://okwave.jp/qa/q6602248.html ↑に質問をされた方のは見たのですが、それでもわかりません(同様の質問なのかも不明ですが・・・) 本当にわからないので、宜しくお願いします。

  • クロスドメインで取得したページが文字化けする

    クロスドメインでページを取得する事は成功したのですが、 たまに文字化けするページが存在します。 以下のページが文字化けして旨く取得できませんでした。 相手のサイトの文字コードはutf-8なので行けるはずなのですが・・・ https://www.amazon.co.jp/gp/offer-listing/B002HJVG3W/ スクリプトは以下の様に書きました。 jquery.xdomainajax.jsは、以下のページの物を使っています。 https://github.com/padolsey/jquery.fn/blob/master/cross-domain-ajax/jquery.xdomainajax.js scriptCharset:"utf-8"を入れたりしても変わらないです。。。 どうすれば良いかお手上げ状態です。よろしくお願いします。 ====ここから==== <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="jquery.xdomainajax.js" type="text/javascript"></script> <script> var content =""; $(document).ready(function(){ $.ajax({ url: 'https://www.amazon.co.jp/gp/offer-listing/B002HJVG3W/', type: 'GET', success: function(res) { content = $(res.responseText).text(); console.log(content); } }); }); </script> </head> <body> </body> </html>

  • これはどういう意味のコードですか?

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" charset="shift_jis"></script> これはどういう意味のコードですか? 私のサイトに入ってるコードですが意味が分からないまま使っています。 サイト内でjqueryで検索機能はつけていますが ネットから拾ってきたものを組み合わせたものであり、 意味は分かっていません。 src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" の意味だけ教えていただけませんか? jqueryを使う上での宣言みたいなものでしょうか?

  • jsファイルの記述順について

    レスポンシブデザインでホームページを制作しています。 解決できない問題に直面してしまいました。 どなたか詳しい方がいらっしゃいましたらアドバイスをお願い致します。 同一ページ内に qTip … ttp://craigsworks.com/projects/qtip/demos/content/loading と Naver … ttp://formstone.it/components/Naver/demo/index.html を使用したいと考えています。 しかし、色々と試してはいるのですが片方しか作動しません。 どちらも単体ではきちんと作動していますので、記述の順序の問題なのでしょうか。 該当部分は以下の通りです。 <head> <link type="text/css" rel="stylesheet" href="css/jquery.fs.naver.css" /> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script> <script type="text/javascript" src="js/scrolltopcontrol.js"></script> <script type="text/javascript" src="js/smart-crossfade.js"></script> <script type="text/javascript" src="js/jquery.smoothScroll.js"></script> <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script> <!-- qTip --> <script type="text/javascript" src="js/jquery-1.3.2.js"></script> <script type="text/javascript"> // Create the tooltips only on document load $(document).ready(function() { // Use the each() method to gain access to each elements attributes $('.col-lg-12 a[rel]').each(function() { $(this).qtip( { content: { // Set the text to an image HTML string with the correct src URL to the loading image you want to use text: '<img class="throbber" src="http://craigsworks.com/projects/qtip/images/throbber.gif" alt="Loading..." />', url: $(this).attr('rel'), // Use the rel attribute of each element for the url to load title: { text: 'WORKS' + $(this).text(), // Give the tooltip a title using each elements text button: '×' // Show a close link in the title } }, position: { corner: { target: 'bottomMiddle', // Position the tooltip above the link tooltip: 'topMiddle' }, adjust: { screen: true // Keep the tooltip on-screen at all times } }, show: { when: 'click', solo: true // Only show one tooltip at a time }, hide: 'unfocus', style: { tip: true, // Apply a speech bubble tip to the tooltip at the designated tooltip corner border: { width: 0, radius: 4 }, name: 'light', // Use the default light style width: 280 // Set the tooltip width } }) }); }); </script> <!-- Naver --> <script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript" src="js/jquery.fs.naver.js"></script> <script type="text/javascript"> $(function(){ $("nav").naver({ animated: true, labelClosed: "", labelOpen: "" }); }); </script> </head> <body>直前に … <script type="text/javascript" src="js/jquery.qtip-1.0.0-rc3.js"></script> </body> 力不足で本当にお恥ずかしいのですが、よろしくお願い致します。

  • 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はあまりいじったことないので 手が出ない状態です。 よろしくお願いします。

  • google apiの使用方法

    jQueryとgoogleマップのapiを同時に使用する方法を教えていただきたいと思います。 両方を使用するとカスタマイズしたgoogleマップは表示されますが、jQueryに不具合が起きます。 同時に使用する方法はないでしょうか。 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script type='text/javascript' charset='utf-8' src='http://maps.googleapis.com/maps/api/js?&sensor=false'></script> 他に必要なことがあれば提示しますのでよろしくお願いします。

    • 締切済み
    • CSS