如何使用保存對話框將表單值保存爲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？

回答

相關問題