0

我正在尝试使用 PHP 来回显 CSV 文件的内容，然后使用jquery-csv对其进行解析以使用 Mustache.js 模板中的数据。我已经尝试过 Papa Parse，虽然它能够解析数据并填充模板，但它似乎也破坏了正在使用的 Isotope 库。

编码：

<script>
    var result = $.csv.toObjects(<?php echo $data ?>);
    (function() {
        var template = $('#template').html(),
            output = Mustache.to_html(template, {
                array: result
            });
        $('.isotope').append(output);
    })();
</script>

当我尝试此操作时，我收到错误“参数列表后未捕获的语法错误：缺少)”。当我使用jquery-csv 演示时，我可以在从 php echo 复制和粘贴出现在源代码中的 $data 时让它工作：

category,name,preferred,diversity,phone,email,website,info
appliances,Best Buy,,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
appliances,Grand Appliance,,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
architectural,Korb Tredo Architects Inc,preferred,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
armored,Dunbar Armored,preferred,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
audio-visual,CDW-G,,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
audio-visual,Full Compass Systems LTD,,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
4

1 回答 1

1

发生这种情况是因为您将一个原始的、未加引号的字符串注入到您的 JavaScript 代码中。您输出的 HTML 源代码中的 JavaScript 应如下所示：

<script>
    var result = $.csv.toObjects(category,name,preferred,diversity,phone,email,website,info
appliances,Best Buy,,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
appliances,Grand Appliance,,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
architectural,Korb Tredo Architects Inc,preferred,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
armored,Dunbar Armored,preferred,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
audio-visual,CDW-G,,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?"
audio-visual,Full Compass Systems LTD,,,(414) ###-####,name@email.com,http://www.website.edu/,"Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minima unde ullam illum quibusdam similique vel, modi dolorem provident quasi quisquam, quis architecto commodi enim excepturi asperiores quas, et numquam nesciunt, voluptas error accusamus! Distinctio autem, molestias, iure cumque quae ab?");
    (function() {
        var template = $('#template').html(),
            output = Mustache.to_html(template, {
                array: result
            });
        $('.isotope').append(output);
    })();
</script>

那不是有效的 JavaScript。

正如评论中提到的MonkeyZeus，您需要引用它，以便它在您的 JavaScript 代码中显示为字符串。这样做导致不同语法错误的原因是 CSV 文件包含换行符，换行符在单引号或双引号 JavaScript 字符串内无效，因此它被解释为代码行的结尾，并且该行被视为未终止的字符串，导致语法错误。

有几种方法可以解决这个问题。如果您的所有目标浏览器都支持 ES6，那么修复将相当简单，只需使用允许换行符的` 模板字符串引用它。

var result = $.csv.toObjects(<?php echo '`' . $data . '`' ?>);

为了安全起见，您应该避免任何反引号：

var result = $.csv.toObjects(<?php echo '`' . sr_replace('`', '\`', $data) . '`' ?>);

如果你需要支持 ES5，它会变得有点复杂。正如 MonkeyZeus 建议的那样，您需要转义单引号，但您还需要转义换行符和/或回车符：

var result = $.csv.toObjects(<?php echo "'" . str_replace('\n', '\\n', str_replace('\r\n', '\n', str_replace("'", "\\'", $data) . "'"; ?>);

应该在 ES5 中工作的一种可能更简单的方法是对字符串进行 JSON 编码，然后在 JavaScript 中对其进行解码：

var result = $.csv.toObjects(JSON.parse(<?php echo "'" . json_encode($data) . "'" ?>));
于 2016-08-03T14:05:37.560 回答