通过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。