Question

我是否可以知道如何为新输入的表单输入字段获取更新的json文件。截至目前，我可以将表单输入字段保存到我的json文件中，但是如果我输入任何新的输入值，那么如果我点击我的保存按钮，那么这个新输入的值不会存储到我的json文件中（我仍然可以看到我的旧密钥/值）。请告诉我我在哪里做错了以及如何做到这一点？

HTML：

<form id="imagesId">
    <input type="hidden" value="/images/Image1.png" name="Image1">
    <input type="hidden" value="/images/Image2.png"  name="Image2" >
    <input type="hidden" value="/images/Image3.png" name="Image3"> 
    <input type="hidden" value="/images/Image4.png" name="Image4">
    <input type="hidden" value="/images/Image5.png" name="Image5">

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

JSON：

[{"name":"Image1","value":"/images/Image1.png"},{"name":"Image2","value":"/images/Image2.png"},{"name":"Image3","value":"/images/Image3.png"},{"name":"Image4","value":"/images/Image4.png"},{"name":"Image5","value":"/images/Image5.png"}]

jQuery的：

$("#submitButton").on('click', function(e) {
var jsonToSave = $("#imagesId").serializeArray();
var jsonData = JSON.stringify( jsonToSave );
    var $downloadAnchor = $("<a/>", {
        href: 'data:text/json;charset=UTF-8,' + jsonData,
        download: "Image.json"
    });
$downloadAnchor.text("Click here to download JSON");
$("#imagesId").append($downloadAnchor);
e.preventDefault();
return false;
});

Answer 1

问题在于$downloadAnchor持有对DOM元素的引用（jQuery对象=包含在$()中的DOM元素）。将该元素追加到DOM时，$downloadAnchor仍引用同一个对象。当你想再次将它插入DOM时，它不会神奇地复制它，除非你.clone()它。

您需要做的是检查该锚点（通过它的ID /类）是否已经在DOM中，如果是，只需使用新数据更新它href下方。

$("#submitButton").on('click', function(e) {
    e.preventDefault();
    var $form = $("#imagesId");
    var jsonToSave = $form.serializeArray();
    var jsonData = JSON.stringify(jsonToSave);
    var $downloadLink = $("#download");

    if ( $downloadLink.length ) {
        $downloadLink.attr({
            'href': 'data:text/json;charset=UTF-8,' + jsonData
        });
    } else {
        $form.append(
            $("<a/>", {
                'href': 'data:text/json;charset=UTF-8,' + jsonData,
                'download': "Image.json",
                'id': 'download',
                'text': "Click here to download JSON"
            })
        );
    }
});

A demo以上内容。

编辑：为了能够将作为输入上传的每个文件（具有唯一名称+上传文件的值）附加到表单，您需要做两件事。

将change处理程序绑定到文件输入，如果上传了文件（意味着，不仅仅是在文件上传对话框中单击并取消），请将其附加到表单作为输入file作为值（在你想做的任何find / replace之后）。
click上的$("#submitButton")处理程序只接受所有输入，序列化它们，然后像我的第一次代码尝试一样创建/修改下载锚链接。

以下是上述（编辑部分）的演示。

var $form = $("#imagesId"); //The form
var len = $form.find('input[type="hidden"]').length; //Number of files in the form

$form.on("change", ":file", function() {
    var file = $(this).val() || false;
    if (file) {
        //Do your replace etc. here
        //.replace(/C:\\fakepath\\/i, '');
        len++;
        $form.append('<input type="hidden" value="' +file+ '"  name="image' +len+ '" />');
    }
});

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

    e.preventDefault();
    var jsonToSave = $form.serializeArray();
    var jsonData = JSON.stringify(jsonToSave, null, 4);
    var $downloadLink = $("#download");
    alert (jsonData);
    //Other code goes here such as create anchor, append/modify etc.
});

Link到演示文稿进行上述编辑。

Answer 2

您可以像这样使用push

oldJson.push(newJSon);

如何使用javascript或jquery获取更新的json文件以获取新的表单输入？

2 个答案: