Question

我知道JavaScript并不是真正打开和保存文件。我看到的最好的方法是使用一个表单，然后将我需要的所有信息POST到一个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开始，下一个始终是开始。

编辑：

为了给出一些背景知识，我存储的实际上是人们的小时工资。布莱恩，0,20,20实际上设置了0到20之间的小时;布莱恩每小时20美元。

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

您是否需要永久存储他们的数据？
它需要存储到CSV文件中，该文件被客户端拦截并将其转换为SQLite内存数据库以进行处理

存储期内“Brian”会有多个条目吗？
是的，尽可能多的条目。还有一个名称，其中设置了'默认'......如果员工没有特殊工资，他们会获得默认的员工工资和加班费，例如：默认情况下，0,40,15
缺省情况下，40,1000,20

Answer 1

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

这是一个快速fiddle，我把它放在一起来说明它。我相信它能满足您的需求。（如果jsFiddle.net消失，HTML标记和JavaScript就在这个答案的最后。）

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

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); }
        });
    });
});

Answer 2

我会像这样设置输入框：

Name:  <input type="text" name="name[]">
Start: <input type="text" name="start[]">
End:   <input type="text" name="end[]">
Wage:  <input type="text" name="wage[]">

这样您就可以轻松处理多个条目。

请参阅Working Demo和Source Code

代码非常难看，但我相信你可以更好地完善它。您可以在服务器端执行所有验证，删除空条目等。大多数解释和链接上的一些示例代码。（需要jQuery。）

JavaScript：将某些数据保存到csv

2 个答案:

请参阅Working Demo和Source Code