• ベストアンサー

javascriptからphpの呼び出し

javascriptの初心者です。宜しくお願い致します。 php5で、開発していますが、javascriptからphpを呼んで、 結果をリアルタイムに画面に表示させる方法が分かりません。 【やりたい事】 １．画面上に、現在の日時を表示させる。 ２．5秒毎に、phpを呼び出し(DB接続し結果を取得)して、 　　その結果を、画面上に表示させる。 　　※DBへの接続は、javascript内ではやりたくありません。 下記に、現在時刻を表示するjavascriptがありますが、 この中で、5秒毎に、phpを呼び出したいのですが、 出来るのでしょうか？ </head> <script language="Javascript"> <!-- function time_disp() { d = new Date(); document.all.nowdate.value = d.toLocaleString(); window.setTimeout("time_disp()", 1000); } --> </script> <body onload="time_disp();"> <input type="text" name="nowdate" size="30" readonly> <input type="text" name="data1" readonly> ←phpから取得した値1 <input type="text" name="data2" readonly> ←phpから取得した値2 </body>

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

  • ベストアンサー
  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.3

AJAXを使って、面倒なのでname指定はid指定に変更 function time_disp() { d = new Date(); document.getElementById("nowdate") = d.toLocaleString(); var xmlHttp =(window.ActiveXObject)?new ActiveXObject("Msxml2.XMLHTTP"):new XMLHttpRequest(); xmlHttp.onreadystatechange = function(){ if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ var data=eval("("+ xmlHttp.responseText + ")"); document.getElementById("data1").value = data["1"]; document.getElementById("data2").value = data["2"]; } }); xmlHttp.open("GET","ＰＨＰのプログラムのURI",true); xmlHttp.send(null); window.setTimeout("time_disp()", 1000); } phpは、{"1":"hoge","2":"fuga"}のような JSONデータを返す前提です。

その他の回答 (3)

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.4

訂正　});じゃなく};でした。 xmlHttp.onreadystatechange = function(){ if (xmlHttp.readyState == 4 && xmlHttp.status == 200){ var data=eval("("+ xmlHttp.responseText + ")"); document.getElementById("data1").value = data["1"]; document.getElementById("data2").value = data["2"]; } };

mintohime
質問者

お礼

丁寧に記述してくださり、ありがとうございます。 これで、うまく行きそうです。 まだ、javascriptも初心者で、ajaxも初めての 試みですが、こちらのソースで導入に向けて 勉強したいと思います。 本当にありがとうございました。

  • yyr446
  • ベストアンサー率65% (870/1330)
回答No.2

一定時間毎にmetaタグでリロード出来るのなら、 データをJSONPみたいな方法で受け渡す手もありそうです。 <head>に <script src="DBへアクセスするPHPのuri"></script> を加えておいて、 PHPはJSON形式みたいにdata={......}だけを出力するようにしておく。 javascriptはonloadの後にdataを参照して、お好きなところに DOM関数でセットすればよいかも。

mintohime
質問者

お礼

ありがとうございます。 同画面内に入力フォームがあるので リロードしてしまうと、途中で消えてしまうので どうにか、出来ないかと思っている次第です。 色々なサイトを探して、サンプルが載っていたもので javascriptから、phpを呼んで見たのですが、 それも、うまく行かずにエラーになってしまいます。 記述方法のサンプルなど、ご教授願えないでしょうか。 宜しくお願い致します。

  • yambejp
  • ベストアンサー率51% (3827/7415)
回答No.1

ページ自体を読み直していいならmetaでリフレッシュしてやればよいでしょう。 一部データを更新するということであればajaxで処理してください。 5秒ごとに処理をいれると、DBへの負担があるかもしれません。

mintohime
質問者

補足

ありがとうございます。 同画面内に入力フォームがあるので リロードしてしまうと、途中で消えてしまうので どうにか、出来ないかと思っている次第です。 DBへの負担があるようでしたら、秒数を変更する方向で 行く予定です。

  1. カテゴリ
  2. [技術者向] コンピューター
  3. プログラミング・開発
  4. JavaScript

関連するQ&A

  • JavaScriptからphp関数の呼び出し

    javaScriptで1秒毎にphpの関数を呼び出しているのですが、 php側で、returnしている日時が動的に表示されません。 何がいけないのか教えて頂けますでしょうか？ 色んな参考ページを見ると、phpの関数で動的に 動かせると書いてあるのですが、動的になりません。 -------------------------------------------------------- ＜jsphptest.htmlソース＞ <html> <head> <script type="text/javascript"src="jsphptest.php"></script> <script language="javascript"> <!-- function time() { //JavaScriptで日時表示 var now = new Date(); mon = now.getMonth()+1; day = now.getDate(); hou = now.getHours(); min = now.getMinutes(); sec = now.getSeconds(); year = now.getYear(); if (year < 2000) { year += 1900; } if (mon <= "9"){mon = "0" + mon;}; if (day <= "9"){day = "0" + day;}; if (hou <= "9"){hou = "0" + hou;}; if (min <= "9"){min = "0" + min;}; if (sec <= "9"){sec = "0" + sec;}; document.form1.j_tokei.value= year +"/"+ mon +"/"+ day +" "+ hou +":"+ min +":"+ sec; //PHP関数の呼び出し document.form1.p_tokei.value= php_time(); //1秒毎 setTimeout('time()',1000); } // --> </script> </head> <body onLoad="time();"> <form name="form1" mathod=post> JavaScript日時<input type="text" name="j_tokei" size=25><br> PHP日時<input type="text" name="p_tokei" size=25> </form> </body> </html> -------------------------------------------------------- ＜jsphptest.phpソース＞ <?php $str .= "function php_time(){"; $str .= "return('".date('Y-m-d H:i:s')."');"; $str .= "}"; echo $str; ?>

  • PHPでJavascriptの引数の扱い方

    はじめまして。宜しくお願い致します。 環境：Linux(Redhat 9), apache2, PHP4.3.6 [やりたいこと] 下記↓ソース内容↓より、input=button と input=text が幾つかある。 個々のボタンが押されたら、PHPにて"個々"の内部処理を行う。 内部処理終了後は、個々のテキストにインクリメントした値が画面表示される。 HTML＋Javascript にて、カウンター部分は一応完成しています。 ↓ソース内容↓ <html> <head> <script language="JavaScript"> <!-- function ccc(obj0) { cnt = obj0.value; cnt++; obj0.value = cnt; } // --> </script> </head> <body> <form name="ose"> <input type="text" name="view0" readonly size=5 maxlength=3> <input type="button" value="押せ0" onClick="ccc(view0)"><br> <input type="text" name="view1" readonly size=5 maxlength=3> <input type="button" value="押せ1" onClick="ccc(view1)"> </form> </body> </html> コレをPHPに書き換えると、上手くいきません。 ↓PHPに書き換えた場合↓ <script type="text/javascript"> <!-- function ccc($obj0) { cnt = $obj0.value; cnt++; $obj0.value = cnt; } // --> </script> 引数に付いている "$"マークをJavascript側で認識しないのだろう、と考えています。 出来れば、PHPで単体の関数として使用したい為、模索中です。 ※現在は、別の関数の中に上記の『↓HTML＋Javascriptの場合↓』を無理矢理入れて使用しています。(別の関数：HTMLをPHPファイルに書き込む) 別の関数内に入れてても問題は無しです。 但、上記のJavascriptを使用しないソース達にも書き込んでしまうので、ちょとやだなーと。 いい方法があったら教えて下さい。

    • ベストアンサー
    • PHP
  • PHPとJavaScriptの連携について

    PHPとJavaScriptの連携をしたいと思いましたが、下記が分からなかったので、アドバイスいただける方がいらっしゃいましたら、ご教示の程よろしくお願いします。 1. 下記の親ウィンドウで子ウィンドウを開く後、テキストエリアに文字を入力し、値をセットボタンを押すと、「親ウィンドウ」の「値が渡せます」には値が渡せますが、「値が渡せません」には値が渡せません。 違いはnameをtext00からdata[text02]に変更したのみとなります。 2. 下記のソースでは、子ウィンドウのテキストエリアに入力した内容をそのまま渡してますが、子ウィンドウのテキストエリアの情報を基に、PHPでデータベースを検索し、ヒットしたものを親ウィンドウに渡したいと思います。 下記のソースを例にすると、「値をセット」ボタンを押した後、テキストエリアの値を子ウィンドウのSELECT文のidに設定し、取得した$tmpの内容を親ウィンドウに渡したいと思います。 なお、記載のSQL文はシンプルですが、実際には複数のフィールドの値を取り、idの値も複数あります(下記のデータベースを例にすると、idに1と2を渡した際、親ウィンドウのテキストエリアに「あいうえお かきくけこ」と表示させ、idの値を隠し項目でもっていたいと思います)。 3. 上記2で親ウィンドウにデータベースの値を渡した後、子ウィンドウを開くクリック時、子ウィンドウのテキストエリアに渡したidの値を表示したいと思います。 【index.html(親ウィンドウ)】 <script type="text/javascript"> <!-- function window_open() { window.open('sub.php',null,'width=640, height=480, scrollbars=yes') }; //--> </script> </head> <body> <form action="index.php" method="post" name="form00" id="form00"> <a onclick="window_open()" href="javascript:void(0)">子ウィンドウを開く</a> <br /> 値が渡せます <input type="text" name="text00" value="" readonly="readonly" /> <br /> 値が渡せません <input type="text" name="data[text02]" value="" readonly="readonly" /> </form> </body> 【sub.php(子ウィンドウ)】 <script type="text/javascript"> <!-- function Set() { window.opener.document.form00.text00.value=document.form01.text01.value; window.opener.document.form00.data[text02].value=document.form01.text01.value; window.close(); } //--> </script> </head> <body> <form action="index.php" method="post" name="form01" id="form01"> <input type="text" name="text01" /> <input type="button" onclick="Set()" value="値をセット" /> </form> <?php /* $link=mysql_connect('localhost', 'データベースユーザ名', 'データベースパスワード名'); mysql_select_db('データベース名', $link); $query=mysql_query("SELECT nm_master FROM master_db WHERE id=2", $link); $tmp=""; while ($row=mysql_fetch_array($query)) { $tmp .= $row["nm_master"]; } echo $tmp; mysql_close($link); */ ?> </body> 【データベース:master_db】 フィールド名:(`id`, `nm_master`) (1, 'あいうえお'), (2, 'かきくけこ'); 以上、よろしくお願いします。

    • ベストアンサー
    • PHP
  • javascript php フォームについて

    javascriptで作ったフォームをphpに送信したいのですが、上手く送信できません。 どのようにすれば上手く送信することができるでしょうか？ 回答お願いします。 javascript側のソース <body> <form name="nform1" method="POST" action="./kaitou1.php" enctype="text/plain"> <p>問1</p> <p> (1)<input type="text" name="kaitouran11" size="20"> (2)<input type="text" name="kaitouran12" size="20"> (3)<input type="text" name="kaitouran13" size="20"> (4)<input type="text" name="kaitouran14" size="20"> </p> </form> <form name="nform2" method="POST" action="./kaitou1.php" enctype="text/plain"> <p>問2</p> <p> (1)<input type="text" name="kaitouran21" size="20"> (2)<input type="text" name="kaitouran22" size="20"> (3)<input type="text" name="kaitouran23" size="20"> (4)<input type="text" name="kaitouran24" size="20"> </p> </form> <form name="nform3" method="POST" action="./kaitou1.php" enctype="text/plain"> <p>問3</p> <p> (1)<input type="text" name="kaitouran31" size="20"> (2)<input type="text" name="kaitouran32" size="20"> (3)<input type="text" name="kaitouran33" size="20"> (4)<input type="text" name="kaitouran34" size="20"> </p> </form> <input type="button" value="送信" onClick="send()"> </body> php側のソース <body> <p>問1</p> <p>(1)<?php print(htmlspecialchars($_POST['kaitouran11'], ENT_QUOTES, 'UTF-8')); ?> (2)<?php print(htmlspecialchars($_POST['kaitouran12'], ENT_QUOTES, 'UTF-8')); ?> (3)<?php print(htmlspecialchars($_POST['kaitouran13'], ENT_QUOTES, 'UTF-8')); ?> (4)<?php print(htmlspecialchars($_POST['kaitouran14'], ENT_QUOTES, 'UTF-8')); ?> </p> <p>問2</p> <p>(1)<?php print(htmlspecialchars($_POST['kaitouran21'], ENT_QUOTES, 'UTF-8')); ?> (2)<?php print(htmlspecialchars($_POST['kaitouran22'], ENT_QUOTES, 'UTF-8')); ?> (3)<?php print(htmlspecialchars($_POST['kaitouran23'], ENT_QUOTES, 'UTF-8')); ?> (4)<?php print(htmlspecialchars($_POST['kaitouran24'], ENT_QUOTES, 'UTF-8')); ?> </p> <p>問3</p> <p>(1)<?php print(htmlspecialchars($_POST['kaitouran31'], ENT_QUOTES, 'UTF-8')); ?> (2)<?php print(htmlspecialchars($_POST['kaitouran32'], ENT_QUOTES, 'UTF-8')); ?> (3)<?php print(htmlspecialchars($_POST['kaitouran33'], ENT_QUOTES, 'UTF-8')); ?> (4)<?php print(htmlspecialchars($_POST['kaitouran34'], ENT_QUOTES, 'UTF-8')); ?> </p> </body>

    • 締切済み
    • PHP
  • ▲▲JavaScriptに詳しい人見てください▲▲

    いつもお世話になります。 恐れ入りますがお力添えお願い致します。 フォーム（名前は f とする）を使用して、 10問の足し算問題を画面に表示して計算練習できるようにする。 問題は1～10の自然数同士の足し算とする。 各問題ごとに，問題を表示するテキストボックス（名前は p1 ～ p10 とする） 解答を入力するためのテキストボックス（名前は a1 ～ a10 とする） ○×をつけるためのテキストボックス（名前は c1 ～ c10 とする）を用意する。 答え合わせをするためのボタンと 正答数，誤答数を表示するテキストボックス（名前は ok, ng とする）を用意する。 プログラム内部では，正解を保存するための配列（変数名は sol とする）を用意し 乱数を用いて 第1問 ～ 第10問 を生成するとともに それらの正解を sol[1] ～ sol[10] に保存する。 ユーザは，解答欄（a1 ～ a10）に解答を記入し，答え合わせボタンをクリックする。 答え合わせボタンがクリックされると，各問題（iとする）について，解答欄（ai）の内容と 正解（sol[i]）の内容を照合して，正誤欄(ci)に○×をつけ，同時に正答数・誤答数をカウントする。 10問全てに○×をつけた後，正答数（ok），誤答数（ng）を表示する。 今回は，問題を作成してフォーム（テキストボックス）に表示するだけとし 答え合わせのためのコードなどは実装しない．したがって 答え合わせボタンのイベントハンドラは記述しなくて良い。 ただし，配列 sol を用意して，そこに正解を保存するところまでは作成すること。 正解を保存する配列は，（今後作成する）答え合わせボタンのイベントハンドラからも参照されるので， 変数 sol は大域変数とすること。 問題の生成には myRandom(n) 関数を用いてもよい。 と言う課題です 雛形は以下のように作りました。 <title>JavaScript Task 8-1, prototype</title> <script type="text/javascript"> <!-- /* 配列 sol は大域変数としてここで記述しておく方がよい・・？ */ /* 関数 myRandom(n) を定義するなら，このあたりでするべき・・・？ */ function initialize() { /* ここで問題を作成して p1 ～ p10 に書きこむ */ /* 各問題の正解を配列 sol に保存する */ } //--> </script> <body onload="initialize();"> <h1>計算練習プログラム (2)</h1> <form name="f" action=""> <table border="1"> <tr><td>番号</td><td>問題</td><td>解答</td><td>正誤</td></tr> <tr><td>1</td> <td><input name="p1" size="9" type="text" readonly></td> <td><input name="a1" size="3" type="text"></td> <td><input name="c1" size="3" type="text" readonly></td></tr> <tr><td>2</td> <td><input name="p2" size="9" type="text" readonly></td> <td><input name="a2" size="3" type="text"></td> <td><input name="c2" size="3" type="text" readonly></td></tr> <tr><td>3</td> <td><input name="p3" size="9" type="text" readonly></td> <td><input name="a3" size="3" type="text"></td> <td><input name="c3" size="3" type="text" readonly></td></tr> <tr><td>4</td> <td><input name="p4" size="9" type="text" readonly></td> <td><input name="a4" size="3" type="text"></td> <td><input name="c4" size="3" type="text" readonly></td></tr> <tr><td>5</td> <td><input name="p5" size="9" type="text" readonly></td> <td><input name="a5" size="3" type="text"></td> <td><input name="c5" size="3" type="text" readonly></td></tr> <tr><td>6</td> <td><input name="p6" size="9" type="text" readonly></td> <td><input name="a6" size="3" type="text"></td> <td><input name="c6" size="3" type="text" readonly></td></tr> <tr><td>7</td> <td><input name="p7" size="9" type="text" readonly></td> <td><input name="a7" size="3" type="text"></td> <td><input name="c7" size="3" type="text" readonly></td></tr> <tr><td>8</td> <td><input name="p8" size="9" type="text" readonly></td> <td><input name="a8" size="3" type="text"></td> <td><input name="c8" size="3" type="text" readonly></td></tr> <tr><td>9</td> <td><input name="p9" size="9" type="text" readonly></td> <td><input name="a9" size="3" type="text"></td> <td><input name="c9" size="3" type="text" readonly></td></tr> <tr><td>10</td> <td><input name="p10" size="9" type="text" readonly></td> <td><input name="a10" size="3" type="text"></td> <td><input name="c10" size="3" type="text" readonly></td></tr> </table> <input value="答え合わせ" type="button"><br> 正答数：<input name="ok" size="3" type="text" readonly> 誤答数：<input name="ng" size="3" type="text" readonly> </form> </body> function initialize()の中身をどうしたらいいのかが分かりません。

  • html5でのphpについて

    html5でのphpについて phpの "readonly="readonly" value=で入力フォームの情報を送りたいのですが、HTML５では textareaでは textareaタグで属性 valueを使用することができません、と表示されて使用できないのですが、 HTML５で使用できる readonly="readonly" value= に代わる何か良いコードはないでしょうか？ 下のコードが書いたコードになります。 input typeでは "readonly="readonly" value=が使えるのですが、 textareaでは valueが使えないと表示されてしまいます。どうしたらよいでしょうか？　画像の見やすいと思います。 コードの書き方も詳しくないので、コードの例などを書いてくれたらうれしい限りです。 困っています。 </div> <div> 職業：<div> <input type="text" name="work"readonly="readonly" value="<?=$work;?>"> <br><br> </div> </div> <div> その他質問：</div> <textarea name="question"readonly="readonly" value="<?=$question;?>"></textarea> </div> phpの "readonly="readonly" value=で入力フォームの情報を送りたいのですが、HTML５では textareaでは textareaタグで属性 valueを使用することができません、と表示されて使用できないのですが、 HTML５で使用できる readonly="readonly" value= に代わる何か良いコードはないでしょうか？ 下のコードが書いたコードになります。 input typeでは "readonly="readonly" value=が使えるのですが、 textareaでは valueが使えないと表示されてしまいます。どうしたらよいでしょうか？　画像の見やすいと思います。 コードの書き方も詳しくないので、コードの例などを書いてくれたらうれしい限りです。 困っています。 </div> <div> 職業：<div> <input type="text" name="work"readonly="readonly" value="<?=$work;?>"> <br><br> </div> </div> <div> その他質問：</div> <textarea name="question"readonly="readonly" value="<?=$question;?>"></textarea> </div>

    • ベストアンサー
    • PHP
  • ＪＡＶＡＳＣＲＩＰＴでＩＮＰＵＴ

    ＨＴＭＬとＪＡＶＡＳＣＲＩＰＴとＪＳＰを使ってシステム構築をしております。 --------------- <html> <head> <SCRIPT Language="JavaScript"> <!-- function send() { alert("<input type=text name=name2>"); } //　--> </SCRIPT> </head> <body> <form onSubmit="send(); return false;"> <input type=text name=name1> <input type=submit> </form> </body> </html> --------------- 上記のコードでやりたいことは、 submitボタンが押されたときにJAVASCRIPTを呼び出し JAVASCRIPT上で文字を入力し次画面へ送信するような機能を作りたいと思っているのですが、本を見てもなかなか載っていません。 もしかしたらJAVASCRIPTだけではできないかもしれません。 ＪＳＰまたはＰＨＰで出来る機能でも良いので教えてください。

  • 問題部分がJavascriptかPHPか分かりませんが．．．．

    以下のようなHTMLを記述しました。 私の希望するべき動作は、"click"ボタンを押すたびに時間表記が切り替わると言うものです。 条件として、時間の取得はphp側で行う。 ページのリロード，リダイレクトなどは行わない ｍａｉｎ．ＨＴＭＬ <head> <script type="text/javascript" id="test" src="./time1.php"></script> <script Language="JavaScript"><!-- cnt = 0; function click_key(){ if(cnt == 0){ test.src = "./time3.php"; cnt = 1; }else{ test.src = "./time1.php"; cnt = 0; } document.smp.set_val.value = get_time(); } // --></script> </head> <body> <form name=smp> <input type=text name=set_val value="" size=50><br> <input type=button value=click onclick="click_key()"> </form> </body> ｔｅｓｔＸ．ｐｈｐ function get_time(){ value_time = "<? echo date("H:i:s"); ?>"; 　　中略 return value_time; } test1.php test3.php にはそれぞれ上記のget_time()を含むコード記述がされています。 現状では、表示自体は切り替わりますがtest1.phpとtest3.phpが最初に読み込まれる時のみ動作するだけで、 以降は時間が更新されません。（テンポラリに残っていてそれが表示されている感じ？） これをリアルに動作できる方法はあるのでしょうか？ それとも、こんな条件では実現不可能？

    • 締切済み
    • PHP
  • javascriptからphpの関数呼び出し

    ＰＨＰについて、質問があります。 画面遷移なしで、ＤＢの値を更新し、更新後の値を表示させる機能を作成しております。 色々調べた所、javascriptで実現が可能であることが分かりましたが、方法まで分かりません。 javascriptから、phpの関数を呼び出す操作を、画面遷移なしで行う方法を教えて頂けますでしょうか？ phpとjavascriptの初心者ですので、サンプルがあると助かります。

    • ベストアンサー
    • PHP
  • JavascriptでValueを変えるには

    再び質問致します。getElementByIdを前回の質問から学ばせて頂きました。やりたいことはTagの値の変更です。 以下のスクリプトでgetElementByIdはアラートが出ますので存在し値もあっている訳ですが代入が出来ません。ReadOnlyをはずしても駄目です。何かが間違っていると思います。宜しく御願い致します。 <html> <head> <title>エレメントの表示</title> </head> <script type="text/javascript"> function Disp_change() {function SchDefult_Disp_change() { alert("in1"); if (document.getElementById("SchDefult").value == 'Only For' ) { alert( "必須入力です　　　" )}; SchDefult.value = "in1"; SchDefult = "in1"; } </script> <body> <div class="frameHead frameDetail"> <div class="inC1">連絡情報</div> <div class="clear"><hr /></div> <div class="inC2"> <input class="button3" type="button" name="fromUserList" value="" onclick="Disp_change()"> <input class="inIPC2 " type="text" id="SchDefult" name="parent" value="Only For"> </div> <script type="text/javascript"> Disp_change(); }; </script>

    • ベストアンサー
    • Java

注目のQ&A

カテゴリ

専門家に質問してみよう

職業から探して質問する

あなたにピッタリな商品が見つかる！ OKWAVEセレクト

質問する