Question

我们正在开展大学项目，现在我们正面临着这个大问题。我们正在使用React和Javascript，我们需要从000webhost.com上的MYSQL数据库中获取一些数据，并将它们存储在Javascript变量中。我们在互联网上搜索了很多，但是我们找不到任何解决方案，可能只是因为我们遗漏了一些重要的东西或者我们不理解某些东西。这是Webhost000上托管的PHP文件，它完美地运行：

<?php
//Connect to DB
$servername = "localhost";
$username = "id1761679_nedo93";
$password = "*********";
$dbname = "id1761679_mrtdb";

// Create connection
$conn = new mysqli($servername, $username, $password, $dbname);
// Check connection

if ($conn->connect_error) {
   die("Connection failed: " . $conn->connect_error);
}

//Name Array Selector
$queryN = "SELECT Name FROM persontable";
$name = mysqli_query($conn, $queryN) or die ("no query");

$name_array = array();
while($row = mysqli_fetch_assoc($name)) {
   $name_array[] = $row;
}   

$nameJSON = json_encode($name_array);

echo $nameJSON;

?>

此文件的URL为https://nedo93.000webhostapp.com/phpgetcoords.php，实际上如果单击它，它应该以JSON格式回显存储在数据库中的所有名称。

现在，我们只需要将这个json变量传递给一个javascript，它不在Webhost上运行，而是在PC上的Node终端上运行。

我们尝试了AJAX以及我们在谷歌和Youtube上可以找到的一切，但似乎没有任何效果，我们非常绝望。

即使它与问题无关，这是我们需要存储数据的Javascript文件，以便将名称和坐标与deck.gl图层相关联并在地图上显示它们。唯一的问题是将dabase中的数据与此文件中的变量相关联：

import React, {Component} from 'react';
import DeckGL, {PathLayer} from 'deck.gl';
import DeckGL, {ScatterplotLayer} from 'deck.gl';

var currPos = null;
var vname = null; 

//This is the function we are trying but it's not working, the variable vnam is empty.

(function () 
  {   
    $.ajax({                                      
      url: 'https://nedo93.000webhostapp.com/phpgetcoords.php',                          
      data: "",                                 
      dataType: 'json',                     
      success: function(data)          
      {                      
        vname = data[1];         
      } 
    });
  });




//Position tracker
navigator.geolocation.watchPosition(

function(position) {
    currPos = position;
},
   function(error){
       console.log(error);
   }
);

export default class DeckGLOverlay extends Component {  

  static get defaultViewport() {
    return {
      longitude: 11.20, //11.25,
      latitude: 43.77, //43.77,
      zoom: 16,
      maxZoom: 18,
      pitch: 40, //viewport tilt
      bearing: 0
    };
  }

  _initialize(gl) {
    gl.enable(gl.DEPTH_TEST);
    gl.depthFunc(gl.LEQUAL);
  }
    //Add in const { }, new layers's ID
  render() {
    const {viewport, scatters, pos, icon, paths, trailLength, time} = this.props;   

    //Add another instance of a new layer here:

    const layers = [      
      new ScatterplotLayer({
        id: 'scatters',
        data: scatters,     
        radiusScale: 100,
        outline: false
       }),
      new ScatterplotLayer({
        id: 'pos',
        data: pos,
        getPosition: a => [currPos.coords.longitude, currPos.coords.latitude, 1],
        radiusScale: 100,
        outline: false
       }),    
       new PathLayer({
        id: 'paths',
        data: paths,        
        rounded: true,
        getColor: paths => [255, 0, 0, 255],
        getWidth: paths => 0.03,
        widthScale: 100
      })
    ];  

    return (
      <DeckGL {...viewport} layers={layers} onWebGLInitialized= this._initialize} />
    );      
  }    
}

感谢任何可以帮助我们的人。

如何从Webhost上的mysql数据库获取数据并将其存储到Javascript变量中？

0 个答案: