HTMLをPHPでJSONにして返すには
- jqueryを使用してurlのhtmlファイルからtitleタグやh1タグの内容を抽出し、連想配列に格納する方法が分かりません。
- 上記のコードでは、test.phpからは[object Object]というレスポンスが返ってきてしまいます。
- HTMLをPHPでJSON形式に変換して返すためにはどのような修正が必要でしょうか。
- ベストアンサー
HTMLをPHPでJSONにして返すには
jqueryでurlをPHPに送って、そのurlのhtmlファイルから、titleタグやh1タグの内容を抽出し、連想配列に格納。そして、その連想配列をJSON形式にしてjqueryに返し、ｈｔｍｌにレンダリングしたいのですが上手くいきません。 <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function site_check(){ var url = $("#url").val(); if(url=="") return; $.getJSON("test.php?url=" + encodeURIComponent(url) ,function(res){ $("#title").html(res.title); $("#h1").html(res.h1); }); } </script> </head> <body> <div class="form"> URL <input type="text" id="url" value="" style="width:300px;" onfocus="this.select()" onkeypress="if(event.keyCode==13) site_check()" /> <button onclick="site_check()" />チェック</button> </div> title：<span id="title"></span></br> h1：<span id="h1"></span> </body> test.php↓ <?php $html=mb_convert_encoding(file_get_contents($_GET['url']), 'UTF-8', 'auto'); $array = array(); $pattern = "/(?<=<title>).+?(?=<\/title>)/mis"; preg_match($pattern,$html,$array['title']); $pattern = "/(?<=<h1>).+?(?=<\/h1>)/mis"; preg_match($pattern,$html,$array['h1']); header("Content-Type: application/json; charset=UTF-8"); echo json_encode($array); ?> このコードだと、test.phpからは、[object Object]と、レスポンスが返ってきてしまいます。
- shintaaarooo
- お礼率65% (13/20)
- PHP
- 回答数1
- ありがとう数2
- みんなの回答 （1）
- 専門家の回答
質問者が選んだベストアンサー
どうぞ <html> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> function site_check(){ var url = $("#url").val(); if(url=="") return; $.getJSON( "test.php", { url: encodeURIComponent(url) }, function( data, status ) { $("#title").html( data.title[0] ); $("#h1").html( data.h1[0] ); }); } </script> </head> <body> <div class="form"> URL <input type="text" id="url" value="" style="width:300px;" onfocus="this.select()" onkeypress="if(event.keyCode==13) site_check()" /> <button onclick="site_check()" />チェック</button> </div> title：<span id="title">aaa</span></br> h1：<span id="h1"></span> </body> </html> <?php ini_set( 'display_errors', 0 ); $html = file_get_contents( urldecode($_GET['url'] ) ); $html = mb_convert_encoding( $html, 'UTF-8', 'auto' ); $array = array(); $pattern = "/(?<=<title>).+?(?=<\/title>)/mis"; preg_match($pattern,$html,$array['title']); $pattern = "/(?<=<h1>).+?(?=<\/h1>)/mis"; preg_match($pattern,$html,$array['h1']); header("Content-Type: application/json; charset=UTF-8"); echo json_encode($array);
関連するQ&A
- PHPの正規表現でHTMLタグの内容を抽出したい
jqueryでPHPにurlを渡して、そのurlの中のtitleタグの内容を抽出したいと思ってます。が、うまく行きません。 ●jquery↓ <script type="text/javascript"> function site_check(){ var url = $("#url0").val(); if(url=="") return; $.getJSON("test.php?url=" + encodeURI(url) ,function(res){ $("#title").html(res.title); }); } </script> ●test.php↓ $html=file_get_contents($_GET["url"]); preg_match_all("/<title>(.*?)<\/title>/i",$html,$html_title); header('Content-type: application/json'); echo json_encode($html_title); このコードではなにもレスポンスが帰って来ません。 もし足りない情報がありましたらご指摘ください。
- ベストアンサー
- PHP
- JSONデータをｊQueryにわたす際に文字化け
MySQLからのデータをPHPでJSON形式に加工して、ｊQueryで表示させようしているのですが、 どうしても日本語だけ文字化けをしてしまい、エンコードを色々変えても文字化けしてしまい困っています。 どなたか助けていただけませんでしょうか？ -文字化け結果- No：1 Title：¤Ç¤¤¿¡ªÂçÀ®¸ù¡ª No：2 Title：¤³¤ì¤«¤é´èÄ¥¤ë¡ª phpにアクセスしても文字化けはいたしません。 ｊQueryからアクセスをすると完璧に文字化けをしてしまいます。 json.php (UTF-8) [ { no: "1", title: "できた！大成功！" }, { no: "2", title: "これから頑張る！" } ] index.html (UTF-8) <!DOCTYPE HTML> <html> <head> <meta charset="euc"> <title>jsonテスト</title> <link rel="stylesheet" type="text/css" href="style/desktop.css"> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.7.1");</script> <script type="text/javascript"> jQuery(function(){ $.getJSON("./json.php",function(data){ $('p','#demo').remove(); $('#demo').append('<ul/>'); $.each(data,function(i,items){ $("<li/>",{ text:'No：'+items.no+' Title：'+items.title }).appendTo('ul','#demo'); }); }); }); </script> </head> <body> <div> <div id="demo"> <h4>リスト</h4> <p></p> </div> </div> </body> </html>
- ベストアンサー
- JavaScript
- フォームからjQuery,jQuery.jsonを使ってJSONを作っ
フォームからjQuery,jQuery.jsonを使ってJSONを作ってPHPで表示したい。 こんばんは。2、3日ずっと悩んでて解決しないので助けてください。 jQuery,jQuery.jsonを使ってJSONを作成しています。 クリックイベントに var form = $("#sform"); var json = $(form.serializeArray()); var strJson = $.toJSON(json); という形をとって $.ajax({ url : "request.php", type : "post", data : strJson, success: function(request){ $('#result').html(request); } }); で送っています。 ただPHP側で var_dump($_POST); を行ってもArray ( ) と表示されます。 firebugで見たところpostに入っているデータは以下の通りです。 {"0":{"name":"date","value":"2010/09/15"},"1":{"name":"type","value":"new"},"2":{"name":"bin[]","value":"2"},"3":{"name":"bin[]","value":"3"},"length":4} var_dumpで表示できないのはなぜでしょうか？ 上記で変数json のまま送るとオブジェクトとして送れてvar_dump でも表示できます。 ただ今はjson の勉強をしているので、できればなぜこうなっているのかを理解したいです。 基本的なところで勉強不足かもしれませんが、何かアドバイスなど頂けると嬉しいです。 よろしくお願いします。
- ベストアンサー
- JavaScript
- jQueryで配列JSONの読み込み方法
phpからの返り値data（json形式）を表示したいのですがうまくいきません。 コンソール上でjsonを取得できているようなのですが、値を表示しようとするとundifinedと表示されてしまいます。 どのように書き換えれば動作するようになるのでしょうか？ よろしくおねがいします！ -------------------------------------------------------- ■ receive.js ■ -------------------------------------------------------- $.ajax({ type: "POST", url: "receive.php", data: { "id": 3 }, success: function(data){ console.log(data); alert(data.time); //ここで「undifined」のエラーが出ます！！ $("#go").after(data.id); //ここは何も表示されません。 $("#str").html('準備完了'); }, error: function(data){ $("#str").html('準備未完了'); }, }); -------------------------------------------------------- ■ receive.php ■ -------------------------------------------------------- <?php require 'dbconnect.php';//dbconnectを呼び出し $data = array(); $id = $_POST['id']; $sql = " SELECT * FROM sample_table WHERE id = " . $id; $result = mysqli_query($connect,$sql) or die("クエリの送信に失敗しました。<br />SQL:".$sql); while ($row = mysqli_fetch_array($result)) { $data[] = $row; } mysqli_close($connect) or die("MySQL切断に失敗しました。"); // MySQLへの接続を閉じる header('Content-Type: application/json; charset=utf-8'); echo json_encode($data); ?> -------------------------------------------------------- ■ index.html ■ -------------------------------------------------------- <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" src="./js/jquery-1.7.2.min.js"></script> <title>PHP * jQuery * ajax * MySQL</title> <script type="text/javascript" src="receive.js"></script> <script type="text/javascript" src="post.js"></script> </head> <body> <div class="ltd-form"> <form id="inquiry-form" method="get"> <fieldset> ・ ・ ・ </fieldset> <div id="go"></div> </form> </div> <div id="str"></div> </body> </html> -------------------------------------------------------- ■ 実行後のChromeのコンソール ■ -------------------------------------------------------- 0: Object 0: "3" 1: "1423789247" 2: "96" 3: "963" data1: "96" data2: "963" id: "3" time: "1423789247" --------------------------------------
- ベストアンサー
- JavaScript
- PHPのフォームとAjaxを組み合わせたいのですが
簡潔にコードを書かせて頂きますが、PHPとjQueryによるAjaxを連携させたいと考えています。 まずform.phpのフォームをsubmitし、その内容をpost.phpへ送り、リダイレクトにてres.phpへ送るという、PHPの基本的な動きをさせますが、 その結果はres.phpという新しいページではなく、Ajaxにてform.phpの<div id="text1">部に元々書かれている<form>ではなく、res.phpの出力内容を出力したいと考えております。 この場合、どのようにjQueryコードを記述すればいいのでしょうか？ 色々考えて試してみたのですが、上手くいきませんでした。 自分はform.php、post.php、res.phpという３つのファイルを用意していますが、もしかしたらori.phpという出力用のファイルを用意し、その<div>空間内にform.phpのフォームやres.phpの結果をAjaxによって出力するのかなとも思いましたが、良く分かりませんでした。 アドバイス頂けないでしょうか？ 宜しくお願い致しします。 (( form.php )) <html> <head> <script type="text/javascript" src="./js/jQuery-1.4.4.js"></script> </head> <body> <div id="text1"> <h2>その1</h2> <form action="post.php" method="POST" id="form" name="form" > <input type="checkbox" id="news" name="news" value="news" /> ニュース <br /> <input type="submit" name="submit" value="submit" /> <input type="reset" name="reset" value="reset" /> </form> </div> </body> </html> (( post.php )) <?php session_start(); session_regenerate_id(TRUE); $_SESSION["news"] = "news 表示"; $host = $_SERVER['HTTP_HOST']; $uri = rtrim(dirname($_SERVER['PHP_SELF']), '/\\'); $extra = 'res.php'; header("Location: http://$host$uri/$extra"); (( res.php )) <?php session_start(); session_regenerate_id(TRUE); ?> <html> <head> <script type="text/javascript" src="./js/jQuery-1.4.4.js"></script> </head> <body> <div id="text2"> <h2>その2</h2> <?php $_SESSION["news"]; ?> </div> </body> </html> <?php session_destroy(); $_SESSION = ''; ?>
- ベストアンサー
- PHP
- 別URLからのJSON取得がうまくいかないので教えてください
楽天書籍検索APIをJSONで取得したいのですが、うまく表示されません。 以下のソースで何がまずいか教えていただけますでしょうか。 ※[YOUR_developerID]にはIDが入っているものとします <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" /> <title>JSON</title> <meta http-equiv="Content-Script-Type" content="text/javascript" /> <script type="text/javascript" src="http://www.google.com/jsapi"></script> <script type="text/javascript">google.load("jquery", "1.2.6");</script> <script type="text/javascript"> $(function(){ $.getJSON("http://api.rakuten.co.jp/rws/2.0/json?developerId=[YOUR_developerID]&operation=BooksTotalSearch&version=2009-03-26&keyword=%E3%82%AC%E3%83%B3%E3%83%80%E3%83%A0&sort=-releaseDate", function(jsonData){ $(jsonData.Body.BooksBookSearch.Items.Item).each(function(){ $("body").append(this.title+"<hr />"); }) }) }) </script> </head> <body>
- ベストアンサー
- JavaScript
- JSONを使いページから他ページへ情報を渡す方法
同じレイアウトのページが数百ページあり、各ページの一部分を1つのページにまとめる方法を知りたいです。 JSONでできるようなので、サイトを参考にしながら作ってみました。 各ページの集めたい部分をオブジェクトで指定してJSONのテキストへ変換し、 集めたページにJSONを読み込み、変数に代入したJSONの情報を取得して表示を試みました。 しかし、やってみるとページ間で同じデータを扱うのが上手にできませんでした。 アドバイスを頂けないでしょうか。 <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>集めたページ</title> <script type="text/javascript" src="js/json.js"></script> </head> <body onload="jsontop()"> <div> <ul> <li><a href=""><span></span></a></li> <li><img src=""></li> </ul> ・・・・・・ULがページ数の数だけ続く </div> </body> </html> <html lang="ja"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>各ページのサンプル</title> <script type="text/javascript" src="js/json.js"></script> </head> <body onload="json(1)"> <h1>1ページ目</h1> <h2>タイトル</h2> <p>複数ページある中の1ページ目です。このページの一部分を他のページに利用したいです。</p> <dl> <dt>サンプル画像</dt> <dd><img src="img/sample01.jpg"></dd> </dl> </body> </html> -----json.js------ function json(no){ var obj = { h1: no+"ページ目", imgsrc: "img/sample0"+no+".jpg", thisurl:"page01/sample01.html" }; var str = JSON.stringify(obj); } function jsontop(){ JSON.parse(str); var tagimg = document.getElementsByTagName("img"); var tagspan = document.getElementsByTagName("span"); var tagli1 = document.getElementsByTagName("li")[0]; tagspan[0].innerHTML = obj.h1; //１ページ目のタイトルを取得し置き換える var img = new Image(); tagimg[0].src = obj.imgsrc; //１ページ目の画像のパスを取得し置き換える tagli1.href = obj.thisurl; //１ページ目のURLをアンカーに設定 }
- ベストアンサー
- JavaScript
- Ajaxで、JSONの添え字を表示する
以下のようなソースで、jQueryで、ajax_abc.htmlのid:Abcのボタンを押して、json_abc.phpから、JSON形式で、添え字がMySQLのabcテーブルのid列、値が同じMySQLのabcテーブルのalphabet列の値を全行分受け取り、<p>1:A</p><p>2:B</p><p>3:C</p>というような形でhtmlを生成したいのですが、値を表示することはできるのですが、添え字を表示する方法がわかりません。 どういう風にやれば、表示できるか教えてください。 [ajax_abc.html] <script type="text/javascript"> $(function(){ $("#Abc").click(function(){ $.post("json_abc.php", { }, function(json){ $('#Display').html("<p>"+json[1]+"</p>" + "<p>"+json[2]+"</p>" + "<p>"+json[3]+"</p>") }); }); }); </script> [json_abc.php] <?php $pdo = new PDO('mysql:dbname=test; host=localhost; charset=utf8', 'root'); $st = $pdo->query("SELECT * FROM abc"); $abc = array(); while ($row = $st->fetch()) { $abc += array ( $row['id'] => $row['alphabet'] ); } header('Content-Type: application/json; charset=utf-8'); echo json_encode($abc); [MySQLのabcテーブル] INT: VARCHAR 1: A 2: B 3: C
- ベストアンサー
- AJAX
- JSONデータをフォームにセットしたい
JSONデータを「jQuery.val」でフォームにセットしたいのですが、うまくいきません。どうしたら良いでしょうか？ 具体的には、[",]が削除された状態でセットされます。元は配列ですが、JSONデータへ変換したので、フォームへセット出来ると思っていたのですが…。 JSONは、「ある形式に沿った文字列」という認識でいたのですが、違うのでしょうか？ ■コード $jsondata= json_encode($originalarray) <script type="text/javascript"> var result = <?php echo($jsondata) ?>; $("input#jsondata").val(result); </script> ■変数 ・$originalarray Array ( [0] => ./im/1a.j [1] => ./im/2.j [2] => ./im/9_1.j ) ・jsondata [".\/im\/1a.j",".\/im\/2.j",".\/im\/9_1.jp"] ・フォームにセットされる値 ./im/1a.j./im/2.j./im/9_1.jp →ここに「jsondata」をセットさせたい
- ベストアンサー
- JavaScript
- このHTMLの意味はなんでしょうか？
<script type="text/javascript" src="scripts/jquery-1.7.2.min.js"></script> <script type="text/javascript" src="scripts/jquery.queryloader2.js"></script> <script type="text/javascript" src="scripts/jquery.parallax-1.1.3.js"></script> <script type="text/javascript" src="scripts/jquery.localscroll-1.2.7-min.js"></script> <script type="text/javascript" src="scripts/jquery.scrollTo-1.4.2-min.js"></script> <script type="text/javascript" src="scripts/jquery.easing.1.3.js"></script> <script type="text/javascript" src="scripts/jquery.scrollorama.js"></script> <script type="text/javascript" src="scripts/jquery.scrolldeck.js"></script> <script type="text/javascript" src="scripts/jquery-contained-sticky-scroll.js"></script> <script type="text/javascript" src="scripts/lightbox.js"></script> <script type="text/javascript" src="scripts/parallax01.js"></script> <script type="text/javascript" src="scripts/yazirusi01.js"></script> <script type="text/javascript" src="scripts/jquery.mousewheel.js"></script> <script type="text/javascript" src="scripts/jquery.easie.js"></script> <script type="text/javascript" src="scripts/jquery.smoothScroll.js"></script> <script type="text/javascript" src="scripts/php_date.js"></script> <script type="text/javascript" src="scripts/script.js"></script> とあるサイトのソースの一部に、このような文章が書かれていました。 一体これはどういう意味なんでしょうか？ どなたか解説お願いします
- ベストアンサー
- HTML
お礼
ありがとうございました。phpでデコードして、jqueryでは data.title[0]のようにアクセスするんですね。。。本当に助かりました。