如何使用保存对话框将表单值保存为JSON？

这JS Fiddle将提交表单值，但我想提交按钮序列化为JSON，而不是打开一个保存对话框。它必须离线工作，所以只能使用HTML和JS。如何使用保存对话框将表单值保存为JSON？

问题

是否存在一个jQuery插件有能做到这一点？如果不是，我应该看看哪个JS函数？

$("#myform").dform({ 
    "action" : "index.html", 
    "method" : "get", 
    "html" : 
    [ 
     { 
      "type" : "p", 
      "html" : "You must login" 
     }, 
     { 
      "name" : "username", 
      "id" : "txt-username", 
      "caption" : "Username", 
      "type" : "text", 
      "placeholder" : "E.g. [email protected]" 
     }, 
     { 
      "name" : "password", 
      "caption" : "Password", 
      "type" : "password" 
     }, 
     { 
      "type" : "submit", 
      "value" : "Login" 
     } 
    ] 
});

HTML

<form id="myform"></form>

CSS

body { 
    font-family: sans-serif; 
    padding: 10px; 
} 

label, input { 
    display: block; 
    margin-top: 10px; 
}

来源

2014-09-22 Jasmine Lognnes

应检查D-型文档，或只是一个标准的 – 2014-09-22 16:18:45

使用.serialize（）不完全相关的，但在那里你是否在离线时提交表单？ – Teemu 2014-09-22 16:22:00

有jQuery的牛逼serializeArray()帽子可以帮助您轻松构建JSON：

$("#myform").on('submit', function(e){ 

    // prevent default submit action 
    e.preventDefault(); 

    var serialized = $(this).serializeArray(), 
     obj = {}; 

    // build key-values 
    $.each(serialized, function(){ 
     obj [this.name] = this.value; 
    }); 

    // and the json string 
    var json = JSON.stringify(obj); 

    console.log(json); 
    // send your data here... 

});

的对话框是一个更广泛的话题;）

来源

2014-09-22 16:25:10

保存对话框指的是操作系统提供的标准。例如。当你点击下载链接时。 – 2014-09-22 18:52:14

没有生成要保存的文件的服务器，它会变得更复杂一点。你将不得不建立一个['Blob']（https://developer.mozilla.org/en/docs/Web/API/Blob），将数据追加到它上面，然后获取它的URL。你确定这是你想要的吗？因为将用户名和密码保存到json文件似乎对我来说有点奇怪 – 2014-09-22 20:14:47

好的，我看到了问题...用户名/密码仅仅是一个例子。我想制作一个亭子，人们在纸上展示一些图片，他们应该在浏览器中写下他们看到的内容，然后将结果保存到文件中。电脑只有Firefox/Chrome，并且没有互联网连接。 – 2014-09-23 09:19:12

如何使用保存对话框将表单值保存为JSON？

回答

相关问题