Как передать данные из файла PHP в JS файл

166

15 марта 2019, 17:30

Есть php файл с функциями, в нем такая функция:

function fromMap($connect) {
    $array = [];
    $result = mysqli_query($connect, "SELECT coordX,coordY FROM coords");
    $rows = mysqli_num_rows($result);
    for ($i = 0; $i < $rows; ++$i){
        $row = mysqli_fetch_row($result);
        array_push($array, $row);
    }
    echo json_encode($array);
    mysqli_free_result($result);
    mysqli_close($connect);
}

Нужно передать $array в js скрипт, оформленный отдельным файлом. Делаю это через ajax, но ничего не получается:

$(document).ready(function(){
    function getData() {
        $.ajax({
            url: 'data/functions.php',
            dataType: 'json',
            success: function(response) {
                console.log(response);
            },
            error: function() {
                console.log('ERROR');
            }   
        });
    }
})

В консоли ERROR. ЧЯДНТ? Как принять массив из php в JS?

html файл страницы:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8"/>
    <title>Карта кликов</title> 
    <script type="text/javascript" src="jq/jquery-3.3.1.min.js"></script>
    <script type="text/javascript" src="data/pixel_script.js"></script>
    <link type="text/css" rel="stylesheet" href="static/site_style.css">
    <link type="text/css" rel="stylesheet" href="static/map_style.css">
    <link rel="stylesheet" href="static/header-style.css">
    <link rel="stylesheet" href="static/content-style.css">
    <link rel="stylesheet" href="static/top-content-style.css">
    <link rel="stylesheet" href="static/center-content-style.css">
    <link rel="stylesheet" href="static/bottom-content-style.css">
    <link rel="stylesheet" href="static/footer-style.css">
    <link rel="stylesheet" href="static/bg-style.css">
    <script>
        $(function() {
            $('#header').load('site/header.html');
            $('#content').load('site/content.html');
            $('#footer').load('site/footer.html');
        });
    </script>
</head>
<body>
    <div class="container">
        <canvas id = "mapCanvas" width="1903" height="1570"></canvas> <!-- 
Размеры канваса выставляются вручную -->
        <div id = "div-container">
            <div id="header"></div>
            <div id="content"></div>
            <div id="footer"></div>
            <button id="switch">
                <a id="switchref" href="daily_activity_graph.php">
                    График суточной активности
               </a>
            </button>
        </div>
    </div>
</body>     
</html>
<?php
    header ('Content-Type: text/html; charset=utf-8');
    require_once 'data/config.php';
    require_once 'data/functions.php';
    connect(HOST,USER,PASS,DATABASE);
    fromMap($connect);
?>

UPD Короче, решил я не париться с отдельным js скриптом, а прописать его прямо в php функции.

$result = mysqli_query($connect, "SELECT coordX,coordY FROM coords");
$rows = mysqli_num_rows($result);
for ($i = 0; $i < $rows; ++$i){
    $row = mysqli_fetch_row($result);
    echo("<script type=\"text/javascript\">
    var canvas = document.getElementById('mapCanvas');
    var context = canvas.getContext('2d');
    context.fillStyle = 'red';
    context.beginPath();
    context.arc($row[0],$row[1],3,0,2*Math.PI); 
    context.fill();</script>");
}

Проблема данного способа в том, что в DOM плодятся скрипты, отрисовывающие круги на экране. Чтобы решить данную проблему, засунул row в массив и передал в js скрипт. На приеме из объекта вытащил свойства в массив и вывел на экран через цикл:

$array = [];
$result = mysqli_query($connect, "SELECT coordX,coordY FROM coords");
$rows = mysqli_num_rows($result);
for ($i = 0; $i < $rows; ++$i){
    $row = mysqli_fetch_row($result);
    array_push($array, $row);
}
$array = json_encode($array);
echo("<script type='text/javascript'>
    var canvas = document.getElementById('mapCanvas');
    var context = canvas.getContext('2d');
    context.fillStyle = 'red';
    var array = Object.values($array);
    for (var i in array){
        context.beginPath();
        context.arc(array[i][0],array[i][1],3,0,2*Math.PI);
        context.fill();
    }</script>");

Answer 1

Для начала Вам необходимо четко определиться с тем, где (клиент/сервер) и в какое время у вас выполняется код.

Приведенный пример HTML разметки с JS и PHP кодом внутри работают в разное время - разметка и JS на стороне клиента, PHP на стороне сервера и то при удачном стечении обстоятельств. AJAX запрос, уже писали, непонятно в какое время выполняется, но в любом случае, он будет адресован от клиента к серверу и запрашиваемый на обработку запроса скрипт functions.php будет обязан адекватно отработать и выдать ответ в части:

success: function(response) {
             console.log(response);
         },

Итого. Передать содержимое $array в виде JSON в JS код (выполняемый на стороне клиента) нужно/можно именно в ответе AJAX после того как отработает логика functions.php.

Покажите чать кода functions.php, которая формирует ответ.

Создание интернет-магазина игрушек в ABCname

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

в чем разница Value value js

Пытался применить данную функцию но так и не понял почему ругаетсяВ чем разница Value и value

154

javascript

Спарсить количество переданной валюты

Может кто-нибудь показать, как спарсить количество этериума с https://etherscanio отправленного с одного адреса на другой? Т

220

javascript

По клику добавить изоображение

Ребят всем приветУ меня есть инпут, который добавляет изоображение

204

javascript

Как добавить кастомные маркеры к карте OSM?

В картах OSM я новичок, саму карту получилось сгенерировать на javascript, но нужно добавить маркеры к населенным пунктам на карту, читала, что это...

147