通过 Web 视图中的 AJAX 检索存储在本地存储中的 JSON 文件

Question

我有一个面向移动设备的 UWP 应用程序。 我在应用程序中有一个本地 html 和 js 文件，以及一些 js 文件需要调用的 json 文件。 Web 视图正确呈现和加载 html 文件和 js 文件。

我的问题是能够在 js 文件中获取 json 文件。 我尝试使用本地路径"ms-appx-web:///www//demo_data//demo.json"进行ajax调用。 文件夹"www"位于根项目下。 我从 ajax 调用收到一个 500 错误，文本状态为"错误"。 我做错了什么，我如何让它工作？ 当我尝试谷歌搜索这个时，没有太多的文档，或者我可能正在谷歌搜索错误的东西。

Answer 1

我尝试使用本地路径"ms-appx-web:///www//demo_data//demo.json"进行ajax调用。

首先，jQuery.ajax() 可能不支持 ms-appx-web 方案。实际上它是调用XMLHttpRequest，请求需要XMLHTTPRequest标准。如果您直接在 HTML 中使用ms-appx-web调用 ajax 调用，您将获得错误详细信息：

jquery-3.2.1.min.js：4 XMLHttpRequest 无法加载 ms-appx-web:///test.json。跨源请求仅支持协议方案：http、data、chrome、chrome-extension、https。

所以其次，文件应该在 Web 服务器中。此方法可能无法加载本地文件。并且 uwp 应用程序不是您不能使用jQuery.ajax()加载本地文件的 Web 服务器。

如果您只想在WebView中显示 json 文件，您可以通过多种方式引用。

1. 上传到 Web 服务器并使用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);
   }
   

更多详细信息请参考此线程，有关WebView的更多详细信息请参考官方示例。