Question

我正在后端处理一个网页，该网页显示来自SQlite3数据库的电视频道的EPG信息。数据由回显JSON字符串的PHP脚本提供。这本身有效，手动执行php程序会创建一个这种格式的JSON字符串

[{"id":"0001","name":"RTL","frequency":"626000000"},{"id":...

我想稍后使用这些对象来创建HTML元素，但是获取字符串的ajax函数不起作用。我已经查看了多个示例和教程，但他们似乎都更专注于PHP返回自包含的HTML元素。我页面上的相关js是：

var channelList;

$(document).ready(function() {
    $.ajax({    
        url: 'channellookup.php',    
        dataType: "json",    

        success: function(data) {    
            console.log(data.success);    
            channelList = data;    
        }    
    });
});

但是，通过控制台检查时，channelList变量仍为空。我究竟做错了什么？

Answer 1

请确保您的PHP回显正确的内容类型。

要回显JSON，请在响应标头中添加内容类型。

<?php
  header(‘Content-type:text/json’);     // To ensure output json type.
  echo $your_json; 
?>

Answer 2

这是因为程序运行时变量是空的。它仅在AJAX运行时填充，并且在更新变量时不更新DOM。您应该使用回调并从success()传入数据并在需要的地方使用它。

在带有回调参数的函数中包装AJAX调用。像这样：

function getChannels(callback){  
    $.ajax({    
    url: 'channellookup.php',    
    dataType: "json",    
        success: function(data) {    
            console.log(data);    
            if (typeof(callback) === 'function') {
                callback(data);
            }    
        }, 
        error: function(data) {
            if (typeof(callback) === 'function') {
                callback(data);
            } 
        }  
   });
}

然后在可用时使用它。您还应该使用error()来帮助调试，它会快速告诉您错误是在客户端还是服务器上。这有点冗长，因为我正在检查以确保callback是一个函数，但优雅的做法是始终优雅地检查和失败。

getChannels(function(channels){
    $('.channelDiv').html(channels.name);
    $('.channelDiv2').html(channels.someOtherProperty);
});

我没有对此进行测试，但这就是流程应该如何进行的。 This SO post可能会有所帮助。

编辑：这就是像Angular这样的框架很棒的原因，因为你可以快速设置将为你处理更新的观察者。

如何从数据库获取JSON字符串结果供以后使用

2 个答案: