通過webview中的ajax檢索存儲在本地存儲中的json文件

Question

我有一個針對移動設備的UWP應用程序。我在應用程序中有一個本地html和js文件以及js文件需要調用的一些json文件。 webview呈現並正確加載html文件和js文件。

我的問題是能夠獲取js文件中的json文件。我嘗試使用本地路徑「ms-appx-web：///www//demo_data//demo.json」進行ajax調用。文件夾「www」位於根項目下。我從ajax調用中獲得了一個500錯誤，其中textStatus爲「Error」。我做錯了什麼，我如何得到這個工作？沒有太多的文件，當我試圖谷歌這或我可能會googling錯誤的事情。

Answer 1

我試着用本地路徑「ms-appx-web：///www//demo_data//demo.json」做一個ajax調用。

首先ms-appx-web scheme可能不被jQuery.ajax()支持。實際上它是調用XMLHttpRequest，請求需要是XMLHTTPRequest標準。如果你調用與ms-appx-web Ajax調用一個HTML直接，你會得到錯誤的詳細信息：

jQuery的3.2.1.min.js：4的XMLHttpRequest不能加載MS-APPX的web：///測試。 JSON。協議方案僅支持跨源請求：http，data，chrome，chrome-extension，https。

其次，文件應該在Web服務器中。本地文件可能無法通過此方法加載。而uwp應用程序不是一個Web服務器，您可能不會使用jQuery.ajax()加載本地文件。

如果你只是想在WebView裏面顯示json文件，你可以引用幾種方法。

1. 上傳到網絡服務器並使用jQuery.ajax()。

2. 通過uwp API加載Json文件，然後通過NavigateToString方法加載它。例如（如果需要解析JSON）：

   StorageFile f = await StorageFile.GetFileFromApplicationUriAsync(new Uri("ms-appx:///Assets/www/test.json")); 
   WebBrowser.NavigateToString(await FileIO.ReadTextAsync(f)); 
   

3. 硬代碼JSON文件的直接的JS內的內容作爲處理的對象。例如：

   <script type='text/javascript'> 
       function doSomething() { 
        var data = '[{"name" : "Ashwin", "age" : "20"},{"name" : "Abhinandan", "age" : "20"}]'; 
        var mydata = JSON.parse(data);    
        document.getElementById('myDiv').innerText ="name:"+ mydata[0].name; 
        return "done"; 
       } 
   </script> 
   //Invoke the script by webview 
   private async void btninvoke_Click(object sender, RoutedEventArgs e) 
   { 
       string result = await WebBrowser.InvokeScriptAsync("doSomething", null); 
   } 
   

更多細節請參考this thread，以及有關WebView更多細節請參考official sample。