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

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() 它。

您需要做的是检查该 anchor (通过它的 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对于以上内容。

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

1. 将 change 处理程序绑定(bind)到文件输入，如果上传了文件(意味着，不仅仅是在文件上传对话框上单击并取消)，请将其作为输入文件作为值(在您想要执行的任何查找/替换之后)。

2. $("#submitButton") 上的 click 处理程序只会接受所有输入，序列化它们，然后创建/修改下载 anchor 链接如我的第一次代码尝试。

这是上述内容的演示(编辑部分)。

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到演示进行上述编辑。