JavaScript + PHP 用于在 Wordpress 中访问 MySQL 数据库

Posted 2023-02-24

【中文标题】JavaScript + PHP 用于在 Wordpress 中访问 MySQL 数据库

【英文标题】：JavaScript + PHP for accessing a MySQL DB in Wordpress

【发布时间】：2013-07-30 15:53:31

【问题描述】：

首先，我要感谢所有 *** 社区的帮助。谢谢！！

正如您在我的first question 上看到的那样，我是使用 Wordpress、javascript 和 php 的新手（对于我的工作，我对 SQL 有一些了解），我发现在一些“简单”方面存在一些困难。我一直在寻找这个问题的答案，但我还没有找到，所以如果有人可以为我指出一些方向，我将非常感激。这是交易：

我有一个非常简单的公式，如您所见here，我只想用我自己的 SQL 查询将数据保存在我的 mysql DB 上的表中。它与使用 Wordpress 的数据库相同。我看了很多，找到了一种使用 PHP+Javascript 的“简单”方法。说明非常清楚。

将此文件 (mysqlwslib.js) 放入您的脚本文件夹中（在我的例子中，我的主题文件夹中的“js”文件夹）：

-

var urlMysqlwsphp="../mysqlws.php";
var mysql_db_name ="revistae_wp1";
// ---------------------------------------

// Acceso a mysql
function mysql_use( dbname) 
    mysql_db_name = dbname; 

function mysql_select_query(query) 
    var c="selectQuery";
    var xmlresp = doRequest(c, query);
    return responseContent(xmlresp);

function mysql_update_query(query) 
    var c="updateQuery";
    var xmlresp = doRequest(c, query);
    return responseContent(xmlresp);    

function mysql_col_names(tableName) 
    var c="getColNames";
    var xmlresp = doRequest(c, tableName);
    return responseContent(xmlresp);

// ---------------------------
// Utilidades DOM-html
// ---------------------------
function $(elementId) 
    return document.getElementById(elementId);

function setElementContent( element, content) 
    // Asigna el valor de content a la propiedad
    // innerHTML del element. El element puede ser una
    // referencia o un String con el id
    var domElement=null;
    if(typeof element == 'string') 
        domElement = document.getElementById(element);
    
    if (domElement != null) 
        domElement.innerHTML = content;         
    

function getDocHeight() 
    var D = document;
    return Math.max(
        Math.max(D.body.scrollHeight, D.documentElement.scrollHeight),
        Math.max(D.body.offsetHeight, D.documentElement.offsetHeight),
        Math.max(D.body.clientHeight, D.documentElement.clientHeight)
    );

function setElementHeight(obj, h) 
    if(typeof obj == 'string') 
        obj = $(obj);
       
    obj.style.height = h +'px';

function getElementHeight( obj) 
    var divHeight = 0;
    if(typeof obj == 'string') 
        obj = $(obj);
    
    if(obj.offsetHeight) 
        divHeight=obj.offsetHeight;
     else if(obj.style.pixelHeight)
        divHeight=obj.style.pixelHeight;
    
    return divHeight;

function getWindowHeight() 
    var h = 0;
    if (typeof window.innerWidth != 'undefined') 
        h=window.innerHeight;
     else if (typeof document.documentElement != 'undefined'
            && typeof document.documentElement.clientWidth != 'undefined'
            && document.documentElement.clientWidth != 0) 
        h = document.documentElement.clientHeight;
     else 
        h = document.getElementsByTagName('body')[0].clientHeight;
    
    return h;

function getWindowWidth()   
    var w = 0;
    if (typeof window.innerWidth != 'undefined') 
        w = window.innerWidth;
     else if (typeof document.documentElement != 'undefined'
            && typeof document.documentElement.clientWidth != 'undefined'
            && document.documentElement.clientWidth != 0) 
        w = document.documentElement.clientWidth;
     else 
        w = document.getElementsByTagName('body')[0].clientWidth;
    
    return w;  
  
function getTamanoVentana() 
    var Tamanyo = [ 0, 0 ];
    if (typeof window.innerWidth != 'undefined') 
        Tamanyo = [ window.innerWidth, window.innerHeight ];
     else if (typeof document.documentElement != 'undefined'
            && typeof document.documentElement.clientWidth != 'undefined'
            && document.documentElement.clientWidth != 0) 
        Tamanyo = [ document.documentElement.clientWidth,
                document.documentElement.clientHeight ];
     else 
        Tamanyo = [ document.getElementsByTagName('body')[0].clientWidth,
                document.getElementsByTagName('body')[0].clientHeight ];
    
    return Tamanyo;
  
function createTableFromArray(arrayDatos, arrayCabeceras) 
    // Devuelve una <table>....</table> con los datos del arrayDatos
    // Si se incluye el parametro arrayCabeceras se inserta como fila 1
    // Se puede omitir el parametro arrayCabeceras
    // Devuelve : un String con la <table>...</table>
    var array = arrayDatos;
    if(arrayCabeceras != null) 
        if(arrayCabeceras.length == arrayDatos[0].length) 
            array.unshift(new Array());
            array[0]=arrayCabeceras;
        
    
    // Devuelve un array <table>...</table>
    var cad="";
    if(array == null )
        return cad;
    
    cad ="<table border='1'>";
    var nf, nc;
    if (array[0][0] != null) 
        // Es de dos dimensiones
        nf = array.length;
        nc = array[0].length;
        for(i=0; i< nf;  i++) 
            cad += "<tr>";
            for(j=0; j<nc; j++) 
                cad += "<td>"+array[i][j]+"</td>";
            
            cad += "</tr>";
        
     else if (array[0] != null )
        nf = 1;
        nc = array.length;
        cad += "<tr>";
        for(j=0; j<nc; j++) 
            cad += "<td>"+array[j]+"</td>";
        
        cad += "</tr>";
     else 
        nf = 1;
        nc = 1;
        cad += "<tr>";
        cad += "<td>"+array+"</td>";
        cad += "</tr>";
    
    cad += "</table>";
    return cad;

/*
 * Utilidades de fechas
 */
function parseFechaUTC(cadfecha, cadhora) 
    // Parametros :
    //      cadfecha = "2010-12-21"
    //      cadhora = "12:00:00" (se puede omitir)
    // Devuelve :
    //      objeto Date
    var dt = new Date(); 
    var y = parseInt(cadfecha.substr(0,4));
    var m = parseInt(cadfecha.substr(5,2))-1;
    var d = parseInt(cadfecha.substr(8,2));
    dt.setUTCFullYear(y,m,d);
    var h = 0;
    var min = 0;
    var s = 0;
    if (cadhora != null) 
        h = parseInt(cadhora.substr(0,2));
        min = parseInt(cadhora.substr(3,2));
        s = parseInt(cadhora.substr(6,2));
    
    dt.setUTCHours(h, min, s, 0);
    return dt;

function intToString(number, digits) 
    // Convierte en cadena un numero entero
    // Rellena con ceros a la izda hasta numero de digitos
    var cad = number.toString();
    if(cad.length < digits) 
        var dif = digits - cad.length;
        var ceros ="";
        for (var i=0; i<dif; i++) 
            ceros += "0";
        
        cad = ceros + cad;
    
    return cad;

function getCadFechaUTCFromJSDate(date) 
    var y = date.getUTCFullYear();
    var m = intToString(date.getUTCMonth()+1,2);
    var d = intToString(date.getUTCDate(),2);
    var cad = y +"-"+ m +"-"+ d;
    return cad;

function getCadHoraUTCFromJSDate(date) 
    var h = intToString(date.getUTCHours(),2);
    var m = intToString(date.getUTCMinutes(),2);
    var s = intToString(date.getUTCSeconds(),2);
    var cad = h +":"+ m +":"+ s;
    return cad;

// ----------------------------
// xmlresponse
// ----------------------------
function responseCode(xmlresp) 
    var lstCode = xmlresp.getElementsByTagName("statusCode");
    var cod = lstCode[0].childNodes[0].nodeValue;
    return cod;

function responseText(xmlresp) 
    var lstDesc = xmlresp.getElementsByTagName("statusText");
    var desc = lstDesc[0].childNodes[0].nodeValue;
    return desc;

function responseContent(xmlresp) 
    // Devuelve un array con el contenido.
    // El array puede ser multidimensional
    if(xmlresp == null) 
        return null;
    
    var arResp = new Array();
    var lstCtnt = xmlresp.getElementsByTagName("content");
    var childs = lstCtnt[0].childNodes[0];
    if ((childs != null) && (childs.nodeType == 1)) 
        // Contenido elementos <item>
        var lstItem = lstCtnt[0].getElementsByTagName("item");
        var numItem = lstItem.length;
        for (i = 0; i < numItem; i++) 
            var ar = lstItem[i].childNodes[0].nodeValue.split(",");
            arResp.push(ar);
        
     else if ((childs != null) && (childs.nodeType == 3)) 
        // Contenido una cadena separada por comas
        var ctnt = lstCtnt[0].childNodes[0].nodeValue;
        arResp = ctnt.split(",");
     else 
        arResp = null;
    
    return arResp;

function alertXmlResp(responsexml) 
    var code = responseCode(responsexml);
    var txt = responseText(responsexml);
    var ctnt = responseContent(responsexml);
    alert(code + ", " + txt + "\n" + ctnt);


// ---------------------------------
// AJAX Request
// ---------------------------------
function doRequest(comm, pars) 
    var req = new ajaxRequest();
    if (pars == "") 
        pars = "1";
    
    var url = urlMysqlwsphp+"?db="+mysql_db_name+"&c=" + comm + "&p=" + pars;
    req.open("GET", url, false);
    req.send(null);
    return req.responseXML;

function loadXmlDoc(name) 
    var req = new ajaxRequest();
    req.open("GET", name, false);
    req.send(null);
    return req.responseXML;

function loadXMLString(txt) 
    if (window.DOMParser) 
        parser = new DOMParser();
        xmlDoc = parser.parseFromString(txt, "text/xml");
     else  // Internet Explorer
        xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
        xmlDoc.async = "false";
        xmlDoc.loadXML(txt);
    
    return xmlDoc;

function ajaxRequest() 
    try 
        var request = new XMLHttpRequest();
     catch (e1) 
        try 
            request = new ActiveXObject("Msxml2.XMLHTTP");
         catch (e2) 
            try 
                request = new ActiveXObject("Microsoft.XMLHTTP");
             catch (e3) 
                request = false;
            
        
    
    return request;

2 把这个PHP文件（mysqlws.php）放在父文件夹中（注意它在上一个文件中也有引用，这个文件的连接数据是从我的wp-config.php文件中提取的，因为目标表在相同的数据库）：

<?php
header('Content-Type: text/xml');
header("Cache-Control: no-store, no-cache, must-revalidate");

// Los valores $host, $user, $pw, $db se deben de adaptar a cada instalación
$host="localhost";
$user=*MyUser*;
$pw=*MyPass*;
// Indicar el nombre de una base de datos que se abrirá por defecto
$db=*MyDBName*;


if(isset($_GET['c']) and isset($_GET['p'])) 
    $command=$_GET['c'];
    $params = $_GET['p'];
    if(isset($_GET['db'])) 
        $db = $_GET['db'];
    
    $resp = processcommand($command, $params);
 else 
    $resp=createResponse(0, "ERROR", "Parametros HTTPGET incorrectos");

echo $resp;
return;

function processCommand($command, $params) 
    // processCommand
    // procesa un comando válido recibido en la llamada a la página. 
    // Es llamado desde el flujo principal
    // Distribuye el trabajo a la rutina correspondiente y
    // devuelve una respuesta en formato xml

    // Declarar la respuesta
    $respxml=null;

    // Derivar a la rutina adecuada
    if(strcmp("updateQuery",$command)== 0) 
        $respxml=updateQuery($params);
     else if (strcmp("selectQuery",$command)==0) 
        $respxml=selectQuery($params); 
     else if (strcmp("getColNames",$command)==0) 
        $respxml=getColNames($params); 
     else 
        $respxml=createResponse(0,"ERROR","El comando no existe");
    

    return $respxml;



function updateQuery($query) 
// Ejecuta un comando tipo UPDATE, INSERT, DELETE,... en la base de datos
// $query = String con el comando   
// devuelve: xmlresponse con el resultado

    GLOBAL $host, $user, $pw, $db;

    // Abrir la conexión con mysql
    $conn = opendb($host, $user, $pw, $db);
    if(!$conn) 
        return createResponse(-2,"ERROR","Error de conexión.-$conn");
    


    // Realizar la consulta a la B.D.
    $result=mysql_query($query, $conn);

    $ar = mysql_affected_rows();

    $cod = 0;
    $text ="ERROR";
    $desc ="-1";

    if($result == true) 
        $cod = 0;
        $text ="OK";
        $desc =$ar; 
    
    $response = createResponse($cod,$text,$desc);

    // Cerrar la conexión
    closedb($conn);

    // Devolver el resultado
    return $response;
;

function selectQuery($query) 
// Ejecuta un comando tipo SELECT en la base de datos
// query = String con el comando    
// devuelve: xmlresponse con el resultado

    GLOBAL $host, $user, $pw, $db;

    // Abrir la conexión con mysql
    $conn = opendb($host, $user, $pw, $db);
    if(!$conn) 
        return createResponse(-2,"ERROR","Error de conexión.-$conn");
    

    // Realizar la consulta a la B.D.
    $result=mysql_query($query, $conn);

    if ($result) 
        $nc = mysql_num_fields($result);

        $cad="";
        while( $row = mysql_fetch_array($result, MYSQL_BOTH)) 
            $cad .="<item>";
            for($i=0; $i<$nc; $i++) 
                $cad .= $row[$i];
                if($i<$nc-1) 
                    $cad .= ",";
                
            
            $cad .= "</item>";
        

        mysql_free_result($result);

        $response = createResponse(1, "OK", $cad);
     else 
        $response = createResponse(0, "ERROR", "Error en la llamada SQL"); 
    
    // Cerrar la conexión
    closedb($conn);

    // Devolver el resultado
    return $response;
;

function getColNames($nombreTabla) 
    // Devuelve un array con los nombres de las columnas de la 
    // tabla pasada como argumento
    // Si error devuelve array nulo;    

    // Establecer las variables globales
    GLOBAL $host, $user, $pw, $db;

    // Abrir la conexión con mysql
    $conn = opendb($host, $user, $pw, $db);
    if(!$conn) 
        return createResponse(-2,"ERROR","Error de conexión.-$conn");
    

    // Realizar la consulta a la B.D.
    $query = "SELECT * FROM $nombreTabla";
    $result=mysql_query($query, $conn);
    if ($result) 

        $numcols = mysql_num_fields($result);

        $resp = "";
        for($i=0; $i< $numcols; $i++) 
            $resp .= mysql_field_name($result, $i);
            if($i < $numcols-1) 
                $resp .= ",";
               
        
        mysql_free_result($result);
        $response = createResponse(1, "OK", $resp);

     else 
        $response = createResponse(0, "ERROR", "Error en acceso SQL");

    


    // Cerrar la conexión
    closedb($conn);

    // Devolver el resultado
    return $response;
;

function opendb($host, $user, $pw, $db) 
    // opendb
    // Establece conexión con el servidor $host y hace un USE de la base de datos $db
    // Parametros:
    //    $host
    //    $user
    //    $pw : password
    //    $db : Base de datos sobre la que se hará el USE 
    // Devuelve:
    //    Referencia a la conexión abierta o null si hay errores
    //
    $conn = mysql_connect($host, $user, $pw);
    if(!$conn) 
        return null;
    
    //echo "connected<br/>";
    $resp = mysql_select_db($db, $conn);
    if($resp != true) 
        return null;
    
    //echo "used<br/>";
    return $conn;
;

function closedb($conn) 
    // closedb()
    // Cierra la conexión con la base de datos
    // Parámetros:
    //     $conn Referencia al recurso de la conexión con la B.D.
    // Devuelve
    //     void
    if(!$conn) 
        return;
    
    mysql_close($conn);
;

function createArrayFromCadParams($cadParams) 
    // Recibe como entrada la cadena de parametros separados por comas
    // y devuelve un Array con los parametros separados
    $arrayParams=array();
    if (strlen($cadParams)!=0) 
        if(strpos($cadParams, ',')>0) 
            $arrayParams =  explode(',',$cadParams);
         else 
            $arrayParams[0]=$cadParams;
        
    
    return $arrayParams;
;

function createResponse($code, $text, $content) 
    // createResponse($code, $descrip, $content)
    //      Genera un documento XML del tipo <regataResponse>.
    //      (Ver su constitución en la documentación del programa)
    // Parámetros:
    //
    // Devuelve:
    //
    $doc=new DOMDocument('1.0');
    $cadxml="<wsResponse>";
    $cadxml=$cadxml."<statusCode>$code</statusCode>";
    $cadxml=$cadxml."<statusText>$text</statusText>";
    $cadxml=$cadxml."<content>$content</content>";
    $cadxml=$cadxml."</wsResponse>";
    $doc->loadXML($cadxml);
    return $doc->saveXML();
;

function createResponseFromCode($code) 
    // createResponseFromCode($code)
    //      Genera un documento XML del tipo <wsResponse>.
    //      OK para códigos >0 y ERROR para codigos <= 0        
    // (Ver su constitución en la documentación del programa)
    // Parámetros:
    //
    // Devuelve:
    //
    $text="ERROR";
    $content = "ERROR";
    if($code>0) 
        $text="OK";
        $content ="OK";
    
    $doc=new DOMDocument('1.0');
    $cadxml="<wsResponse>";
    $cadxml=$cadxml."<statusCode>$code</statusCode>";
    $cadxml=$cadxml."<statusText>$text</statusText>";
    $cadxml=$cadxml."<content>$content</content>";
    $cadxml=$cadxml."</wsResponse>";
    $doc->loadXML($cadxml);
    return $doc->saveXML();
;
?>

3 并引用头文件中的脚本： [...]

<script src="mysqlws.js"></script>

[...]

然后我尝试在另一个 js 文件中实现我的代码，其中我有公式的所有逻辑：

[...]

function liberar()
  
    var SQLguardar = null;
    var fecha = new Date();
    var indice = null;
    //Compruebo si existe dirección en el formulario
    //Esto es necesario porque si no han introducido una no se cambiarán las coordenadas.
    if(document.getElementById("direccion").value !='')
    

        txtDireccion = document.getElementById("direccion").value;
        txtObservaciones = document.getElementById("observaciones").value;
        txtNumRev = document.getElementById("numerorevista").value;
        txtLat = document.getElementById("lat").value;
        txtLng = document.getElementById("long").value;

        //alert ("Comenzando Guardado. Datos: "+txtDireccion+", "+txtObservaciones+", "+txtNumRev+", "+txtLat+", "+txtLng+".");

        //Definimos la consulta que guardará el nuevo punto

        SQLguardar = "INSERT INTO wp_leafletmapsmarker_markers (markername, basemap, layer, lat, lon, icon, popuptext, zoom, openpopup, mapwidth, mapwidthunit, mapheight, panel, createdby, createdon, updatedby, updatedon, controlbox, overlays_custom, overlays_custom2, overlays_custom3, overlays_custom4, wms, wms2, wms3, wms4, wms5, wms6, wms7, wms8, wms9, wms10, kml_timestamp, address) VALUES ('Ecléctica nº "+ txtNumRev+"', 'osm_mapnik', 3, "+ txtLat +", "+ txtLng+", 'text.png', '"+txtObservaciones+"', 17, 0, 640, 'px', 480, 0, 'revista','"+ fecha.getFullYear()+"/"+fecha.getMonth()+"/"+fecha.getDate()+"', NULL, NULL, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, NULL, '"+txtDireccion+"');";

        mysql_use("localhost",*MyDBUser*,*MyDBPass*,*MyDBName*);

        var arrayResult = mysql_update_query(SQLguardar);

        alert ("Resultado: "+arrayResult[0]);   

    else alert ("ATENCION: No se ha introducido una Direcci"+'\u00f3'+"n.  Por favor introduzca una direcci"+'\u00f3'+"n, pulse 'Pasar al mapa' y afine la localizaci"+'\u00f3'+"n con el marcador");

  

我的问题是它不保存任何东西。当我按下按钮（Liberar !!!）时，公式会以正确的 PHP 方向重新加载，但在数据库中我找不到新行。此外，必须显示结果的最后一个“警报”永远不会弹出......您可以看到公式here。我知道执行会到达这个方法，因为如果第一个警报未注释它会显示变量，但是当它尝试执行查询时，页面会重新加载并且什么都没有保存......

请有人指出我的错误吗？如何查看结果消息？还有其他方法可以使用您自己的 SQL 查询吗？此公式是项目的一部分，我需要使用自己的 SQL 查询来访问、处理和保存数据。

非常感谢您的时间和帮助。

【参考方案1】：

您不应在 JS 文件中构建 SQL 查询。 那应该在您的 PHP 文件中。从您的 JS 调用您的 PHP 文件，然后从您的 PHP 文件调用 SQL 服务器。 这对安全性更好，并且您更容易调试。

先尝试一下，然后检查您的日志是否有任何语法错误。

如果您选择忽略此建议（我强烈建议您不要这样做），您可以通过查看浏览器的控制台来进一步调试。

要在 php 中调试它，首先启用 error_reporting 以捕获任何不需要的语法错误并尝试以下几行：

$mysqli = new mysqli("example.com", "user", "password", "database");

/* check connection */
if ($mysqli->connect_errno) 
    printf("Connect failed: %s\n", $mysqli->connect_error);
    exit();


if (!$mysqli->query($query)) 
    printf("Errormessage: %s\n", $mysqli->error);


/* close connection */
$mysqli->close();

记得在一切顺利后关闭 error_reporting。

【讨论】：

好的，我会尝试将查询移动到 php 文件中。这将如何帮助我进行调试？我的意思是，如果我犯了错误，它会在哪里显示？非常感谢

您可以轻松访问php文件并在每次访问时手动触发SQL查询。如果你有 error_reporting ON 你会直接在屏幕上打印错误。