javascript - 使用 jQuery Ajax 将数据从 MySQL 加载到 JavaScript 数组

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

json_encodeJavascript 中的 PHP 函数的反面是JSON.parse(json)：

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

Answer 3

简单做

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

或者

数据 = $.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>

Answer 4

您是否尝试过在您的 ajax 调用中添加 -"dataType:"json"。如果您这样做，您的 php 脚本中的 json_encode 将负责返回正确的数组结构。

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

Answer 5

而不是 echo json_encode($return); 你可以使用 echo json_encode(array('data'=>$return)); 以关联数组格式获得响应。