php - JavaScript:将某些数据保存到 csv

Question

我知道 JavaScript 并不是真正为打开和保存文件而设计的。我见过的最好的方法是使用一个表单，然后将我需要的所有信息发布到一个 PHP 文件中，这样就可以将我想要的信息保存到一个文件中。

我计划生成这种数据并将其存储到 csv 中:

名称,低,高,数

使用输入框和 javascript。我决定我会这样开始(____________ 是一个输入框)

Name: ______________    Start: 0      End: _____  Wage ______  [add button]

当此人单击“添加”时，它会将数据存储到一个变量中。我应该怎么做最好？假设此人填写此信息:

Name: Brian             Start: 0      End: 100    Wage 200  [add button]

我应该做类似 $Array['Brian'][0,100,200] 的事情吗？

然后我可以在通过 POST 发送时以某种方式循环遍历 PHP 中的数组？

---

请记住，当此人单击“添加”时，会出现另一个使用以前数据的选项，例如我的 Brian，0,100,200 示例

Name: Brian           Start: 100       End: ______   Wage: ______   [add button]

想法是不能在低和高之间创建差距。不能以 100 结束并从 200 开始，下一个永远是开始。

编辑:

只是为了提供一些背景知识，我存储的实际上是人们的小时工资。 Brian,0,20,20 实际上将其设置为 0 到 20 之间的小时数；布赖恩每小时赚 20 美元。

什么是“开始”、“结束”和“工资”？
小时范围的开始、小时范围的结束和小时工资。

您需要永久存储他们的数据吗？
它需要存储到一个CSV文件中，该文件被客户端拦截并转换成SQLite内存数据库进行处理

“Brian”在一个存储期内是否会有多个条目？
是的，你想输入多少就输入多少。还必须有一个设置为“默认”的名称......如果员工没有特殊工资，他们将获得默认员工工资和加类费，例如:
默认,0,40,15
默认,40,1000,20

Answer 1

您可能需要考虑将您的信息以 JSON 格式存储在本地数组变量中，然后通过 POST 变量将其发送到您的 PHP 页面。

这是一个快速 fiddle我把它放在一起来说明它。我相信它可以满足您的需求。 (HTML 标记和 JavaScript 位于此答案的末尾，以防 jsFiddle.net 消失。)

基本上我所做的是声明一个空数组变量:

var data = [];

然后，使用 jQuery，当单击“添加”按钮时，我将您的文本框和起始值添加到数组中:

data.push({"name" : $("#name").val(), "start": $("#start").text(), "end": $("#end").val(), "wage": $("#wage").val()});

每次单击“添加”时，您都可以看到 JSON 格式的数组 - 我使用 JSON2.js 输出它图书馆:

$("#jsonData").text(JSON.stringify(data));

由于数据是一个数组，你可以在客户端循环它并提取信息:

alert(data[data.length-1].name);

您还可以在服务器端访问它(我不是 PHP 专家，但我 99.99% 确定那里支持 JSON)。

希望对您有所帮助!如果对此有任何疑问，或者如果我没有得到正确的要求，请告诉我，我会相应地更新我的答案。

编辑:这是标记和 JavaScript

标记

Name: <input type="text" id="name" /><br/>
Start: <span id="start">0</span><br/>
End: <input type="text" id="end" /><br/>
Wage: <input type="text" id="wage" /><br/>
<button id="add">Add</button>

<br/>
<div id="jsonData"></div>

<br/>
<button id="submit">Submit</button>
​

JavaScript (请注意，我意识到这个 JavaScript 不是最优的——我可以缓存 jQuery 选择器查询而不是重新执行它们。我只是为了快速将一些东西放在一起演示目的。)

var data = [];

$(document).ready(function() {
    $("#add").click(function(e) {
        e.preventDefault();
        //add the entered values into the array...
        data.push({"name" : $("#name").val(), "start": $("#start").text(), "end": $("#end").val(), "wage": $("#wage").val()});
        //set the start span to the value entered in the end textbox...
        $("#start").text($("#end").val());
        //clear out the text boxes (not efficient!)
        $("#name").val("");
        $("#end").val("");
        $("#wage").val("");

        //show some values!
        alert(data.length);
        alert(data[data.length-1].name);

        //show the JSON formatted array in the DIV at the bottom of the page...
        $("#jsonData").text(JSON.stringify(data));
    });

    $("#submit").click(function(e) {
        e.preventDefault();
        $.ajax({
            url: "/ajax_html_echo/",
            type: "POST",
            dataType: "json",
            data: {html: JSON.stringify(data)},
            success: function(data) { alert(JSON.stringify(data)); },
            error: function(x, t, m) { alert(t + " :: " + m); }
        });
    });
});
​