使用来自PHP的AJAX解析JSON数组

Question

我在制作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文件中进行更改。

谢谢您的帮助。

Answer 1

根据您上面的评论，我试图重写一个保持相同结构的解决方案，但是删除了不必要的内容； 这就是代码的样子。 请注意，没有对err_code和err_msg peoperties的引用，并且回调直接在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');

为了能够在JS中解析它，在PHP回显行之前。

Answer 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;

?>

我会继续寻找，但多亏您，我才前进了一步。