通过表单提交创建 JSON 文件答案

【问题标题】：JSON file creation through a form submission通过表单提交创建 JSON 文件
【发布时间】：2014-05-20 20:32:09
【问题描述】：

我正在寻找一种创建/写入外部自定义 JSON 文件的方法。

我在 (input/textarea/select) 中有一个包含多个元素的表单，我想要的是当我单击提交/保存按钮时，将此表单中的信息转换为 JSON 信息并保存到外部文件因此可以在调用时检索它。所以它会永远留在那里。

它是一个预设选择器。填写表单样式选项，点击保存预设，然后稍后调用它以重新填写表单（这个我有一个解决方案 - jQuery表单自动填充）

为您的帮助干杯。

【问题讨论】：

“文件”是指存储在客户端吗？听起来像 localStorage 和 JSON.stringify 和 JSON.parse 应该适合你

标签： javascript jquery ajax json forms

【解决方案1】：

您可以使用

将数据传递到另一个 php 文件

    $('#saveBtn').click(function() {
    var htmltesxtbox1 = $('#textbox1').val();
    var htmltesxtbox2 = $('#textbox2').val();
    var htmltesxtbox3 = $('#tesxtbox3').val();
    $.ajax({
        type: "POST",
        url: yourphpfileUrl,
        data: {textbox1: htmltesxtbox1, textbox2: htmltesxtbox2, tesxtbox3: htmltesxtbox3}
    }).done(function(data) {
        //do some thing after pass the data

    });

});

然后在 php 文件中，您可以获取数据并执行您需要做的任何事情。

【讨论】：

要从表单中获取所有字段，您可以使用 jQuery 的 $('form').serialze()jQuery API 中的更多信息

【解决方案2】：

尝试类似的东西

$.fn.serializeObject = function()
{
    var o = {};
    var a = this.serializeArray();
    $.each(a, function() {
        if (o[this.name] !== undefined) {
            if (!o[this.name].push) {
                o[this.name] = [o[this.name]];
            }
            o[this.name].push(this.value || '');
        } else {
            o[this.name] = this.value || '';
        }
    });
    return o;
};

$(function() {
    $('form').submit(function() {
        $('#result').text(JSON.stringify($('form').serializeObject()));
        //export to file
        return false;
    });
});

Demo for Json Convert

导出到文件

function JSONToCSVConvertor(JSONData, ReportTitle, ShowLabel) {
    //If JSONData is not an object then JSON.parse will parse the JSON string in an Object
    var arrData = typeof JSONData != 'object' ? JSON.parse(JSONData) : JSONData;

    var CSV = '';    
    //Set Report title in first row or line

    CSV += ReportTitle + '\r\n\n';

    //This condition will generate the Label/Header
    if (ShowLabel) {
        var row = "";

        //This loop will extract the label from 1st index of on array
        for (var index in arrData[0]) {

            //Now convert each value to string and comma-seprated
            row += index + ',';
        }

        row = row.slice(0, -1);

        //append Label row with line break
        CSV += row + '\r\n';
    }

    //1st loop is to extract each row
    for (var i = 0; i < arrData.length; i++) {
        var row = "";

        //2nd loop will extract each column and convert it in string comma-seprated
        for (var index in arrData[i]) {
            row += '"' + arrData[i][index] + '",';
        }

        row.slice(0, row.length - 1);

        //add a line break after each row
        CSV += row + '\r\n';
    }

    if (CSV == '') {        
        alert("Invalid data");
        return;
    }   

    //Generate a file name
    var fileName = "MyReport_";
    //this will remove the blank-spaces from the title and replace it with an underscore
    fileName += ReportTitle.replace(/ /g,"_");   

    //Initialize file format you want csv or xls
    var uri = 'data:text/csv;charset=utf-8,' + escape(CSV);

    // Now the little tricky part.
    // you can use either>> window.open(uri);
    // but this will not work in some browsers
    // or you will not get the correct file extension    

    //this trick will generate a temp <a /> tag
    var link = document.createElement("a");    
    link.href = uri;

    //set the visibility hidden so it will not effect on your web-layout
    link.style = "visibility:hidden";
    link.download = fileName + ".csv";

    //this part will append the anchor tag and remove it after automatic click
    document.body.appendChild(link);
    link.click();
    document.body.removeChild(link);
}

Demo to Export File

Combine Demo

【讨论】：