1

我做了一个连接到 mysql 的 chrome 扩展，然后显示结果。

我有脚本（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) }

咨询.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”。只有从 http://localhost/... 而不是 chrome-extension://yourExtensionId/... 调用您的 php 代码才能执行

其次 - 无需实现 ActiveX 对象来获取 XMLHttpRequest 对象 - 您可以在 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”：

咨询.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”文件。

更新：

正如其他帖子中的很多答案所说，您应该使用 PDO 而不是 MySQL 扩展，因为不推荐使用MySQL 扩展，因此Consulta.php的新代码如下所示：

<?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 回答