使用HTML表單輸入更新JSON文本文件

如果在其他位置回答了此問題，我很抱歉。我確實搜索了很多，但沒有回答我的問題。此外，我有點新，所以請在回答時記住這一點...使用HTML表單輸入更新JSON文本文件

我有一個時間軸，我使用從http://timeline.verite.co/這是一個很好的時間軸，可以通過JSON文件進行分析。但是，我希望能夠通過我網站上的用戶表單更新JSON文件。

例如：有一個管理頁面...的表單區域的代碼是在這裏：

 <div id = "contentarea">  
     <div id="tab1"> 
      <form id="randomevents" method="POST" action="#"> 
       <ul> 
        <li><label for="event_title">Event Title</label> 
         <input id="event_title" type="text"></li> 
        <li><label for="event_details">Event Details</label> 
         <textarea rows="15" cols="44"></textarea></li> 
        <li><label for="date">Date: ex "mm/dd/yyyy"</label> 
         <input id="date" type="text"></li> 
        <div id="submitevent"><button type="submit" class="button">Submit</button></div> 

       </ul> 
      </form>

該線位於另一頁上...它的代碼是這樣的：

 <div id="timeline-embed"></div> 
    <script type="text/javascript"> 
     var timeline_config = { 
     width:    '100%', 
     height:    '300px', 
     source:    'data.json', 
     start_at_end:  false,       
     start_at_slide:  '1',        
     hash_bookmark:  true,       
     font:    'Bevan-PotanoSans',    
     maptype:   'watercolor',     
     css:    'js/maintimeline/compiled/css/timeline.css',  
     js:     'js/maintimeline/compiled/js/timeline-min.js' 
    } 

</script>

JSON文件看起來是這樣的（部分）：

{ 
"timeline": 
{ 
    "headline":"Helen Queen", 
    "type":"default", 
    "text":"A beautiful mother, wife, woman", 
    "date": [ 
     { 
      "startDate":"1924,1,26", 
      "headline":"A little girl is born into a big family!", 
      "text":"<p>Helen is born on January 11, 1924. She is the fifth girl and the eight overall child!</p>", 
      "asset": 
      { 
       "media":"images/fortimeline/helen.jpg", 
       "credit":"", 
       "caption":"" 
      } 
     },

我要的是對用戶輸入的內容到形式在管理頁面上，讓它更新（並添加到）JSON文件，然後JSON文件將自動更新時間軸頁面。就像我說的，我已經搜索了答案，但沒有完全匹配，或者答案讓我難以理解！

謝謝！

來源

2012-07-25 Chandelle Paccione

你錯過了一塊，使這一切工作。您需要服務器代碼來執行此操作。你使用什麼服務器端語言？ – ThinkingStiff 2012-07-25 06:01:41

您的管理員區域應該將更改後的文件發送到服務器，我想您已經實施了該部分。

您的時間線頁面（客戶端）需要做的事情是獲知有數據發生變化。可在基本上有兩種方式來完成：

定期調查服務器詢問是否有變化。這很容易做到：創建一個計時器，例如每60秒鐘重新從服務器請求數據，將其與服務器上的數據進行比較，如果發生變化，則重新繪製時間線。這個方法在服務器端不需要特別的。更有效的方法不是一次又一次地檢索整個文件，而是實現一個服務器端方法，比如「getLastUpdatedTimestamp」，它返回文件上次更新的時間。然後，客戶端可以比較此時間戳而不是整個文件，如果更改，則檢索新文件。
通過推送通知自動通知服務器。這將是最好的解決方案，但實現起來並不是很容易（要求在客戶端和服務器之間保持一個套接字的打開狀態，這隻能由現代瀏覽器支持）。

來源

2012-07-25 07:27:32

使用HTML表單輸入更新JSON文本文件

回答

相關問題