【问题标题】:Parse JSON array with AJAX from PHP使用 PHP 中的 AJAX 解析 JSON 数组
【发布时间】:2014-10-30 10:00:01
【问题描述】:

我在制作 PHP API 以从 MYSQL 获取数据并解析 JSON 时遇到问题。我有一个演示应用程序 (hiApp),并在一个文件夹中附带了一些 JSON 文件。

演示JSON文件是这样的:

{ "err_code": 0, "err_msg": "success", "data": [{"nickname":"Joao","location":"I.13"},{"nickname":"Victor","location":"2811"}]}

这是我的 contacts.php 返回的内容:

[{"nickname":"Joao","location":"I.13"},{"nickname":"Victor","location":"2811"}]

我的 contacts.php api 如下所示: …

…
    $result = mysql_query("select * from sellers", $db);  

    $json_response = array();

    while ($row = mysql_fetch_array($result, MYSQL_ASSOC)) {
        $row_array['nickname'] = $row['first_name'];
        $row_array['location'] = $row['territory'];

        array_push($json_response,$row_array);
    }

    echo json_encode($json_response);

?>

解析JSON的js文件,如下所示:

define(['utils/appFunc',
        'i18n!nls/lang',
        'components/networkStatus'],function(appFunc,i18n,networkStatus) {

    //var apiServerHost = window.location.href;

    var xhr = {

        search: function(code, array){
            for (var i=0;i< array.length; i++){
                if (array[i].code === code) {
                    return array[i];
                }
            }
            return false;
        },

        getRequestURL: function(options){
            //var host = apiServerHost || window.location.host;
            //var port = options.port || window.location.port;
            var query = options.query || {};
            var func = options.func || '';

            var apiServer = 'api/' + func + '.php' +
                (appFunc.isEmpty(query) ? '' : '?');

            var name;
            for (name in query) {
                apiServer += name + '=' + query[name] + '&';
            }

            return apiServer.replace(/&$/gi, '');
        },

        simpleCall: function(options,callback){
            options = options || {};
            options.data = options.data ? options.data : '';

            //If you access your server api ,please user `post` method.
            //options.method = options.method || 'GET';
            options.method = options.method || 'POST';

            if(appFunc.isPhonegap()){
                //Check network connection
                var network = networkStatus.checkConnection();
                if(network === 'NoNetwork'){

                    hiApp.alert(i18n.error.no_network,function(){
                        hiApp.hideIndicator();
                        hiApp.hidePreloader();
                    });

                    return false;
                }
            }

            $$.ajax({
                url: xhr.getRequestURL(options) ,
                method: options.method,
                data: options.data,
                success:function(data){
                    data = data ? JSON.parse(data) : '';

                    var codes = [
                        {code:10000, message:'Your session is invalid, please login again',path:'/'},
                        {code:10001, message:'Unknown error,please login again',path:'tpl/login.html'},
                        {code:20001, message:'User name or password does not match',path:'/'}
                    ];

                    var codeLevel = xhr.search(data.err_code,codes);

                    if(!codeLevel){

                        (typeof(callback) === 'function') ? callback(data) : '';

                    }else{

                        hiApp.alert(codeLevel.message,function(){
                            if(codeLevel.path !== '/')
                                mainView.loadPage(codeLevel.path);

                            hiApp.hideIndicator();
                            hiApp.hidePreloader();
                        });
                    }
                }
            });

        }

    };

    return xhr;
});

我知道错误在于contacts.php 显示JSON 结果的方式,或者我需要更改js 文件中的某些内容。

感谢您的帮助。

【问题讨论】:

  • 您能否详细说明您遇到问题的地方?您说 PHP 返回正确的 JSON 字符串,所以我怀疑您无法在 JS 中读取 JSON 响应?
  • 是的,没错,我需要在JS文件中更改一些东西,但是我看不到它是什么。最初的 json 也返回了这个 { "err_code": 0, "err_msg": "success", "data":,我必须让 JS 文件在没有这个的情况下工作。
  • data,在JSON.parse(data) 之后,看起来正确,包含一个对象数组。我认为您应该能够直接调用callback(data),确保更改其行为,因为那时数据将不再包含err_codeerr_msgdata 属性。您没有发布回调,因此我无法为您提供可能的完整代码解决方案。
  • 这是loadContacts: function() { if(VM.module('contactView').beforeLoadContacts()) { xhr.simpleCall({ query: { callback: '?' }, func: 'contacts' }, function (response) { if (response.err_code === 0) { VM.module('contactView').render({ contacts: response.data }); } }); } }
  • 我在下面发布了一个可能的答案。

标签: javascript php ajax json api


【解决方案1】:

根据您上面的 cmets,我尝试重写一个保持相同结构但删除不必要的东西的解决方案;这就是代码的样子。注意这里没有对err_codeerr_msg人员的引用,回调是直接在data变量上调用的。

define(['utils/appFunc',
        'i18n!nls/lang',
        'components/networkStatus'],function(appFunc,i18n,networkStatus) {

    //var apiServerHost = window.location.href;

    var xhr = {

        getRequestURL: function(options){
            //var host = apiServerHost || window.location.host;
            //var port = options.port || window.location.port;
            var query = options.query || {};
            var func = options.func || '';

            var apiServer = 'api/' + func + '.php' +
                (appFunc.isEmpty(query) ? '' : '?');

            var name;
            for (name in query) {
                apiServer += name + '=' + query[name] + '&';
            }

            return apiServer.replace(/&$/gi, '');
        },

        simpleCall: function(options,callback){
            options = options || {};
            options.data = options.data ? options.data : '';

            //If you access your server api ,please user `post` method.
            //options.method = options.method || 'GET';
            options.method = options.method || 'POST';

            if(appFunc.isPhonegap()){
                //Check network connection
                var network = networkStatus.checkConnection();
                if(network === 'NoNetwork'){

                    hiApp.alert(i18n.error.no_network,function(){
                        hiApp.hideIndicator();
                        hiApp.hidePreloader();
                    });

                    return false;
                }
            }

            $$.ajax({
                url: xhr.getRequestURL(options) ,
                method: options.method,
                data: options.data,
                success:function(data){
                    data = data.length > 0 ? JSON.parse(data) : [];

                    if (typeof(callback) === 'function' && data !== undefined)
                        callback(data);
                }
            });

        }

    };

    return xhr;
});

那么你可以这样调用它,直接使用response var,它现在包含了解析后的数据数组:

loadContacts: function() {
    if(VM.module('contactView').beforeLoadContacts()) {
        xhr.simpleCall({
                query: { callback: '?' },
                func: 'contacts'
        }, function (response) { 
            if (response !== undefined) { 
                VM.module('contactView').render({ 
                        contacts: response
                }); 
            } 
        }); 
    } 
}

另外,你必须添加

header('Content-Type: application/json');

在您的 PHP 回显行之前,以便能够在 JS 中对其进行解析。

【讨论】:

    【解决方案2】:

    好的,非常感谢 Andrea,看起来我还缺少其他内容,因为在我的浏览器中,contacts.php 和初始 contacts.php 文件的结果是相同的:

    [{"nickname":"Joao","location":"I.13"},{"nickname":"Victor","location":"2811"}]
    

    如果我使用像上面那样只有纯 json 数据的初始 contacts.php,它工作得很好,但如果我切换到我的 api,它就会停止工作。

    如果我在最初的contacts.php中使用它,它也会停止工作:

    <?php
    
    $myString = '[{"nickname":"Joao","location":"I.13"},{"nickname":"Victor","location":"2811"}]';
    echo $myString;
    
    ?>
    

    我会继续寻找,但多亏了你,我领先一步。

    【讨论】:

    • 你试过设置 header('Content-Type: application/json');在回显之前在 PHP 中?
    • 感谢安德里亚,它成功了。你救了我:) 我想投票给你的答案,但我没有足够的声誉......
    • 很高兴它对您有所帮助!我已将我的完整答案与此信息相结合,如果您满意,请随时接受它,而不是投票。
    猜你喜欢
    • 1970-01-01
    • 2012-06-01
    • 1970-01-01
    • 1970-01-01
    • 2014-09-21
    • 2016-04-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多