web-dev-qa-db-ja.com

mysqlデータベースからデータを取得してjavascriptで使用する

HTMLページを動的に構築するJavaScriptがあります。 htmlページには、ユーザーが情報を入力するためのテキストエリアボックスがあります。情報は既にデータベースに存在します。 mysqlデータベース内のデータベースをtextareaボックスに入力したいと思います。データベースに接続し、データを使用してhtmlテーブルを作成するphpコードがあるため、phpでこれを行う方法は知っていますが、javascripからこれを行う方法はわかりません。私はajaxのgetリクエストなどを研究しましたが、まだこれを行う方法がわかりません。

javascriptmysqldatabaseajax
14
user1892770

おそらく最も簡単な方法は、PHPファイルからJSONを返すことです。それで、ファイル_query.php_があるとしましょう。

_$result = mysql_query("SELECT field_name, field_value
                       FROM the_table");
$to_encode = array();
while($row = mysql_fetch_assoc($result)) {
  $to_encode[] = $row;
}
echo json_encode($to_encode);
_

Document.writeの使用に制約されている場合（以下のコメントでメモするように）、フィールドに次のようなid属性を指定します：_<input type="text" id="field1" />_。このフィールドは、jQuery：$("#field1").val()で参照できます。

HTMLを使用した完全な例を次に示します。フィールドが_field1_および_field2_と呼ばれると仮定する場合、

_<!DOCTYPE html>
<html>
  <head>
    <title>That's about it</title>
  </head>
  <body>
    <form>
      <input type="text" id="field1" />
      <input type="text" id="field2" />
    </form>
  </body>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
  <script>
    $.getJSON('data.php', function(data) {
      $.each(data, function(fieldName, fieldValue) {
        $("#" + fieldName).val(fieldValue);
      });
    });
  </script>
</html>
_

これは、HTMLが構築された後の挿入であり、最も簡単な場合があります。 HTMLを動的に構築しているときにデータを入力する場合は、PHPファイルがJSONを返すようにする必要があります。単にvalue属性に直接追加します。

19
wlangstroth

あなたは本当にjavascriptからそれを「ビルド」する必要がありますか、またはビルドされたHTMLをPHPから返してDOMに挿入するだけですか？

  1. AJAX PHPスクリプトへのリクエストを送信
  2. PHPスクリプトはリクエストを処理し、テーブルを作成します
  3. PHPスクリプトは、エンコードされたHTMLの形式でJSに応答を送信します
  4. JSは応答を受け取り、DOMに挿入します
1
Matt

Javascriptを使用するには、次のようなことができます。

<script type="Text/javascript">
var text = <?= $text_from_db; ?>
</script>

次に、javascriptで必要なものを使用して、テキストvarをテキストボックスに入れます。

1
Josh

できない Javascriptのみでそれを行います。 DBとクライアント側コード間のプロキシとして機能するサーバー側コード（PHPの場合）が必要になります。

0
Mike Baranczak