将混合数据类型数组从php传递到javascript数组

时间:2014-10-03 03:18:43

标签: javascript php mysql json getjson

这接近典型的asyncronous / getJSON主题。我似乎无法让我的工作...我正在从php文件“loadblocks.php”中加载mySQL数据库中的数组,并通过运行页面并执行echo json_encode测试其输出工作正常($内容);。所有数据打印到浏览器100%完美。但是,当我在Javascript中调用json数据时...一旦我点击了我的onclick事件的链接,页面就没有响应。

<?php               
$con=mysqli_connect("localhost","root","password","swim");
// Check connection
if (mysqli_connect_errno()) {
    echo "Failed to connect to MySQL: " . mysqli_connect_error();
}

$result = mysqli_query($con,"SELECT * FROM blocks");    
$content = array();     // initialize block viewer array    

if($result){
    while($row = mysqli_fetch_assoc($result)) {
        $content[$row["id"]] = $row;        // "id" is primary key id's
    }
}
echo json_encode($content);  // return array (validated)

mysqli_close($con);
?>

然后我的HTML文件中有以下内容......我需要从mySQL数据库加载这个“块”数据的多维数组。基本上我需要在打开这个“块查看器”html / javascript页面时执行此操作,并将php变量“$ content”中的所有数据读入多维数组中每行的文字“块”。每行包含一种教育课程要求,照片链接等...我的HTML / jscript如下:

<html>

<head>
<script>
    function loadblocks() {
      $("#selectable").selectable({
        disabled: true
      }); // disable selectable while re-loading blocks in "selectable" viewer
      $.getJSON('loadblocks.php', data, function(jsonarray) {
        // store jsonarray once it is loaded in here
        blockarray = jsonarray;
        // in MySQL each row = (id, blocktype, title, description, imgurl, img2url, img3url, vidurl, goal1, goal2, goal3)
        // Thus index #3 in each row is the "title" we will load in each box for now
        // todo - create loop to load all rows
        document.getElementById("selectable").innerHTML += "<li class='ui-state-default'>" + blockarray[0][3] + "</li>";
      })
      $(".selectable").selectable({disabled: false}); // re-enable
    }
  </script>
</head>

<body>

  <table class="floatboxstyle" style="width:675px; height:225px;">
    <tr>
      <td>
        <ol id="selectable">
          <li class="ui-state-default">Sample block</li>
        </ol>
      </td>
    </tr>
  </table>
  <button onclick="loadblocks()">Load Blocks</button>

  <br>

  <p id="feedback">
    <span>You've selected:</span>  <span id="select-result">none</span>
  </p>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

您不必使用parseJSON作为响应,jsonData应该已经是JavaScript对象,实际上应该是一个错误,尽管我通常使用{{1}所以我不确定JSON.parse是否爆炸。在此代码中,我没有看到您使用parseJSON执行任何操作。并且您没有错误处理程序来报告问题,请尝试添加一个。

  

成功回调传递返回的数据,该数据通常是JSON结构定义的JavaScript对象或数组,并使用$ .parseJSON()方法进行解析。它还传递了响应的文本状态。[1]

[1] http://api.jquery.com/jQuery.getJSON/

此外,虽然您可能在浏览器中看到JSON打印,但它可能不是有效的JSON,在这种情况下它会无声地失败。

  

从jQuery 1.4开始,如果JSON文件包含语法错误,则请求通常会以静默方式失败。因此,请避免频繁手动编辑JSON数据。

尝试并验证您的JSON以确保它实际上有效,但我假设blockarray会为您做到这一点。