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

时间:2012-12-09 13:08:53

标签: javascript jquery json forms csv

我是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()函数吗?

1 个答案:

答案 0 :(得分:1)

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

变化:

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

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

DEMO:http://jsfiddle.net/MRmJM/1/

一个注意事项:如果CSV用分号分隔(非常见),则解析器代码无法创建正确的对象