使用 jquery 提交 csv 表单数据，然后显示为 json

Question

我是 jquery 的初学者，所以这可能很愚蠢。 我想从用户那里获取 csv 数据并将其转换为 json。找到了一个不错的库，但不太明白在 jquery 中提交是如何完成的。

例如，如果我有一个视图

<script type="text/javascript" src="<?php echo site_url('public/js/jquery.js') ?>" ></script>
<script type="text/javascript" src="<?php echo site_url('javascript/main.js') ?>" ></script>


    <div id="message"><p></p></div>

    <form id="convertForm" name="convertForm" onsubmit="return false; ">
        CSV<br /><textarea id="csv" name="csv" rows="10" cols="60"></textarea><br /><br />

        JSON<br /><textarea id="json" name="json" rows="10" cols="60" readonly="readonly"></textarea><br /><br />


        <input type="button" value="Convert" id="submitButton"/> <input type="reset" />
    </form>

还有 main.js 文件

function parseCSVLine (line)

            {
                line = line.split(',');
                for (var i = 0; i < line.length; i++)
                {
                    var chunk = line[i].replace(/^[\s]*|[\s]*$/g, "");
                    var quote = "";
                    if (chunk.charAt(0) == '"' || chunk.charAt(0) == "'") quote = chunk.charAt(0);
                    if (quote != "" && chunk.charAt(chunk.length - 1) == quote) quote = "";

                    if (quote != "")
                    {
                        var j = i + 1;

                        if (j < line.length) chunk = line[j].replace(/^[\s]*|[\s]*$/g, "");

                        while (j < line.length && chunk.charAt(chunk.length - 1) != quote)
                        {
                            line[i] += ',' + line[j];
                            line.splice(j, 1);
                            chunk = line[j].replace(/[\s]*$/g, "");
                        }

                        if (j < line.length)
                        {
                            line[i] += ',' + line[j];
                            line.splice(j, 1);
                        }
                    }
                }

                for (var i = 0; i < line.length; i++)
                {
                    // remove leading/trailing whitespace
                    line[i] = line[i].replace(/^[\s]*|[\s]*$/g, "");

                    // remove leading/trailing quotes
                    if (line[i].charAt(0) == '"') line[i] = line[i].replace(/^"|"$/g, "");
                    else if (line[i].charAt(0) == "'") line[i] = line[i].replace(/^'|'$/g, "");
                }

                return line;
            }

            function csvToJson ()
            {
                var message = "";
                var error = false;
                var f = document.forms["convertForm"];
                var csvText = f.elements["csv"].value;
                var jsonText = "";

                setMessage(message, error);

                if (csvText == "") { error = true; message = "Enter CSV text below."; }

                if (!error)
                {
                    benchmarkStart = new Date();
                    csvRows = csvText.split(/[\r\n]/g); // split into rows

                    // get rid of empty rows
                    for (var i = 0; i < csvRows.length; i++)
                    {
                        if (csvRows[i].replace(/^[\s]*|[\s]*$/g, '') == "")
                        {
                            csvRows.splice(i, 1);
                            i--;
                        }
                    }

                    if (csvRows.length < 2) { error = true; message = "The CSV text MUST have a header row!"; }
                    else
                    {
                        objArr = [];

                        for (var i = 0; i < csvRows.length; i++)
                        {
                            csvRows[i] = parseCSVLine(csvRows[i]);
                        }

                        benchmarkParseEnd = new Date();

                        for (var i = 1; i < csvRows.length; i++)
                        {
                            if (csvRows[i].length > 0) objArr.push({});

                            for (var j = 0; j < csvRows[i].length; j++)
                            {
                                objArr[i - 1][csvRows[0][j]] = csvRows[i][j];
                            }
                        }

                        benchmarkObjEnd = new Date();

                        jsonText = JSON.stringify(objArr, null, "\t");

                        benchmarkJsonEnd = new Date();

                        f.elements["json"].value = jsonText;

                        benchmarkPopulateEnd = new Date();

                        message = getBenchmarkResults();


                    }
                }

                setMessage(message, error);
            }

$(document).ready(function(){

            $('#submitButton').on('click', function(){

                console.log('i got here');
                csvToJson;


            });



});

这可以完美运行，但 console.log 从未显示。

如果我尝试从 csvToJson 函数返回 jsonText，然后将其附加到第二个 textarea，那也不起作用。

function csvToJson ()

{

//same code here

return jsonText;

}


$(document).ready(function(){

            $('#submitButton').on('click', function(){

                console.log('i got here');
                jsont = csvToJson();
                                $("#json").val(jsonT);


            });

这显然是我无法提交的内容。我应该使用 jquery .submit() 函数吗？

Answer 1

在点击处理程序中调用 csvToJson 时缺少括号。

变化：

$('#submitButton').on('click', function(){ 
                csvToJson;
});

到

$('#submitButton').on('click', function(){ 
                csvToJson();
});

演示：http://jsfiddle.net/MRmJM/1/

注意：如果 CSV 用分号分隔（并不罕见），解析器代码无法创建正确的对象