使用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文本文件

回答

相关问题