從PHP解析JSON數組與AJAX

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屬性，並且該回調在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變種，它現在包含解析數據數組：

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中。

Answer 2

好，非常感謝安德烈，貌似還有別的東西，我失蹤，因爲從contacts.php和初始contacts.php文件的結果是在我的瀏覽器相同的：

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

它工作得很好，如果我使用初始contacts.php，只有像上面那樣純json數據，但如果我切換到我的api它停止工作。

而且它停止工作，如果我用這個初始contacts.php：

<?php 

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

?> 

我會繼續關注，但多虧了你，我先走一步。