使用 jQuery GET 加载 CSV 文件返回标题但没有数据答案

【问题标题】：Loading a CSV file using jQuery GET returns the header but no data使用 jQuery GET 加载 CSV 文件返回标题但没有数据
【发布时间】：2020-04-17 07:30:51
【问题描述】：

当使用 jQuery 'GET' 函数从服务器读取 CSV 文件时，我没有得到任何数据。当我使用 FireBug 查看代码时，我可以看到 GET 请求已发送，返回值为“200 OK”。我还看到正确返回了标头，因此肯定发出了请求，并返回了数据。这也是我在 Wireshark 中看到的。在这里，我看到 CSV 文件的完整内容作为标准 HTTP 响应返回。
但是我的脚本中没有实际数据。 Firebug 显示一个空响应，并且永远不会调用“成功”函数。有什么问题？

编辑：我的问题似乎缺少信息的重要部分。以下代码在我的本地机器上运行，并由 Firefox 中的 Aptana Studio 使用内置测试服务器启动。

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>       
        <title>New Web Project</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="jquery.js" type="text/javascript" charset="utf-8"></script>

       <script type="text/javascript">
        var csvData;
        $(document).ready(function() {
           $("#btnGET").click(function() {
                csvData = $.ajax({
                    type: "GET",
                    url: "http://www.mywebsite.com/data/sample_file.csv",
                    dataType: "text/csv",
                    success: function () {
                       alert("done!"+ csvData.getAllResponseHeaders())
                     }
                });
           });
        }) 
 </script>
 </head>   

     <body>
        <h1>New Web Project Page</h1>
        <button id="btnGET">GET Data</button>
    </body>
</html>

【问题讨论】：

标签： jquery csv

【解决方案1】：

代码不起作用，因为我尝试进行跨域 GET。页面和脚本托管在我的本地计算机上，GET 尝试从完全不同的域中检索数据。尽管在技术上是可行的，但它已被所有现代浏览器阻止，因为它是一个安全漏洞。
Frederick Behrends 为我指明了正确的方向。正如他还提到的，唯一允许的跨域 GET 是使用“jsonp”。

以下文字取自 jQuery 文档：
“由于浏览器安全限制，大多数“Ajax”请求都受制于同源策略；该请求无法成功从不同域检索数据，子域、端口或协议。"

【讨论】：

【解决方案2】：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>       
        <title>New Web Project</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <script src="jquery.js" type="text/javascript" charset="utf-8"></script>

       <script type="text/javascript">
        var csvData;
        $(document).ready(function() {
           $("#btnGET").click(function() {
                csvData = $.ajax({
                    type: "GET",
                    url: "http://www.mywebsite.com/data/sample_file.csv",
                    dataType: "text/csv",
                    success: function (result) {
                       alert(result);
                       alert("done!"+ csvData.getAllResponseHeaders())
                     }
                });
           });
        }) 
 </script>
 </head>   

     <body>
        <h1>New Web Project Page</h1>
        <button id="btnGET">GET Data</button>
    </body>
</html>

【讨论】：

不确定这试图解决什么问题？我添加了“警报（结果）；”但是（正如预期的那样）什么都没有出现，因为从未调用过“成功”函数。
您确定，文件存在且网址为en.wikipedia.org/wiki/Same_origin_policy 有效吗？
该文件确实存在。正如我已经提到的，我在 Wireshark 中看到文件的内容，因为它是从服务器发送到我的客户端的。我不确定我是否完全理解“同源策略”，但客户端显然在我的 PC 上是本地的，并且数据在远程网页上。这真的是个问题吗？我经常看到网站从其他网站获取数据。
这可能是个问题，尝试将 dataType 设置为 'jsonp'
虽然还是不行，但是好像解决了获取数据的问题。 'success' 函数仍未被调用，但在 Firebug 中，我现在在 CSV 文件的实际文本中遇到解析错误。

【解决方案3】：

据我了解，dataType 只接受“文本”作为参数，您可以试试吗？您也可以参考以下页面： http://api.jquery.com/jQuery.ajax/

谢谢。

【讨论】：

不。我实际上是从“文本”开始的，但这也不起作用。也尝试不使用此说明符，但这也不起作用。

【解决方案4】：

                $.ajax({
                    type: "GET",
                    url: "http://www.mywebsite.com/data/sample_file.csv",
                    dataType: "text/csv",
                    success: function (data) {
                       csvData = data;
                       //alert("done!"+ csvData.getAllResponseHeaders()) - my fix makes this won't work...
                     }
                });

【讨论】：

这也没什么区别，因为“成功”函数永远不会被调用。
尝试升级 jQuery，如果这不起作用 - 我不知道出了什么问题。

【解决方案5】：

我尝试注释掉 dataType 并且成功了。

【讨论】：

最好分享一些代码和它的示例输出。