1

私はmysqlに接続して結果を表示するクロム拡張を行いました。

スクリプト (ajax.js、consulta.php、consulta_empleados.html) を取得しました。移動 http://localhost/ajax/consulta_empleados.htmlすると機能しますが、拡張機能を実行すると結果が表示されず、phpコードが表示され、クエリ結果が表示されます。

これを参照してください： ここに画像の説明を入力

どうすればこれを行うことができますか?

コードは次のとおりです (単純な ajax と php):

マニフェスト

{
"name": "demo",
"version": "1.0",
"description": "Making your first Google Chrome extension.",
"icons":{
    "128":"icon_128.png"
},

"browser_action":   {
    "default_icon": "icon.png",
    "popup": "consulta_empleados.html"
}

}

Consulta_empleados.html

<html>

    <head>

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

    <title>Consulta Registro con AJAX</title>


  <!-- referenciamos al archivo ajax.js donde se encuentra nuestra funcion objetoAjax-->

    <script language="JavaScript" type="text/javascript" src="ajax.js"></script>

    </head>


    <body onLoad="MostrarConsulta('consulta.php')">



  <div id="resultado"></div>

  </body>

</html>

ajax.js

// JavaScript Document function objetoAjax(){
        var xmlhttp=false;
        try {
                xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
                try {
                   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                } catch (E) {
                        xmlhttp = false;
                }
        }

        if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
                xmlhttp = new XMLHttpRequest();
        }
        return xmlhttp; }

function MostrarConsulta(datos){
        divResultado = document.getElementById('resultado');
        ajax=objetoAjax();
        ajax.open("GET", datos);
        ajax.onreadystatechange=function() {
                if (ajax.readyState==4) {
                        divResultado.innerHTML = ajax.responseText
                }
        }
        ajax.send(null) }

Consulta.php

<?php //Configuracion de la conexion a base de datos $bd_host = "localhost";  $bd_usuario = "root";  $bd_password = "";  $bd_base = "tic"; 

$con = mysql_connect($bd_host, $bd_usuario, $bd_password); 

mysql_select_db($bd_base, $con); 

//consulta todos los empleados

$sql=mysql_query("SELECT name FROM usuarios",$con);

//muestra los datos consultados echo "</p>Nombres </p>"; while($row = mysql_fetch_array($sql)){
        //echo "<p>".$row['nombres']." - ".$row['departamento']." - ".$row['sueldo']."</p> n";      echo "<p>".$row['name']."</p>"; } ?>

ありがとう

4

3 に答える 3

1

良い。実際の答えは次のとおりです。これは、拡張機能のベース URL に対して "consulta.php" をロードしようとするために発生します。また、php-code は、http: // localhost/... から呼び出された場合にのみ実行できますが、chrome-extension://yourExtensionId/... からは実行できません。

次に、XMLHttpRequest オブジェクトを取得するために ActiveX オブジェクトを実装する必要はありません。Google Chrome で新しい XMLHttpRequestを使用するだけです。

于 2012-06-09T15:36:33.010 に答える
0

ネットワーク上のサーバーまたはデータ用のオンライン サーバーが必要です。次に、サーバーの manifest.json にアクセス許可を設定します。

まず、拡張機能の「consulta.php」ファイルを削除します。このファイルは単独では機能しないため、拡張機能には必要ありません。

次に、次のように他のファイルを編集できます。

マニフェスト.json

{
  "name": "demo",
  "version": "1.0",
  "description": "Making your first Google Chrome extension.",
  "icons": {
      "128": "icon_128.png"
  },
  "browser_action": {
      "default_icon": "icon.png",
      "default_popup": "consulta_empleados.html"
  },
  "permissions": [
    "http://localhost/"
  ]
}

Consulta_empleados.html

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Consulta Registro con AJAX</title>
<script src="ajax.js"></script>
</head>
<body>
<div id="resultado"></div>
</body>
</html>

ここで bodyonloadイベントを削除した理由は次のとおりです。

Content-Security-Policy のため、インライン イベント ハンドラの実行が拒否されました。

ajax.js

window.onload = function() {
  var XHR = new XMLHttpRequest;
  XHR.open('GET', 'http://localhost/consulta.php', true);
  XHR.onreadystatechange = function () {
    if (4 == this.readyState) {
      var status = this.status;
      if (400 > status) {
        var responseText = this.responseText;
        if (responseText) {
          document.getElementById('resultado').innerHTML = responseText;
        }
      }
    }
  };
  XHR.send();
}

ここではwindow.onload、データをロードするために使用します。外部スクリプトを動的にロードできないため、XMLHttpRequest を使用する必要があります。そうしないと、プロンプトが表示されます。

Content-Security-Policy のため、 ' http://localhost/consulta.php 'からのスクリプトのロードを拒否しました。

最後に、サーバーの「consulta.php」を次のように編集します。

Consulta.php

<?php
// Configuracion de la conexion a base de datos
define('MYSQL_HOST', 'localhost');
define('MYSQL_USER', 'root');
define('MYSQL_PASS', '');
define('MYSQL_DB', 'tic');

$con = mysql_connect(MYSQL_HOST, MYSQL_USER, MYSQL_PASS);
mysql_select_db(MYSQL_DB, $con);

// Consulta todos los empleados
$sql = mysql_query('SELECT `name` FROM `usuarios`', $con);

// Almacena los datos consultados en una matriz
$output = array('<p>Nombres</p>');
while ($row = mysql_fetch_assoc($sql)) {
  $output[] = '<p>' . $row['nombres'] . ' - ' . $row['departamento'] . ' - ' . $row['sueldo'] . '</p><p>' . $row['name'] . '</p>';
}

// Imprimir los datos directamente
echo implode('', $output);
?>

そして、あなたはこれを手に入れました：

スクリーンショット

サーバー URL を「ajax.js」ファイルに変更することを忘れないでください。

アップデート：

他の投稿で多くの回答が述べているように、 MySQL 拡張機能は非推奨であるため、consulta.phpの新しいコードは次のようになるため、MySQL 拡張機能の代わりに PDO を使用する必要があります。

<?php
// Configuracion de la conexion a base de datos
define('PDO_DSN', 'mysql:host=127.0.0.1;dbname=tic');
define('PDO_USER', 'root');
define('PDO_PASS', '');

$pdo = new PDO(PDO_DSN, PDO_USER, PDO_PASS);

// Consulta todos los empleados
$query = $pdo->query('SELECT `name` FROM `usuarios`');

// Almacena los datos consultados en una matriz
$output = array('<p>Nombres</p>');
while ($row = $query->fetch(PDO::FETCH_ASSOC)) {
  $output[] = '<p>' . $row['nombres'] . ' - ' . $row['departamento'] . ' - ' . $row['sueldo'] . '</p><p>' . $row['name'] . '</p>';
}

unset($pdo, $query);

// Imprimir los datos directamente
echo implode('', $output);
?>
于 2012-06-09T18:25:11.167 に答える
0

この行を変更する必要がありました：

// Imprimir funcion de javascript 'MostrarDatos()'
echo "MostrarDatos('", implode('', $output), "')";

に

// Imprimir funcion de javascript 'MostrarConsulta()'
echo "MostrarConsulta('", implode('', $output), "')";
于 2012-06-11T13:46:11.607 に答える