Загрузка данных из MySQL в JavaScript Array of Array с использованием jQuery Ajax

Question

У меня есть PHP и JQuery код, как показано ниже

<script>
$( document ).ready(function() {
  var data =[];
    $("#submit").on("click",function(){
        $.ajax({
                type:"POST",
                url:"map.php",
                success: function (html) {
                    $('#message').html(html);
                }
        });
    });
});
</script> 

PHP

<?php
define ( 'DB_HOST', 'localhost' );
define ( 'DB_USER', 'root' );
define ( 'DB_PASS', '' );
define ( 'DB_NAME', 'test' );
  $con = new mysqli(DB_HOST,DB_USER,DB_PASS,DB_NAME);
  $query = "SELECT x,y FROM app";
  $results = $con->query($query);
  $return = array();
  if($results) {
    while($row = $results->fetch_assoc()) {
      $return[] = array((float)$row['x'],(float)$row['y']);
    }
  }
   echo json_encode($return);
  $con->close();
 ?>

которые возвращают значения из базы данных, как это в $('#message').html(html);

[ [ 20 , 20 ],[ 20 , 30 ],[ 50 , 35 ],[ 40 , 20 ] ]

теперь, пожалуйста, дайте мне знать, как я могу разобрать / экспортировать / отправить этот результат в data =[]; чтобы иметь массив массив там, так что в конечном итоге результат должен выглядеть так:

var data  =[ [ 20 , 20 ],[ 20 , 30 ],[ 50 , 35 ],[ 40 , 20 ] ];

Спасибо

Answer 1

Включают dataType: 'json'

$.ajax({
     type:"POST",
     url:"map.php",
     dataType: 'json',
     success: function (html) {
         $('#message').html(html);
         data = html;
         console.log(data);
     }
});

Answer 2

Вместо echo json_encode($return); Вы можете использовать echo json_encode(array('data'=>$return)); получить ответ в формате ассоциативного массива.

Answer 3

Противоположность вашей json_encode PHP-функция в JavaScript JSON.parse(json):

var myArr = JSON.parse("[ [ 20 , 20 ],[ 20 , 30 ],[ 50 , 35 ],[ 40 , 20 ] ]");

Answer 4

Вы пытались добавить - "dataType: "json"к вашему вызову ajax... Если вы сделаете это, json_encode в вашем php-скрипте позаботится о возвращении правильной структуры массива.

$.ajax({
            type:"POST",
            url:"map.php",
            dataType: "json",
            success: function (html) {
                $('#message').html(html);
            }
});

Answer 5

Просто сделать

data  = $.parseJSON('[ [ 20 , 20 ],[ 20 , 30 ],[ 50 , 35 ],[ 40 , 20 ] ]');

или же

data = $.parseJSON(html);

ПРИМЕЧАНИЕ: удалите var при назначении массива переменной данных, он назначит массив глобальной переменной данных.

Итак, финальный скрипт будет:

<script>
$( document ).ready(function() {
  var data =[];
    $("#submit").on("click",function(){
        $.ajax({
                type:"POST",
                dataType:'json',
                url:"map.php",
                success: function (html) {
                    $('#message').html(html);
                    data = $.parseJSON(html);
                }
        });
    });
});
</script>